add share dialog

src/components/ShareModal.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="modal">
+        <div>
+            <div class="modal-container">
+                <h2 v-t="'actions.share'" />
+                <div class="flex justify-between mt-4">
+                    <label v-t="'actions.with_timecode'" for="withTimeCode" />
+                    <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
+                </div>
+                <div class="flex justify-between">
+                    <label v-t="'actions.piped_link'" />
+                    <input type="checkbox" v-model="pipedLink" />
+                </div>
+                <h3 class="mt-4" v-text="generatedLink" />
+                <div class="flex justify-end mt-4">
+                    <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
+                    <button class="btn ml-5" v-t="'actions.copy_link'" @click="copyLink()" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal {
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+}
+
+.modal > div {
+    @apply table-cell align-middle;
+}
+
+.modal-container {
+    @apply w-100 m-auto px-8 bg-dark-700 p-5 flex flex-col rounded-xl;
+}
+</style>
+
+<script>
+export default {
+    props: {
+        videoId: {
+            type: String,
+            required: true,
+        },
+        currentTime: {
+            type: Number,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            withTimeCode: true,
+            pipedLink: true,
+        };
+    },
+    mounted() {
+        window.addEventListener("keydown", this.handleKeyDown);
+        console.log(parseInt(this.currentTime));
+    },
+    unmounted() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+    },
+    methods: {
+        handleKeyDown(event) {
+            if (event.code === "Escape") {
+                this.$emit("close");
+            } else return;
+            event.preventDefault();
+        },
+        followLink() {
+            window.location.href = this.generatedLink;
+        },
+        copyLink() {
+            this.$emit("close");
+        },
+    },
+    computed: {
+        generatedLink() {
+            var href = this.pipedLink
+                ? window.location.origin + "/watch?v=" + this.videoId
+                : "https://youtu.be/" + this.videoId;
+            if (this.withTimeCode) href += "?t=" + this.currentTime;
+            return href;
+        },
+    },
+};
+</script>

src/components/WatchVideo.vue

@@ -88,6 +88,12 @@
                     />
                 </div>
                 <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
+                <ShareModal
+                    v-if="showShareModal"
+                    :video-id="getVideoId()"
+                    :current-time="currentTime"
+                    @close="showShareModal = !showShareModal"
+                />
                 <div class="flex">
                     <div class="self-center children:mr-1 my-1">
                         <!-- RSS Feed button -->
@@ -105,15 +111,10 @@
                             <font-awesome-icon icon="rss" />
                         </a>
                         <!-- watch on youtube button -->
-                        <a :href="`https://youtu.be/${getVideoId()}`" class="btn lt-lg:hidden">
+                        <button class="btn" @click="showShareModal = !showShareModal">
-                            <i18n-t keypath="player.watch_on" tag="strong">
+                            <i18n-t class="<lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
-                                <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
+                            <font-awesome-icon class="mx-1.5" :icon="share" />
-                            </i18n-t>
+                        </button>
-                        </a>
-                        <!-- only visible on small screens -->
-                        <a :href="`https://youtu.be/${getVideoId()}`" class="btn lg:hidden">
-                            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                        </a>
                         <!-- LBRY -->
                         <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
                             <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
@@ -211,6 +212,7 @@ import ErrorHandler from "./ErrorHandler.vue";
 import CommentItem from "./CommentItem.vue";
 import ChaptersBar from "./ChaptersBar.vue";
 import PlaylistAddModal from "./PlaylistAddModal.vue";
+import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
 
 export default {
@@ -222,6 +224,7 @@ export default {
         CommentItem,
         ChaptersBar,
         PlaylistAddModal,
+        ShareModal,
         PlaylistVideos,
     },
     data() {
@@ -245,6 +248,7 @@ export default {
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
             showModal: false,
+            showShareModal: false,
             isMobile: true,
             currentTime: 0,
         };

src/locales/en.json

@@ -97,7 +97,12 @@
         "confirm_reset_preferences": "Are you sure you want to reset your preferences?",
         "backup_preferences": "Backup preferences",
         "restore_preferences": "Restore preferences",
-        "back_to_home": "Back to home"
+        "back_to_home": "Back to home",
+        "share": "Share",
+        "with_timecode": "Share with time code",
+        "piped_link": "Piped link",
+        "follow_link": "Follow link",
+        "copy_link": "Copy link"
     },
     "comment": {
         "pinned_by": "Pinned by",

src/main.js

@@ -16,6 +16,7 @@ import {
     faCircleMinus,
     faXmark,
     faClone,
+    faShare,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -38,6 +39,7 @@ library.add(
     faCircleMinus,
     faXmark,
     faClone,
+    faShare,
 );
 
 import router from "@/router/router.js";