From fb6096045ff5c1893bbd7043fb2354533cd44643 Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Tue, 11 Apr 2023 02:10:05 +0530
Subject: [PATCH] System sharing panel

---
 src/components/Video/VideoSharingPanel.vue | 46 ++++++++++++++++++++--
 src/routes/WatchVideo.vue                  |  2 +-
 src/translations/en.json                   |  3 +-
 vue.config.js                              |  6 +++
 4 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/src/components/Video/VideoSharingPanel.vue b/src/components/Video/VideoSharingPanel.vue
index acb47c5..807475f 100644
--- a/src/components/Video/VideoSharingPanel.vue
+++ b/src/components/Video/VideoSharingPanel.vue
@@ -7,17 +7,27 @@
                 <v-col cols="4">
                     {{ $t('video_sharing_panel.via_pm')}}
                 </v-col>
-                <v-col cols="8">
+                <v-col :cols="columnsForTxt">
                     <v-text-field readonly dense :value="PMURL.withTimestamps" />
                 </v-col>
+                <v-col cols="2" v-if="isShareable" @click="systemShare(PMURL.withTimestamps)">
+                    <v-btn icon class="ml-2 mb-2" :alt="$t('video_sharing_panel.share_system')" >
+                        <v-icon>{{ mdiShareVariantOutline }}</v-icon>
+                    </v-btn>
+                </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-col :cols="columnsForTxt">
                     <v-text-field readonly dense :value="youtubeURL.withTimestamps" />
                 </v-col>
+                <v-col cols="2" v-if="isShareable" @click="systemShare(youtubeURL.withTimestamps)">
+                    <v-btn icon class="ml-2 mb-2" :alt="$t('video_sharing_panel.share_system')" >
+                        <v-icon>{{ mdiShareVariantOutline }}</v-icon>
+                    </v-btn>
+                </v-col>
             </v-row>
             <v-divider class="my-1" />
             <p class="text-subtitle-1">{{ $t('video_sharing_panel.without_timestamps') }}</p>
@@ -25,27 +35,50 @@
                 <v-col cols="4">
                     {{ $t('video_sharing_panel.via_pm')}}
                 </v-col>
-                <v-col cols="8">
+                <v-col :cols="columnsForTxt">
                     <v-text-field readonly dense :value="PMURL.base" />
                 </v-col>
+                <v-col cols="2" v-if="isShareable" @click="systemShare(PMURL.base)">
+                    <v-btn icon class="ml-2 mb-2" :alt="$t('video_sharing_panel.share_system')" >
+                        <v-icon>{{ mdiShareVariantOutline }}</v-icon>
+                    </v-btn>
+                </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-col :cols="columnsForTxt">
                     <v-text-field readonly dense :value="youtubeURL.base" />
                 </v-col>
+                <v-col cols="2" v-if="isShareable" @click="systemShare(youtubeURL.base)">
+                    <v-btn icon class="ml-2 mb-2" :alt="$t('video_sharing_panel.share_system')" >
+                        <v-icon>{{ mdiShareVariantOutline }}</v-icon>
+                    </v-btn>
+                </v-col>
             </v-row>
         </v-card-text>
     </v-card>
 </template>
 
 <script>
+import { mdiShareVariantOutline } from '@mdi/js'
+
 export default {
 	name: 'VideoSharingPanel',
 	props: ['currentTime', 'videoId'],
+	data: () => ({
+		mdiShareVariantOutline
+	}),
 	computed: {
+		isShareable () {
+			return navigator.canShare ? navigator.canShare({ url: this.youtubeURL }) : false
+		},
+
+		columnsForTxt () {
+			return this.isShareable ? 6 : 8
+		},
+
 		currentTimeR () {
 			return Math.round(this.currentTime)
 		},
@@ -73,6 +106,11 @@ export default {
 				withTimestamps: base.href
 			}
 		}
+	},
+	methods: {
+		systemShare (url) {
+			return navigator.share({ url })
+		}
 	}
 }
 </script>
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 270686d..b08993e 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -13,7 +13,7 @@
             @timeupdate="onTimeUpdate"
         />
 
-        <v-dialog max-width="720" v-model="sharingPanelOpen">
+        <v-dialog max-width="960" v-model="sharingPanelOpen">
             <VideoSharingPanel @input="sharingPanelOpen = $event" :current-time="currentTime" :video-id="videoId" />
         </v-dialog>
         <VideoPlaylistOperationsA
diff --git a/src/translations/en.json b/src/translations/en.json
index 04309fd..d292c42 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -63,7 +63,8 @@
         "with_timestamps": "With Timestamps",
         "without_timestamps": "Without Timestamps",
         "via_pm": "Via Piped Material",
-        "via_yt": "Via YouTube"
+        "via_yt": "Via YouTube",
+        "share_system": "Share via system dialog"
     },
     "auth_dialog": {
         "title": "Authentication",
diff --git a/vue.config.js b/vue.config.js
index 2a680b5..959a9e0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -38,6 +38,12 @@ module.exports = {
 			]
 		}
 	},
+	devServer: {
+		allowedHosts: 'all',
+		client: {
+			webSocketURL: 'auto://0.0.0.0:0/ws'
+		}
+	},
 
 	productionSourceMap: false,
 	lintOnSave: false