Add share feature

src/components/VideoPlayer.vue

@@ -8,12 +8,12 @@
 import videojs from 'video.js'
 import qualityLevels from 'videojs-contrib-quality-levels'
 import { createQualitySelector } from '@/assets/qualitySelector'
+import { getTimeFromQuery } from '@/mixins'
 import 'video.js/dist/video-js.css'
 
 videojs.registerPlugin('qualityLevels', qualityLevels)
 
 export default {
-  name: 'VideoJsPlayer',
   props: {
     options: {
       type: Object,
@@ -23,7 +23,7 @@ export default {
     }
   },
   emits: ['PlayerTimeUpdate'],
-  data() {
+  setup() {
     let player: any
     return {
       player
@@ -36,6 +36,12 @@ export default {
     this.player = videojs('video-player', this.options, () => {
       createQualitySelector(this.player)
 
+      if (this.$route.query['t']) {
+        const timeQuery = this.$route.query['t'].toString() || ""
+        const time = getTimeFromQuery(timeQuery)
+        this.player.currentTime(time)
+      }
+
       this.player.on('timeupdate', () => {
         emit('PlayerTimeUpdate', this.player.currentTime())
       })

src/components/popups/ShareButtonPopup.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { useRoute } from "vue-router";
+import { ref } from "vue";
+
+export default {
+    setup() {
+        const route = useRoute()
+        const instanceUrl = location.protocol + '//' + location.host;
+        let currentUrl = ref(instanceUrl)
+
+        return {
+            path: route.fullPath,
+            usingTwitchUrl: ref(false),
+            usingTime: ref(false),
+            query: ref(""),
+            instanceUrl,
+            currentUrl
+        }
+    },
+    emits: ['close'],
+    props: {
+        time: {
+            type: Number,
+            default() {
+                return 0
+            }
+        },
+        useTime: {
+            type: Boolean,
+            default() {
+                return false
+            }
+        }
+    },
+    methods: {
+        formatSecondsToQuery(sec: number) {
+            const date = new Date(sec * 1000)
+            const hour = date.getHours()
+            const minutes = date.getMinutes()
+            const seconds = date.getSeconds()
+
+            return `${hour}h${minutes}m${seconds}s`
+        },
+        toggleTwitchUrl() {
+            if (this.usingTwitchUrl) {
+                this.currentUrl = "https://twitch.tv"
+            } else {
+                this.currentUrl = this.instanceUrl
+            }
+        },
+        async copyUrl() {
+            try {
+                await navigator.clipboard.writeText(this.currentUrl + this.path + this.query);
+                console.log('Content copied to clipboard');
+            } catch (err) {
+                console.error('Failed to copy: ', err);
+            }
+        },
+        toggleTime() {
+            if (this.usingTime) {
+                const timestamp = this.formatSecondsToQuery(this.$props.time)
+                this.query = "?t=" + timestamp
+            } else {
+                this.query = ""
+            }
+        },
+        gotoUrl() {
+            location.href = this.currentUrl + this.path + this.query
+        }
+    }
+}
+</script>
+
+<template>
+    <div class="fixed top-0 bottom-0 left-0 right-0 flex w-full z-50 h-[100vh] bg-opacity-50 bg-black">
+        <div class="bg-ctp-crust my-auto h-min mx-auto w-[35rem] max-w-[95vw] p-5 rounded-md relative z-50 text-white">
+            <div class="flex justify-between">
+                <h1 class="text-3xl font-bold">Share</h1>
+                <button @click="$emit('close')">
+                    <v-icon name="io-close-sharp" scale="1.8"></v-icon>
+                </button>
+            </div>
+            <hr class="my-2" />
+            <div class="flex bg-ctp-surface0 p-3 rounded-md h-12 overflow-x-scroll whitespace-nowrap">
+                <p class="" ref="urlPreview">
+                {{ currentUrl + path + query }}
+                </p>
+            </div>
+            <ul class="mt-1">
+                <li>
+                    <label class="flex items-center">
+                        <input :disabled="!useTime" class="align-middle w-4 h-4 mr-1 disabled:opacity-50" type="checkbox" @change="toggleTime()" v-model="usingTime" /> Add Timestamp
+                    </label>
+
+                    <label class="flex items-center">
+                        <input class="align-middle w-4 h-4 mr-1" @change="toggleTwitchUrl()" v-model="usingTwitchUrl" type="checkbox" /> Twitch URL
+                    </label>
+                </li>
+            </ul>
+
+            <div class="space-x-2 mt-1">
+                <button class="p-2 py-1.5 bg-ctp-surface0 rounded-md" @click="copyUrl()">Copy Link</button>
+                <button class="p-2 py-1.5 bg-ctp-surface0 rounded-md" @click="gotoUrl()" >Go to</button>
+            </div>
+        </div>
+    </div>
+</template>