From 3fad74f7fd8903b989062e0748d4e45438fea96e Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Fri, 11 Mar 2022 01:24:53 +0530
Subject: [PATCH] Replace the YouTube link with a dialog that has links both
 with and without timestamps.

Partly based upon an idea from https://github.com/TeamPiped/Piped/issues/886 .
---
 src/components/VideoSharingPanel.vue | 78 ++++++++++++++++++++++++++++
 src/routes/WatchVideo.vue            | 43 ++++++++-------
 src/translations/en.json             |  7 +++
 3 files changed, 109 insertions(+), 19 deletions(-)
 create mode 100644 src/components/VideoSharingPanel.vue

diff --git a/src/components/VideoSharingPanel.vue b/src/components/VideoSharingPanel.vue
new file mode 100644
index 0000000..6499627
--- /dev/null
+++ b/src/components/VideoSharingPanel.vue
@@ -0,0 +1,78 @@
+<template>
+    <v-card>
+        <v-card-title>Share this video</v-card-title>
+        <v-card-text>
+            <p class="text-subtitle-1">{{ $t('video_sharing_panel.with_timestamps') }}</p>
+            <v-row align="center" no-gutters>
+                <v-col cols="4">
+                    {{ $t('video_sharing_panel.via_pm')}}
+                </v-col>
+                <v-col cols="8">
+                    <v-text-field readonly dense :value="PMURL.withTimestamps" />
+                </v-col>
+            </v-row>
+            <v-row align="center" no-gutters>
+                <v-col cols="4">
+                    {{ $t('video_sharing_panel.via_yt')}}
+                </v-col>
+                <v-col cols="8">
+                    <v-text-field readonly dense :value="youtubeURL.withTimestamps" />
+                </v-col>
+            </v-row>
+            <v-divider class="my-1" />
+            <p class="text-subtitle-1">{{ $t('video_sharing_panel.without_timestamps') }}</p>
+            <v-row align="center" no-gutters>
+                <v-col cols="4">
+                    {{ $t('video_sharing_panel.via_pm')}}
+                </v-col>
+                <v-col cols="8">
+                    <v-text-field readonly dense :value="PMURL.base" />
+                </v-col>
+            </v-row>
+            <v-row align="center" no-gutters>
+                <v-col cols="4">
+                    {{ $t('video_sharing_panel.via_yt')}}
+                </v-col>
+                <v-col cols="8">
+                    <v-text-field readonly dense :value="youtubeURL.base" />
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+export default {
+	name: 'VideoSharingPanel',
+	props: ['currentTime', 'videoId'],
+	computed: {
+		currentTimeR () {
+			return Math.round(this.currentTime)
+		},
+
+		youtubeURL () {
+			const base = new URL('https://youtu.be/' + this.videoId)
+			const baseHref = base.href
+
+			base.searchParams.set('t', this.currentTimeR.toString())
+			return {
+				base: baseHref,
+				withTimestamps: base.href
+			}
+		},
+
+		PMURL () {
+			const base = new URL(window.location.href)
+			base.pathname = '/watch'
+			base.searchParams.set('v', this.videoId)
+			const baseHref = base.href
+
+			base.searchParams.set('t', this.currentTimeR.toString())
+			return {
+				base: baseHref,
+				withTimestamps: base.href
+			}
+		}
+	}
+}
+</script>
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 6883021..700a561 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -12,6 +12,10 @@
             @timeupdate="onTimeUpdate"
         />
 
+        <v-dialog max-width="720" v-model="sharingPanelOpen">
+            <VideoSharingPanel @input="sharingPanelOpen = $event" :current-time="currentTime" :video-id="videoId" />
+        </v-dialog>
+
         <v-row dense class="mb-2">
             <v-col md="10" offset-md="1">
                 <v-card outlined color="bgTwo">
@@ -32,11 +36,11 @@
                             <v-col cols="12" md="6" :style="$vuetify.breakpoint.mdAndUp ? { textAlign: 'right' } : {}">
                                 <v-icon>{{ mdiThumbUp }}</v-icon>
                                 <b class="ml-2">{{ $store.getters['i18n/fmtNumber'](video.likes) }}</b>
-                                <v-btn icon class="ml-2" link :href="'https://youtu.be/' + videoId"
-                                       @click.prevent="onYTClick" target="_blank">
-                                    <v-icon large>
-                                        {{ mdiYoutube }}
+                                <v-btn outlined class="ml-2" @click.stop="onShareClick" target="_blank">
+                                    <v-icon class="mr-1">
+                                        {{ mdiShareVariant }}
                                     </v-icon>
+                                    {{ $t('video_sharing_panel.share') }}
                                 </v-btn>
                                 <v-btn class="ml-2" link :href="'https://odysee.com/' + video.lbryId"
                                        v-if="video.lbryId" target="_blank" outlined>
@@ -45,7 +49,7 @@
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on, attrs }">
                                         <v-btn
-                                            class="ml-2" @click="downloadAccess"
+                                            class="ml-2 mt-2 mt-md-0" @click="downloadAccess"
                                             outlined
                                             v-bind="attrs" v-on="on"
                                         >
@@ -113,24 +117,28 @@
 
 <script>
 import { debounce } from 'lodash-es'
-import { mdiThumbUp, mdiYoutube } from '@mdi/js'
+import { mdiThumbUp, mdiShareVariant } from '@mdi/js'
 
+import { addWatchedVideo, updateWatchedVideoProgress, findLastWatch } from '@/store/watched-videos-db'
 import { LibPiped } from '@/tools/libpiped'
 
 import Player from '@/components/Player.vue'
-import VideoItem from '@/components/VideoItem.vue'
 import NGErrorHandler from '@/components/NGErrorHandler'
-import VideoComment from '@/components/VideoComment'
-import { addWatchedVideo, updateWatchedVideoProgress, findLastWatch } from '@/store/watched-videos-db'
-import SubscriptionButton from '@/components/SubscriptionButton'
 import ExpandableDate from '@/components/ExpandableDate'
+
+import SubscriptionButton from '@/components/SubscriptionButton'
+import VideoItem from '@/components/VideoItem.vue'
+
+import VideoComment from '@/components/VideoComment'
 import VideoChapters from '@/components/VideoChapters'
+import VideoSharingPanel from '@/components/VideoSharingPanel'
 
 export default {
 	name: 'WatchVideo',
 	data () {
 		return {
 			loaded: false,
+			sharingPanelOpen: false,
 			video: {
 				title: 'Loading ...'
 			},
@@ -143,9 +151,10 @@ export default {
 
 			dbID: null,
 			lastWatch: null,
+			currentTime: null,
 
 			mdiThumbUp,
-			mdiYoutube
+			mdiShareVariant
 		}
 	},
 	metaInfo () {
@@ -217,15 +226,10 @@ export default {
 			}
 		},
 
-		onYTClick () {
+		onShareClick () {
 			const time = this.$refs.player.getCurrentTime()
-
-			const url = new URL('https://youtube.com/watch')
-			url.searchParams.set('v', this.videoId)
-			if (Number.isFinite(time)) {
-				url.searchParams.set('t', time.toFixed(0))
-			}
-			window.location.href = url.href
+			this.currentTime = time
+			this.sharingPanelOpen = true
 		},
 
 		async fetchVideo () {
@@ -374,6 +378,7 @@ export default {
 	},
 	components: {
 		VideoChapters,
+		VideoSharingPanel,
 		ExpandableDate,
 		SubscriptionButton,
 		VideoComment,
diff --git a/src/translations/en.json b/src/translations/en.json
index bb0689f..5de6fdb 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -19,6 +19,13 @@
         "lastWatchedTill": "Last watched till {t}",
         "watchedAgo": "Watched {t} till {p}"
     },
+    "video_sharing_panel": {
+        "share": "Share",
+        "with_timestamps": "With Timestamps",
+        "without_timestamps": "Without Timestamps",
+        "via_pm": "Via Piped Material",
+        "via_yt": "Via YouTube"
+    },
     "actions": {
         "logInSignUp": "Log In/Sign Up",
         "logOut": "Log Out",