correct poster thumbnail, fullscreen gestures, skip to next button

2024-12-31 03:51:22 +00:00 · 2022-06-21 19:20:05 -04:00 · 2022-06-21 19:20:05 -04:00 · b32da4c050
commit b32da4c050
parent d9966621d8
7 changed files with 191 additions and 68 deletions
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@ -3,12 +3,27 @@
  <div
    ref="vidcontainer"
    v-touch="{
-      up: () => (contain = false),
-      down: () => (contain = true),
+      up: () => {
+        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"
-      @click="controlsHandler()"
+      :poster="$youtube.getThumbnail($route.query.v, 'max', [])"
      @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: {
-      type: Object,
-      required: true,
-    },
-    video: {
-      type: Object,
-      required: true,
+    recommends: {
+      type: Array,
    },
  },
  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;

--- a/NUXT/pages/index.vue
+++ b/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) =>
-      // Set timeout is required for $vuetify.theme... dont ask me why -Front
-      setTimeout(() => {
-        this.$vuetify.theme.dark =
-          JSON.parse(localStorage.getItem("darkTheme")) === true;
-        if (localStorage.getItem("primaryDark") != null)
-          this.$vuetify.theme.themes.dark.primary =
-            localStorage.getItem("primaryDark");
-        if (localStorage.getItem("primaryLight") != null)
-          this.$vuetify.theme.themes.light.primary =
-            localStorage.getItem("primaryLight");
-        if (localStorage.getItem("backgroundDark") != null)
-          this.$vuetify.theme.themes.dark.background =
-            localStorage.getItem("backgroundDark");
-        if (localStorage.getItem("backgroundLight") != null)
-          this.$vuetify.theme.themes.light.background =
-            localStorage.getItem("backgroundLight");
+    theming() {
+      return new Promise((resolve) =>
+        // Set timeout is required for $vuetify.theme... dont ask me why -Front
+        setTimeout(() => {
+          this.$vuetify.theme.dark =
+            JSON.parse(localStorage.getItem("darkTheme")) === true;
+          if (localStorage.getItem("primaryDark") != null)
+            this.$vuetify.theme.themes.dark.primary =
+              localStorage.getItem("primaryDark");
+          if (localStorage.getItem("primaryLight") != null)
+            this.$vuetify.theme.themes.light.primary =
+              localStorage.getItem("primaryLight");
+          if (localStorage.getItem("backgroundDark") != null)
+            this.$vuetify.theme.themes.dark.background =
+              localStorage.getItem("backgroundDark");
+          if (localStorage.getItem("backgroundLight") != null)
+            this.$vuetify.theme.themes.light.background =
+              localStorage.getItem("backgroundLight");

-        this.$vuetube.navigationBar.setTheme(
-          this.$vuetify.theme.currentTheme.background,
-          !this.$vuetify.theme.dark
-        );
-        this.$vuetube.statusBar.setTheme(
-          this.$vuetify.theme.currentTheme.background,
-          this.$vuetify.theme.dark
-        );
+          this.$vuetube.navigationBar.setTheme(
+            this.$vuetify.theme.currentTheme.background,
+            !this.$vuetify.theme.dark
+          );
+          this.$vuetube.statusBar.setTheme(
+            this.$vuetify.theme.currentTheme.background,
+            this.$vuetify.theme.dark
+          );

-        // this.$vuetube.navigationBar.setTransparent();
-        // this.$vuetube.statusBar.setTransparent();
-        resolve();
-      }, 0)
-    )}
-  }
-}
+          // this.$vuetube.navigationBar.setTransparent();
+          // this.$vuetube.statusBar.setTransparent();
+          resolve();
+        }, 0)
+      );
+    },
+  },
+};
 </script>

 <style>
--- a/NUXT/pages/watch.vue
+++ b/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();
--- a/android/app/src/main/res/xml/config.xml
+++ b/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>
--- a/android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java
+++ b/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;
+        
+        
+    }
+}
--- a/ios/App/App/config.xml
+++ b/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>
--- a/ios/App/Podfile
+++ b/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 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
-  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
-  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
-  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
-  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
-  pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
-  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
-  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
-  pod 'CapacitorToast', :path => '..\..\node_modules\@capacitor\toast'
-  pod 'HugotomaziCapacitorNavigationBar', :path => '..\..\node_modules\@hugotomazi\capacitor-navigation-bar'
+  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CapacitorToast', :path => '../../node_modules/@capacitor/toast'
+  pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end

 target 'App' do