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

correct poster thumbnail, fullscreen gestures, skip to next button

This commit is contained in:
Nikita Krupin 2022-06-21 19:20:05 -04:00
parent d9966621d8
commit b32da4c050
7 changed files with 191 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

74
NUXT/pages/index.vue
View File

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

5
NUXT/pages/watch.vue
View File

@ -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();

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>

23
ios/App/Podfile
View File

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