add video share sheet to watch page

NUXT/pages/watch.vue

@@ -22,7 +22,7 @@
               style="padding: 0; margin: 0"
               elevation="0"
               :disabled="item.disabled"
-              @click="item.action"
+              @click="callMethodByName(item.actionName)"
             >
               <v-icon v-text="item.icon" />
               <div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
@@ -79,6 +79,8 @@
 </style>
 
 <script>
+import { Share } from "@capacitor/share";
+
 export default {
   data() {
     return {
@@ -86,26 +88,28 @@ export default {
         {
           name: "Likes",
           icon: "mdi-thumb-up-outline",
-          action: null,
+          // action: null,
           value: this.likes,
           disabled: true,
         },
         {
           name: "Dislikes",
           icon: "mdi-thumb-down-outline",
-          action: this.dislike(),
+          // action: this.dislike(),
+          actionName: "dislike",
           value: this.dislikes,
           disabled: true,
         },
         {
           name: "Share",
           icon: "mdi-share-outline",
-          action: this.share(),
-          disabled: true,
+          // action: this.share(),
+          actionName: "share",
+          disabled: false,
         },
       ],
       showMore: false,
-      share: false,
+      // share: false,
       title: null,
       uploaded: null,
       vidSrc: null,
@@ -144,9 +148,20 @@ export default {
     });
   },
   methods: {
+    callMethodByName(name) {
+      // Helper function needed because of issues when directly calling method
+      // using item.action in the v-for loop
+      this[name]();
+    },
     dislike() {},
-    share() {
-      this.share = !this.share;
+    async share() {
+      // this.share = !this.share;
+      await Share.share({
+        title: this.title,
+        text: this.title,
+        url: 'https://youtu.be/' + this.$route.query.v,
+        dialogTitle: 'Share video',
+      });
     },
   },
 };

android/app/capacitor.build.gradle

@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-device')
+    implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
 

android/app/src/main/assets/capacitor.plugins.json

@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/device",
 		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	},
+	{
+		"pkg": "@capacitor/share",
+		"classpath": "com.capacitorjs.plugins.share.SharePlugin"
+	},
 	{
 		"pkg": "@capacitor/splash-screen",
 		"classpath": "com.capacitorjs.plugins.splashscreen.SplashScreenPlugin"

android/capacitor.settings.gradle

@@ -14,6 +14,9 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-device'
 project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
 
+include ':capacitor-share'
+project(':capacitor-share').projectDir = new File('../node_modules/@capacitor/share/android')
+
 include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
 

ios/App/Podfile

@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
   pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end

package.json

@@ -7,6 +7,7 @@
     "@capacitor/cli": "^3.4.0",
     "@capacitor/core": "^3.4.0",
     "@capacitor/device": "^1.1.2",
+    "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "^1.0.8"
   }