correct poster thumbnail, fullscreen gestures, skip to next button

NUXT/components/Player/index.vue

@@ -3,12 +3,27 @@
   <div
     ref="vidcontainer"
     v-touch="{
-      up: () => (contain = false),
+      up: () => {
-      down: () => (contain = true),
+        if (!isFullscreen) fullscreenHandler(true);
+      },
+      down: () => {
+        if (isFullscreen) fullscreenHandler(true);
+      },
+      right: () => (contain = false),
+      left: () => (contain = true),
     }"
-    class="d-flex flex-column"
+    class="d-flex flex-column black"
     style="position: relative"
-    :style="{ height: isFullscreen ? '100vh' : 'auto' }"
+    :style="{
+      height: isFullscreen ? '100vh' : 'auto',
+      maxHeight: isFullscreen ? '' : '50vh',
+      borderRadius:
+        $store.state.tweaks.roundWatch && !isFullscreen
+          ? `${$store.state.tweaks.roundTweak / 3}rem ${
+              $store.state.tweaks.roundTweak / 3
+            }rem 0rem 0rem !important`
+          : '0',
+    }"
   >
     <video
       ref="player"
@@ -20,16 +35,18 @@
       :class="controls || seeking || skipping ? 'dim' : ''"
       :style="{
         objectFit: contain ? 'contain' : 'cover',
+        maxHeight: isFullscreen ? '' : '50vh',
         borderRadius:
           $store.state.tweaks.roundWatch && !isFullscreen
-            ? `${$store.state.tweaks.roundTweak / 3}rem ${$store.state.tweaks.roundTweak / 3}rem 0rem 0rem !important`
+            ? `${$store.state.tweaks.roundTweak / 3}rem ${
+                $store.state.tweaks.roundTweak / 3
+              }rem 0rem 0rem !important`
             : '0',
       }"
-      :poster="thumbnails[thumbnails.length - 1].url"
+      :poster="$youtube.getThumbnail($route.query.v, 'max', [])"
-      @click="controlsHandler()"
       @loadedmetadata="checkDimensions()"
+      @click="controlsHandler()"
     />
-    <!-- // NOTE: replace poster URL with "none" -->
 
     <!-- // TODO: merge the bottom 2 into 1 reusable component -->
     <v-btn
@@ -131,7 +148,7 @@
           top: 50%;
         "
       >
-        <v-btn fab text color="white" class="px-8" disabled>
+        <v-btn fab text color="white" class="mx-12" disabled>
           <v-icon size="2rem" color="white">mdi-skip-previous</v-icon>
         </v-btn>
         <playpause
@@ -140,7 +157,7 @@
           @play="$refs.player.play()"
           @pause="$refs.player.pause()"
         />
-        <v-btn fab text color="white" class="px-8" disabled>
+        <v-btn fab text color="white" class="mx-12" @click="$router.push(`/watch?v=${recommends.contents[0].videoWithContextRenderer.videoId}`)">
           <v-icon size="2rem" color="white">mdi-skip-next</v-icon>
         </v-btn>
       </div>
@@ -280,17 +297,16 @@ export default {
     loop,
   },
   props: {
+    video: {
+      type: Object,
+      required: true,
+    },
     sources: {
       type: Array,
       required: true,
     },
-    thumbnails: {
+    recommends: {
-      type: Object,
+      type: Array,
-      required: true,
-    },
-    video: {
-      type: Object,
-      required: true,
     },
   },
   data() {
@@ -313,6 +329,7 @@ export default {
   },
   mounted() {
     console.log("sources", this.sources);
+    console.log("recommends", this.recommends);
     this.vidSrc = this.sources[this.sources.length - 1].url;
     let vid = this.$refs.player;
 

NUXT/pages/index.vue

@@ -29,7 +29,8 @@ export default {
     await this.theming();
 
     //---   Update Screen   ---//
-    if (localStorage.getItem("lastRunVersion") != process.env.appVersion ) return this.$router.replace('/activities/update');
+    if (localStorage.getItem("lastRunVersion") != process.env.appVersion)
+      return this.$router.replace("/activities/update");
 
     //---   Start Innertube Connection   ---//
     await this.$youtube.getAPI();
@@ -37,47 +38,48 @@ export default {
     this.progressMsg = this.$lang("index").launching;
 
     if (localStorage.getItem("firstTimeSetupComplete")) {
-      this.$router.replace('/'+ (localStorage.getItem("startPage") || "home") ); // Normal Load
+      this.$router.replace("/" + (localStorage.getItem("startPage") || "home")); // Normal Load
     } else {
-      this.$router.replace('/activities/install'); // Load Into Setup
+      this.$router.replace("/activities/install"); // Load Into Setup
     }
-    
   },
   methods: {
-    theming() { return new Promise((resolve) =>
+    theming() {
-      // Set timeout is required for $vuetify.theme... dont ask me why -Front
+      return new Promise((resolve) =>
-      setTimeout(() => {
+        // Set timeout is required for $vuetify.theme... dont ask me why -Front
-        this.$vuetify.theme.dark =
+        setTimeout(() => {
-          JSON.parse(localStorage.getItem("darkTheme")) === true;
+          this.$vuetify.theme.dark =
-        if (localStorage.getItem("primaryDark") != null)
+            JSON.parse(localStorage.getItem("darkTheme")) === true;
-          this.$vuetify.theme.themes.dark.primary =
+          if (localStorage.getItem("primaryDark") != null)
-            localStorage.getItem("primaryDark");
+            this.$vuetify.theme.themes.dark.primary =
-        if (localStorage.getItem("primaryLight") != null)
+              localStorage.getItem("primaryDark");
-          this.$vuetify.theme.themes.light.primary =
+          if (localStorage.getItem("primaryLight") != null)
-            localStorage.getItem("primaryLight");
+            this.$vuetify.theme.themes.light.primary =
-        if (localStorage.getItem("backgroundDark") != null)
+              localStorage.getItem("primaryLight");
-          this.$vuetify.theme.themes.dark.background =
+          if (localStorage.getItem("backgroundDark") != null)
-            localStorage.getItem("backgroundDark");
+            this.$vuetify.theme.themes.dark.background =
-        if (localStorage.getItem("backgroundLight") != null)
+              localStorage.getItem("backgroundDark");
-          this.$vuetify.theme.themes.light.background =
+          if (localStorage.getItem("backgroundLight") != null)
-            localStorage.getItem("backgroundLight");
+            this.$vuetify.theme.themes.light.background =
+              localStorage.getItem("backgroundLight");
 
-        this.$vuetube.navigationBar.setTheme(
+          this.$vuetube.navigationBar.setTheme(
-          this.$vuetify.theme.currentTheme.background,
+            this.$vuetify.theme.currentTheme.background,
-          !this.$vuetify.theme.dark
+            !this.$vuetify.theme.dark
-        );
+          );
-        this.$vuetube.statusBar.setTheme(
+          this.$vuetube.statusBar.setTheme(
-          this.$vuetify.theme.currentTheme.background,
+            this.$vuetify.theme.currentTheme.background,
-          this.$vuetify.theme.dark
+            this.$vuetify.theme.dark
-        );
+          );
 
-        // this.$vuetube.navigationBar.setTransparent();
+          // this.$vuetube.navigationBar.setTransparent();
-        // this.$vuetube.statusBar.setTransparent();
+          // this.$vuetube.statusBar.setTransparent();
-        resolve();
+          resolve();
-      }, 0)
+        }, 0)
-    )}
+      );
-  }
+    },
-}
+  },
+};
 </script>
 
 <style>

NUXT/pages/watch.vue

@@ -8,7 +8,7 @@
         ref="player"
         :video="video"
         :sources="sources"
-        :thumbnails="thumbnails"
+        :recommends="recommends"
       />
     </div>
 
@@ -331,9 +331,6 @@ export default {
         console.log("Video info data", result);
         this.video = result;
 
-        //---   Set Thumbnails   ---//
-        this.thumbnails = result.metadata.contents[2].slimOwnerRenderer.thumbnail.thumbnails;
-
         //---   Content Stuff   ---//
         this.likes = result.metadata.likes.toLocaleString();
         this.interactions[0].value = result.metadata.likes.toLocaleString();

android/app/src/main/res/xml/config.xml

@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="android-package" value="cordova.plugins.screenorientation.CDVOrientation"/>
+  </feature>
+
   
 </widget>

android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java

@@ -0,0 +1,98 @@
+/*
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ */
+
+package cordova.plugins.screenorientation;
+
+import org.apache.cordova.CallbackContext;
+import org.apache.cordova.CordovaPlugin;
+
+import org.json.JSONArray;
+import org.json.JSONException;
+
+import android.app.Activity;
+import android.content.pm.ActivityInfo;
+import android.util.Log;
+
+public class CDVOrientation extends CordovaPlugin {
+    
+    private static final String TAG = "YoikScreenOrientation"; 
+    
+    /**
+     * Screen Orientation Constants
+     */
+    
+    private static final String ANY = "any";
+    private static final String PORTRAIT_PRIMARY = "portrait-primary";
+    private static final String PORTRAIT_SECONDARY = "portrait-secondary";
+    private static final String LANDSCAPE_PRIMARY = "landscape-primary";
+    private static final String LANDSCAPE_SECONDARY = "landscape-secondary";
+    private static final String PORTRAIT = "portrait";
+    private static final String LANDSCAPE = "landscape";
+    
+    @Override
+    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
+        
+        Log.d(TAG, "execute action: " + action);
+        
+        // Route the Action
+        if (action.equals("screenOrientation")) {
+            return routeScreenOrientation(args, callbackContext);
+        }
+        
+        // Action not found
+        callbackContext.error("action not recognised");
+        return false;
+    }
+    
+    private boolean routeScreenOrientation(JSONArray args, CallbackContext callbackContext) {
+        
+        String action = args.optString(0);
+        
+        
+        
+        String orientation = args.optString(1);
+        
+        Log.d(TAG, "Requested ScreenOrientation: " + orientation);
+        
+        Activity activity = cordova.getActivity();
+        
+        if (orientation.equals(ANY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+        } else if (orientation.equals(LANDSCAPE_PRIMARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT_PRIMARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
+        } else if (orientation.equals(LANDSCAPE)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT);
+        } else if (orientation.equals(LANDSCAPE_SECONDARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE);
+        } else if (orientation.equals(PORTRAIT_SECONDARY)) {
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT);
+        }
+        
+        callbackContext.success();
+        return true;
+        
+        
+    }
+}

ios/App/App/config.xml

@@ -2,5 +2,9 @@
 <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <access origin="*" />
   
+  <feature name="CDVOrientation">
+    <param name="ios-package" value="CDVOrientation"/>
+  </feature>
+
   
 </widget>

ios/App/Podfile

@@ -9,17 +9,18 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
+  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
-  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
-  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
-  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
-  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
-  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
-  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
-  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'CapacitorToast', :path => '..\..\node_modules\@capacitor\toast'
+  pod 'CapacitorToast', :path => '../../node_modules/@capacitor/toast'
-  pod 'HugotomaziCapacitorNavigationBar', :path => '..\..\node_modules\@hugotomazi\capacitor-navigation-bar'
+  pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 
 target 'App' do