etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fullscreen orientation fix

This commit is contained in:
Nikita Krupin 2022-05-28 18:04:35 -04:00
parent f1c6ba4d44
commit 769a6dc632
11 changed files with 159 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
NUXT/components/Player/fullscreen.vue
View File

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

67
NUXT/components/Player/index.vue
View File

@ -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);
console.log(document.fullscreenElement);
// close fullscreen 👇
if (document?.fullscreenElement === this.$refs.vidcontainer) {
// const cancellFullScreen =
// document.exitFullscreen ||
// document.mozCancelFullScreen ||
// document.webkitExitFullscreen ||
// document.msExitFullscreen;
// cancellFullScreen.call(document);
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
this.isFullscreen = false;
this.$vuetube.statusBar.show();
const cancellFullScreen =
document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
cancellFullScreen.call(document);
screen.orientation.lock("portrait");
screen.orientation.unlock();
this.$vuetube.navigationBar.show();
this.$vuetube.statusBar.show();
this.isFullscreen = false;
// open fullscreen 👇
} else {
// const element = document;
// const requestFullScreen =
// element.requestFullscreen ||
// element.webkitRequestFullScreen ||
// element.mozRequestFullScreen ||
// element.msRequestFullScreen;
// requestFullScreen.call(element);
this.$refs.vidcontainer.requestFullscreen({
requireOrientation: "landscape",
});
this.isFullscreen = true;
this.$vuetube.statusBar.hide();
const element = this.$refs.vidcontainer;
const requestFullScreen =
element.requestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
requestFullScreen.call(element);
screen.orientation.lock("landscape");
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;

2
NUXT/components/Player/loop.vue
View File

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

7
NUXT/components/Player/quality.vue
View File

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

11
NUXT/components/Player/seekbar.vue
View File

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

7
NUXT/components/Player/speed.vue
View File

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

4
android/app/src/main/res/xml/config.xml
View File

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

98
android/capacitor-cordova-android-plugins/src/main/java/cordova/plugins/screenorientation/CDVOrientation.java Normal file
View File

@ -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;
}
}

4
ios/App/App/config.xml
View File

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

1
ios/App/Podfile
View File

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

2
package.json
View File

@ -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"
}
}