sponsorblock.vue

NUXT/components/Player/index.vue

@@ -162,6 +162,7 @@
       :controls="controls"
       @seeking="seeking = !seeking"
     />
+    <sponsorblock v-if="$refs.player" :video="$refs.player" />
   </div>
 </template>
 
@@ -176,8 +177,10 @@ import captions from "~/components/Player/captions.vue";
 import playpause from "~/components/Player/playpause.vue";
 import watchtime from "~/components/Player/watchtime.vue";
 import fullscreen from "~/components/Player/fullscreen.vue";
+import sponsorblock from "~/components/Player/sponsorblock.vue";
 export default {
   components: {
+    sponsorblock,
     fullscreen,
     watchtime,
     playpause,
@@ -213,21 +216,6 @@ export default {
     this.vidSrc = this.sources[this.sources.length - 1].url;
     // TODO: detect orientation change and enter fullscreen
     // TODO: detect video loading state and send this.loading to play button :loading = loading
-
-    
-    this.$youtube.getSponsorBlock(this.$route.query.v, (data) => {
-      sponsorBlock = data.segment;
-    });
-
-    this.$refs.player.ontimeupdate = () => {
-      let vidTime = this.$refs.player.currentTime;
-      for (let i = 0; i < sponsorBlock.length; i++) {
-        if (vidTime > sponsorBlock[i][0] && vidTime < sponsorBlock[0][i]) {
-          this.$refs.player.currentTime = sponsorBlock[i][0];
-          break;
-        }
-      }
-    }
   },
   beforeDestroy() {
     if (this.isFullscreen) this.exitFullscreen();

NUXT/components/Player/sponsorblock.vue

@@ -0,0 +1,43 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+export default {
+  props: {
+    video: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    let sponsorBlock = [];
+    this.$youtube.getSponsorBlock(this.$route.query.v, (data) => {
+      sponsorBlock = data.segment;
+    });
+
+    this.$refs.player.addEventListener("loadeddata", (e) => {
+      console.log("%c loadeddata", "color: #00ff00");
+
+      if (this.$refs.player.readyState >= 3) {
+        this.$refs.player.ontimeupdate = () => {
+          console.log("%c notinsegment", "color: #00ff00");
+
+          let vidTime = this.$refs.player.currentTime;
+
+          for (let i = 0; i < sponsorBlock.length; i++) {
+            console.log("%c loopin", "color: #00ffff");
+
+            if (vidTime > sponsorBlock[i][0] && vidTime < sponsorBlock[0][i]) {
+              console.log("%c insegment", "color: #ff0000");
+
+              this.$refs.player.currentTime = sponsorBlock[i][0];
+              break;
+            }
+          }
+        };
+      }
+    });
+  },
+};
+</script>

NUXT/plugins/vuetube.js

@@ -149,7 +149,7 @@ const module = {
     // join the array into a string with : as a separator
     const returntext = levels.join(":");
 
-    console.log("Human Time:", returntext);
+    // console.log("Human Time:", returntext);
     return returntext;
   },
   //---   End Convert Time To Human Readable String   ---//

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 '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