Add share feature

src/views/ClipView.vue

@@ -7,15 +7,12 @@ import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import AboutTab from '@/components/user/AboutTab.vue'
+import ShareModal from '@/components/popups/ShareButtonPopup.vue'
 
 import type { Video } from '@/types'
 import { truncate, abbreviate, getEndpoint } from '@/mixins'
 import { chatVisible } from '@/settingsManager'
 
-interface ChatComponent {
-  updateVodComments: (time: number) => void
-}
-
 export default {
   inject: ['rootBackendUrl'],
   async setup() {
@@ -50,7 +47,9 @@ export default {
     return {
       data,
       status,
-      videoOptions
+      videoOptions,
+      time: ref(0),
+      shareModalVisible: ref(false)
     }
   },
   async mounted() {
@@ -70,22 +69,22 @@ export default {
     ErrorMessage,
     FollowButton,
     LoadingScreen,
-    AboutTab
+    AboutTab,
+    ShareModal
   },
   methods: {
     truncate,
     abbreviate,
-    handlePlayerTimeUpdate(time: number) {
-      if (!chatVisible()) return
-      const chat = this.$refs.chat as ChatComponent
-      chat.updateVodComments(time)
-    },
-    chatVisible
+    chatVisible,
+    toggleShareModal() {
+      this.shareModalVisible = !this.shareModalVisible
+    }
   }
 }
 </script>
 
 <template>
+  <share-modal v-if="shareModalVisible" :useTime="false" @close="toggleShareModal"></share-modal>
   <loading-screen v-if="!data && status != 'error'"></loading-screen>
   <error-message v-else-if="status == 'error'"></error-message>
 
@@ -97,7 +96,7 @@ export default {
       class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
     >
       <div class="w-full mx-auto rounded-lg mb-5">
-        <video-player :options="videoOptions" @PlayerTimeUpdate="handlePlayerTimeUpdate">
+        <video-player :options="videoOptions">
         </video-player>
       </div>
 
@@ -121,25 +120,22 @@ export default {
           </div>
         </div>
 
-        <div class="pt-2 inline-flex">
+        <div class="flex justify-between items-center">
+          <div class="pt-2 inline-flex">
           <follow-button :username="data.streamer.username"></follow-button>
           <p class="align-baseline font-bold ml-3">
             {{ abbreviate(data.streamer.followers) }} {{ $t('main.followers') }}
           </p>
         </div>
+
+        <button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple-600">
+              <v-icon name="fa-share-alt"></v-icon>
+            </button>
+        </div>
       </div>
 
       <!-- ABOUT TAB -->
       <about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>     
     </div>
-
-    <!--
-          <twitch-chat
-      v-if="chatVisible()"
-      :isVod="true"
-      :channelName="data.streamer.login"
-      ref="chat"
-    ></twitch-chat>
-    -->
   </div>
 </template>