fullscreen orientation fix

NUXT/components/Player/fullscreen.vue

@@ -11,7 +11,12 @@
 
 <script>
 export default {
-  props: ["fullscreen"],
+  props: {
+    fullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   emits: ["fullscreen"],
 };
 </script>

NUXT/components/Player/index.vue

@@ -26,7 +26,6 @@
           : 'filter: none; object-fit: cover'
       "
     />
-    <!-- @webkitfullscreenchange="handleFullscreenChange" -->
 
     <v-btn
       text
@@ -87,7 +86,12 @@
         @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()"
       />
     </div>
-    <seekbar v-if="$refs.player" :sources="sources" :video="$refs.player" />
+    <seekbar
+      v-if="$refs.player"
+      :fullscreen="isFullscreen"
+      :video="$refs.player"
+      :sources="sources"
+    />
   </div>
 </template>
 
@@ -130,48 +134,33 @@ export default {
   },
   methods: {
     handleFullscreenChange() {
-      console.log(this.$refs.player);
+      // close fullscreen 👇
-      console.log(document.fullscreenElement);
       if (document?.fullscreenElement === this.$refs.vidcontainer) {
-        // const cancellFullScreen =
+        const cancellFullScreen =
-        //   document.exitFullscreen ||
+          document.exitFullscreen ||
-        //   document.mozCancelFullScreen ||
+          document.mozCancelFullScreen ||
-        //   document.webkitExitFullscreen ||
+          document.webkitExitFullscreen ||
-        //   document.msExitFullscreen;
+          document.msExitFullscreen;
-        // cancellFullScreen.call(document);
+        cancellFullScreen.call(document);
-        if (document.exitFullscreen) {
+        screen.orientation.lock("portrait");
-          document.exitFullscreen();
+        screen.orientation.unlock();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitExitFullscreen) {
-          document.webkitExitFullscreen();
-        }
-        this.isFullscreen = false;
-        this.$vuetube.statusBar.show();
         this.$vuetube.navigationBar.show();
+        this.$vuetube.statusBar.show();
+        this.isFullscreen = false;
+        // open fullscreen 👇
       } else {
-        // const element = document;
+        const element = this.$refs.vidcontainer;
-        // const requestFullScreen =
+        const requestFullScreen =
-        //   element.requestFullscreen ||
+          element.requestFullscreen ||
-        //   element.webkitRequestFullScreen ||
+          element.webkitRequestFullScreen ||
-        //   element.mozRequestFullScreen ||
+          element.mozRequestFullScreen ||
-        //   element.msRequestFullScreen;
+          element.msRequestFullScreen;
-        // requestFullScreen.call(element);
+        requestFullScreen.call(element);
-        this.$refs.vidcontainer.requestFullscreen({
+        screen.orientation.lock("landscape");
-          requireOrientation: "landscape",
-        });
-        this.isFullscreen = true;
-        this.$vuetube.statusBar.hide();
         this.$vuetube.navigationBar.hide();
+        this.$vuetube.statusBar.hide();
+        this.isFullscreen = true;
       }
-      // screen.orientation
-      //   .lock("landscape")
-      //   .then(function () {
-      //     console.log("Locked");
-      //   })
-      //   .catch(function (error) {
-      //     console.log(error);
-      //   });
     },
     getPlayer() {
       return this.$refs.player;

NUXT/components/Player/loop.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn fab text style="position: absolute; top: 0; right: 7rem">
+  <v-btn fab text disabled style="position: absolute; top: 0; right: 7rem">
     <v-icon>mdi-sync</v-icon>
   </v-btn>
 </template>

NUXT/components/Player/quality.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 3.5rem">
+  <v-btn
+    fab
+    text
+    disabled
+    style="position: absolute; bottom: 0.25rem; right: 3.5rem"
+  >
     HD
   </v-btn>
 </template>

NUXT/components/Player/seekbar.vue

@@ -23,13 +23,8 @@
       hide-details
       height="2"
       dense
-      style="
+      style="position: absolute; z-index: 69420; width: 100%; left: 0"
-        position: absolute;
+      :style="fullscreen ? 'bottom: 5rem;' : 'bottom: 0;'"
-        z-index: 69420;
-        width: 100%;
-        bottom: 0;
-        left: 0;
-      "
       :thumb-size="0"
       :max="duration"
       :value="progress"
@@ -63,7 +58,7 @@
 
 <script>
 export default {
-  props: ["sources", "video"],
+  props: ["sources", "video", "fullscreen"],
 
   data() {
     return {

NUXT/components/Player/speed.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-btn fab text style="position: absolute; bottom: 0.25rem; right: 7rem">
+  <v-btn
+    fab
+    text
+    disabled
+    style="position: absolute; bottom: 0.25rem; right: 7rem"
+  >
     1X
   </v-btn>
 </template>

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

@@ -20,6 +20,7 @@ def capacitor_pods
   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

package.json

@@ -14,6 +14,8 @@
     "@capacitor/status-bar": "^1.0.8",
     "@capacitor/toast": "^1.0.8",
     "@hugotomazi/capacitor-navigation-bar": "^1.1.1",
+    "cordova-plugin-screen-orientation": "^3.0.2",
+    "es6-promise-plugin": "^4.2.2",
     "iconv-lite": "^0.6.3"
   }
 }