mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-18 01:05:13 +00:00
Merge branch 'Frontesque:main' into main
This commit is contained in:
Nikita Krupin
GitHub
commit
b30824acc4
7 changed files with 309 additions and 145 deletions
130
NUXT/components/Player/VTPlayerV1.vue
Normal file
130
NUXT/components/Player/VTPlayerV1.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content">
|
||||||
|
<v-btn class="pausePlay" text @click="playing = !playing">
|
||||||
|
<v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<div class="seekBar">
|
||||||
|
<v-slider
|
||||||
|
dense
|
||||||
|
hide-details
|
||||||
|
min="0"
|
||||||
|
:max="videoEnd"
|
||||||
|
:value="currentTime"
|
||||||
|
@change="scrubTo()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<video
|
||||||
|
ref="player"
|
||||||
|
autoplay
|
||||||
|
:src="vidSrc"
|
||||||
|
width="100%"
|
||||||
|
style="max-height: 50vh"
|
||||||
|
@webkitfullscreenchange="handleFullscreenChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="(source, index) in sources" :key="index">
|
||||||
|
{{ source.qualityLabel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
sources: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//--- Basic Information ---//
|
||||||
|
playerVersion: 0.1,
|
||||||
|
vidSrc: null,
|
||||||
|
|
||||||
|
//--- Player State Information ---//
|
||||||
|
playing: true,
|
||||||
|
currentTime: 0,
|
||||||
|
videoEnd: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
playing() {
|
||||||
|
this.playing ? this.$refs.player.play() : this.$refs.player.pause();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
const src = this.sources[this.sources.length - 1].url;
|
||||||
|
this.vidSrc = src;
|
||||||
|
|
||||||
|
setInterval(this.updateTiming, 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleFullscreenChange() {
|
||||||
|
if (document.fullscreenElement === this.$refs.player) {
|
||||||
|
this.$vuetube.statusBar.hide();
|
||||||
|
this.$vuetube.navigationBar.hide();
|
||||||
|
} else {
|
||||||
|
this.$vuetube.statusBar.show();
|
||||||
|
this.$vuetube.navigationBar.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
scrubTo() {
|
||||||
|
const player = this.$refs.player;
|
||||||
|
player.currentTime = 0;
|
||||||
|
console.log(val, this.currentTime, player.currentTime);
|
||||||
|
},
|
||||||
|
|
||||||
|
updateTiming() {
|
||||||
|
const player = this.$refs.player;
|
||||||
|
if (player == undefined) return;
|
||||||
|
this.videoEnd = player.duration;
|
||||||
|
this.currentTime = player.currentTime;
|
||||||
|
console.log(player.currentTime, this.currentTime);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/*** Overlay Information ***/
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.content video {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.content:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** General Overlay Styling ***/
|
||||||
|
.pausePlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.seekBar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
122
NUXT/components/Player/index.vue
Normal file
122
NUXT/components/Player/index.vue
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content">
|
||||||
|
<v-btn class="pausePlay" text @click="playing = !playing">
|
||||||
|
<v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<scrubber class="scrubber" :duration="duration" :endDuration="endDuration" />
|
||||||
|
|
||||||
|
<video
|
||||||
|
ref="player"
|
||||||
|
autoplay
|
||||||
|
:src="vidSrc"
|
||||||
|
width="100%"
|
||||||
|
style="max-height: 50vh"
|
||||||
|
@webkitfullscreenchange="handleFullscreenChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-for="(source, index) in sources" :key="index">
|
||||||
|
{{ source.qualityLabel }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import scrubber from "./scrubber.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
scrubber,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
sources: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
//--- Basic Information ---//
|
||||||
|
playerVersion: 0.1,
|
||||||
|
vidSrc: null,
|
||||||
|
|
||||||
|
//--- Player State Information ---//
|
||||||
|
playing: true,
|
||||||
|
duration: 0,
|
||||||
|
endDuration: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
playing() {
|
||||||
|
this.playing ? this.$refs.player.play() : this.$refs.player.pause();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
const src = this.sources[this.sources.length - 1].url;
|
||||||
|
this.vidSrc = src;
|
||||||
|
|
||||||
|
setInterval(this.updateTiming, 100);
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleFullscreenChange() {
|
||||||
|
if (document.fullscreenElement === this.$refs.player) {
|
||||||
|
this.$vuetube.statusBar.hide();
|
||||||
|
this.$vuetube.navigationBar.hide();
|
||||||
|
} else {
|
||||||
|
this.$vuetube.statusBar.show();
|
||||||
|
this.$vuetube.navigationBar.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateTiming() {
|
||||||
|
const player = this.$refs.player;
|
||||||
|
if (player == undefined) return;
|
||||||
|
this.duration = player.currentTime;
|
||||||
|
this.endDuration = player.duration;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/*** Overlay Information ***/
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.content video {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.content:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** General Overlay Styling ***/
|
||||||
|
.pausePlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
height: 5em !important;
|
||||||
|
width: 5em !important;
|
||||||
|
}
|
||||||
|
.scrubber {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
44
NUXT/components/Player/scrubber.vue
Normal file
44
NUXT/components/Player/scrubber.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="scrubber">
|
||||||
|
<div id="progress" class="primary" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
endDuration: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
percentage: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const vm = this;
|
||||||
|
setInterval(function () {
|
||||||
|
vm.percentage = (vm.duration / vm.endDuration) * 100;
|
||||||
|
|
||||||
|
document.getElementById("progress").style.width = vm.percentage + "%";
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.scrubber {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
#progress {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
|
|
||||||
<v-btn @click="playing = !playing" class="pausePlay" text><v-icon size="5em" color="white">mdi-{{playing ? 'pause' : 'play' }}</v-icon></v-btn>
|
|
||||||
|
|
||||||
<div class="seekBar">
|
|
||||||
<v-slider dense hide-details min="0" :max="videoEnd" :value="currentTime" @change="scrubTo(value)" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<video
|
|
||||||
autoplay
|
|
||||||
:src="vidSrc"
|
|
||||||
width="100%"
|
|
||||||
@webkitfullscreenchange="handleFullscreenChange"
|
|
||||||
ref="player"
|
|
||||||
style="max-height: 50vh"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-for="(source, index) in sources" :key="index">
|
|
||||||
{{ source.qualityLabel }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
sources: {
|
|
||||||
type: Array,
|
|
||||||
default: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//--- Basic Information ---//
|
|
||||||
playerVersion: 0.1,
|
|
||||||
vidSrc: null,
|
|
||||||
|
|
||||||
//--- Player State Information ---//
|
|
||||||
playing: true,
|
|
||||||
currentTime: 0,
|
|
||||||
videoEnd: 0,
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
playing() {
|
|
||||||
this.playing
|
|
||||||
? this.$refs.player.play()
|
|
||||||
: this.$refs.player.pause()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleFullscreenChange() {
|
|
||||||
if (document.fullscreenElement === this.$refs.player) {
|
|
||||||
this.$vuetube.statusBar.hide();
|
|
||||||
this.$vuetube.navigationBar.hide();
|
|
||||||
} else {
|
|
||||||
this.$vuetube.statusBar.show();
|
|
||||||
this.$vuetube.navigationBar.show();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
scrubTo(val) {
|
|
||||||
const player = this.$refs.player;
|
|
||||||
player.currentTime = val;
|
|
||||||
console.log(val, this.currentTime, player.currentTime)
|
|
||||||
},
|
|
||||||
|
|
||||||
updateTiming() {
|
|
||||||
const player = this.$refs.player;
|
|
||||||
this.videoEnd = player?.duration;
|
|
||||||
this.currentTime = player?.currentTime;
|
|
||||||
console.log(player.currentTime, this.currentTime)
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
const src = this.sources[this.sources.length-1].url;
|
|
||||||
this.vidSrc = src;
|
|
||||||
|
|
||||||
setInterval(this.updateTiming, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/*** Overlay Information ***/
|
|
||||||
.content {
|
|
||||||
position: relative;
|
|
||||||
width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.content video {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.content:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*** General Overlay Styling ***/
|
|
||||||
.pausePlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
.seekBar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
|
<div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
|
||||||
<div>Model: {{ deviceInfo.model }}</div>
|
<div>Model: {{ deviceInfo.model }}</div>
|
||||||
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
|
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
|
||||||
<div>Virtual Device: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
|
<div>Emulator: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
|
||||||
</center>
|
</center>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="background">
|
<div class="background">
|
||||||
|
|
||||||
<!-- Stock Player -->
|
<!-- Stock Player -->
|
||||||
<videoPlayer :vidSrc="vidSrc" />
|
<videoPlayer :vid-src="vidSrc" />
|
||||||
|
|
||||||
<!-- VueTube Player V1 -->
|
<!-- VueTube Player V1 -->
|
||||||
<!-- <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />-->
|
<!-- <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />-->
|
||||||
|
|
@ -91,18 +91,11 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
.vertical-button span.v-btn__content {
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { Share } from "@capacitor/share";
|
import { Share } from "@capacitor/share";
|
||||||
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
|
||||||
import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
||||||
import SlimVideoDescriptionRenderer from '../components/UtilRenderers/slimVideoDescriptionRenderer.vue';
|
import SlimVideoDescriptionRenderer from '~/components/UtilRenderers/slimVideoDescriptionRenderer.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
|
components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
|
||||||
|
|
@ -217,3 +210,10 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.vertical-button span.v-btn__content {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="accent">
|
<div class="accent">
|
||||||
|
|
||||||
<VTPlayerV1 :sources="sources" v-if="sources.length > 0" />
|
<player :sources="sources" v-if="sources.length > 0" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import player from "~/components/Player/index.vue"
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue