mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-25 20:55:17 +00:00
alpha player > beta player😎
This commit is contained in:
Nikita Krupin
parent
0784c6cf62
commit
618ca00d85
14 changed files with 394 additions and 178 deletions
|
|
@ -5,13 +5,18 @@
|
|||
class="comment-thread px-3"
|
||||
@click="$emit('showReplies', comment)"
|
||||
>
|
||||
<a
|
||||
:href="
|
||||
this.$rendererUtils.getNavigationEndpoints(
|
||||
commentRenderer.authorEndpoint
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
to="/channel"
|
||||
class="avatar-link mr-4"
|
||||
style="height: 3rem; width: 3rem"
|
||||
@click.prevent="
|
||||
$store.dispatch(
|
||||
'channel/fetchChannel',
|
||||
$rendererUtils.getNavigationEndpoints(commentRenderer.authorEndpoint)
|
||||
)
|
||||
"
|
||||
class="avatar-link pr-2"
|
||||
>
|
||||
<v-img
|
||||
class="avatar-thumbnail"
|
||||
|
|
@ -21,21 +26,25 @@
|
|||
].url
|
||||
"
|
||||
/>
|
||||
</a>
|
||||
</v-btn>
|
||||
<div class="comment-content">
|
||||
<div class="comment-content--header subtitle-2 mb-2">
|
||||
<div
|
||||
class="author-badge-name mr-1"
|
||||
class="comment-content--header background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-5' : 'text--darken-4'"
|
||||
style="font-size: 0.8rem !important"
|
||||
>
|
||||
<div
|
||||
class="author-badge-name mr-2"
|
||||
:class="
|
||||
commentRenderer.authorIsChannelOwner
|
||||
? $vuetify.theme.dark
|
||||
? 'owner background lighten-2'
|
||||
: 'owner background darken-2'
|
||||
? 'owner primary--text background lighten-2'
|
||||
: 'owner primary--text background darken-2'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
<div class="author-name--wrapper">
|
||||
<span class="font-weight-bold author-name mr-1" v-emoji>
|
||||
<span class="author-name mr-1" v-emoji>
|
||||
{{ commentRenderer.authorText.simpleText }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -50,23 +59,24 @@
|
|||
<sponsor-comment-badge-renderer :metadata="badge" :key="index" />
|
||||
</template>
|
||||
</div>
|
||||
<span
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
class="background--text comment-timestamp ml-2"
|
||||
>
|
||||
·
|
||||
<span class="comment-timestamp ml-2">
|
||||
{{ commentRenderer.publishedTimeText.runs[0].text }}
|
||||
</span>
|
||||
</div>
|
||||
<collapsable-text
|
||||
:lines="3"
|
||||
:expandText="
|
||||
:expand-text="
|
||||
commentRenderer.expandButton.buttonRenderer.text.runs[0].text
|
||||
"
|
||||
:collapseText="
|
||||
:collapse-text="
|
||||
commentRenderer.collapseButton.buttonRenderer.text.runs[0].text
|
||||
"
|
||||
>
|
||||
<yt-text-formatter :textRuns="commentRenderer.contentText.runs">
|
||||
<yt-text-formatter
|
||||
style="font-size: 0.9rem"
|
||||
:text-runs="commentRenderer.contentText.runs"
|
||||
>
|
||||
</yt-text-formatter>
|
||||
</collapsable-text>
|
||||
<div class="toolbar mt-2">
|
||||
|
|
@ -75,17 +85,17 @@
|
|||
<v-icon small>mdi-thumb-up-outline</v-icon>
|
||||
<span
|
||||
v-if="commentRenderer.voteCount"
|
||||
v-text="commentRenderer.voteCount.simpleText"
|
||||
class="like-count caption"
|
||||
v-text="commentRenderer.voteCount.simpleText"
|
||||
></span>
|
||||
<v-icon class="ml-2" small>mdi-thumb-down-outline</v-icon>
|
||||
</div>
|
||||
</v-btn-toggle>
|
||||
<div class="toolbar--item ml-2" v-if="commentRenderer.replyCount">
|
||||
<div class="toolbar--item ml-6" v-if="commentRenderer.replyCount">
|
||||
<v-icon small>mdi-comment-outline</v-icon>
|
||||
<span
|
||||
v-text="commentRenderer.replyCount"
|
||||
class="like-count caption"
|
||||
v-text="commentRenderer.replyCount"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,7 +116,6 @@
|
|||
padding: 10px 0;
|
||||
|
||||
.avatar-thumbnail {
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
|
@ -152,6 +161,7 @@
|
|||
.owner {
|
||||
border-radius: 1em;
|
||||
padding: 0 0.3em 0 0.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toolbar--button::v-deep.v-btn--active .v-btn__content {
|
||||
|
|
|
|||
|
|
@ -1,58 +1,41 @@
|
|||
<template>
|
||||
<div class="controls" @click="toggleControls()">
|
||||
<div class="controlsWrap" ref="controlsWrap">
|
||||
|
||||
<div ref="controlsWrap" class="controlsWrap">
|
||||
<div class="centerVideoControls">
|
||||
<v-btn @click="togglePlaying()" text style="height: 5em; width: 5em;">
|
||||
<v-icon size="5em" v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
|
||||
<v-btn
|
||||
text
|
||||
style="height: 5em; width: 5em"
|
||||
color="white"
|
||||
@click="togglePlaying()"
|
||||
>
|
||||
<v-icon
|
||||
ref="pausePlayIndicator"
|
||||
size="5rem"
|
||||
v-text="playing ? 'mdi-pause' : 'mdi-play'"
|
||||
/>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<div class="bottomVideoControls">
|
||||
{{ watched }} <span style="color: #999;">/ {{ $vuetube.humanTime(video.duration) }}</span>
|
||||
<div class="bottomVideoControls white--text">
|
||||
<div class="pl-4">
|
||||
{{ watched }}
|
||||
<span style="color: #999">
|
||||
/ {{ $vuetube.humanTime(video.duration) }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <v-slider
|
||||
id="slider"
|
||||
v-model="video.currentTime"
|
||||
:max="video.duration"
|
||||
style="margin-bottom: -2rem !important"
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.centerVideoControls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.bottomVideoControls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pausePlay {
|
||||
min-height: 5em;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.controlsWrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
export default {
|
||||
props: ["video"],
|
||||
|
||||
data() {
|
||||
|
|
@ -61,12 +44,14 @@
|
|||
controls: true,
|
||||
|
||||
watched: 0,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
console.log("videovideovideo");
|
||||
console.log(this.video);
|
||||
this.video.ontimeupdate = () => {
|
||||
console.log(this.video.currentTime)
|
||||
console.log(this.video.currentTime);
|
||||
this.watched = this.$vuetube.humanTime(this.video.currentTime);
|
||||
};
|
||||
},
|
||||
|
|
@ -74,22 +59,58 @@
|
|||
methods: {
|
||||
togglePlaying() {
|
||||
if (this.video.paused) {
|
||||
this.video.play()
|
||||
this.video.play();
|
||||
this.playing = true;
|
||||
} else {
|
||||
this.video.pause()
|
||||
this.video.pause();
|
||||
this.playing = false;
|
||||
};
|
||||
}
|
||||
this.toggleControls(); // Prevent Screen From Closing
|
||||
},
|
||||
|
||||
toggleControls() {
|
||||
const setControls = this.controls ? 'none' : 'block';
|
||||
const setControls = this.controls ? "none" : "block";
|
||||
this.$refs.controlsWrap.style.display = setControls;
|
||||
this.controls = !this.controls;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#slider * {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.centerVideoControls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.bottomVideoControls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pausePlay {
|
||||
min-height: 5em;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.controlsWrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
<template>
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<video
|
||||
ref="player"
|
||||
autoplay
|
||||
:src="vidSrc"
|
||||
width="100%"
|
||||
style="max-height: 50vh; display: block"
|
||||
style="max-height: 50vh; display: block; overflow: hidden !important"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak / 4}rem`
|
||||
: '0',
|
||||
}"
|
||||
@webkitfullscreenchange="handleFullscreenChange"
|
||||
/>
|
||||
|
||||
|
||||
<seekbar :video=$refs.player v-if="$refs.player" />
|
||||
<seekbar :video="$refs.player" v-if="$refs.player" />
|
||||
<controls v-if="$refs.player" :video="$refs.player" />
|
||||
|
||||
<!-- <v-slider v-model="value" step="0"></v-slider> -->
|
||||
|
|
@ -18,22 +22,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import seekbar from '~/components/Player/seekbar.vue';
|
||||
import controls from '~/components/Player/controls.vue';
|
||||
import seekbar from "~/components/Player/seekbar.vue";
|
||||
import controls from "~/components/Player/controls.vue";
|
||||
|
||||
export default {
|
||||
props: ["sources"],
|
||||
components: {
|
||||
seekbar,
|
||||
controls
|
||||
controls,
|
||||
},
|
||||
props: ["sources"],
|
||||
data() {
|
||||
return {
|
||||
vidSrc: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.vidSrc = this.sources[this.sources.length-1].url;
|
||||
this.vidSrc = this.sources[this.sources.length - 1].url;
|
||||
},
|
||||
methods: {
|
||||
handleFullscreenChange() {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,175 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="pb-2" style="position: relative">
|
||||
<video
|
||||
ref="player"
|
||||
controls
|
||||
autoplay
|
||||
:src="vidSrc"
|
||||
controls
|
||||
width="100%"
|
||||
style="max-height: 50vh; display: block"
|
||||
:src="vidSrc"
|
||||
style="outline: 1px solid red"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak}rem`
|
||||
: '0',
|
||||
}"
|
||||
@webkitfullscreenchange="handleFullscreenChange"
|
||||
/>
|
||||
<!-- <v-slider v-model="value" step="0"></v-slider> -->
|
||||
|
||||
<!-- <div
|
||||
v-if="$refs.player"
|
||||
class="background overflow-hidden"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak}rem !important`
|
||||
: '0',
|
||||
}"
|
||||
style="width: 100%; position: relative; height: 100%"
|
||||
> -->
|
||||
|
||||
<!-- <v-btn
|
||||
text
|
||||
tile
|
||||
class="debug"
|
||||
style="position: absolute; top: 0; left: 0; width: 50%; height: 100%"
|
||||
>
|
||||
<v-icon>mdi-rewind</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
text
|
||||
tile
|
||||
class="debug"
|
||||
style="position: absolute; top: 0; left: 50%; width: 50%; height: 100%"
|
||||
>
|
||||
<v-icon>mdi-fast-forward</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
text
|
||||
class="debug"
|
||||
style="position: absolute; top: 1rem; left: 1rem; border-radius: 2rem"
|
||||
to="home"
|
||||
disabled
|
||||
>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
text
|
||||
class="debug"
|
||||
style="position: absolute; top: 1rem; right: 1rem; border-radius: 2rem"
|
||||
to="home"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-if="$refs.player"
|
||||
fab
|
||||
text
|
||||
style="
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
"
|
||||
class="debug"
|
||||
color="white"
|
||||
@click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
|
||||
>
|
||||
<v-icon
|
||||
ref="pausePlayIndicator"
|
||||
size="5rem"
|
||||
v-text="$refs.player.paused ? 'mdi-play' : 'mdi-pause'"
|
||||
/>
|
||||
</v-btn>
|
||||
|
||||
<div
|
||||
v-if="$vuetify"
|
||||
class="debug px-4 rounded-xl"
|
||||
style="position: absolute; bottom: 2rem; left: 1rem"
|
||||
>
|
||||
{{ watched }}
|
||||
<span style="color: #999"> / {{ total }} </span>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
text
|
||||
class="debug"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 1rem;
|
||||
border-radius: 0 2rem 2rem 0;
|
||||
"
|
||||
>
|
||||
HD
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
class="debug"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 5rem;
|
||||
border-radius: 2rem 0 0 2rem;
|
||||
"
|
||||
>
|
||||
1X
|
||||
</v-btn>
|
||||
-->
|
||||
<v-progress-linear
|
||||
active
|
||||
style="position: absolute; bottom: 0.75rem; left: 0; width: 100%"
|
||||
background-color="primary"
|
||||
background-opacity="0.5"
|
||||
:buffer-value="buffered"
|
||||
color="primary"
|
||||
height="3"
|
||||
query
|
||||
:value="percent"
|
||||
/>
|
||||
<!-- </div> -->
|
||||
<!-- <v-slider
|
||||
style="position: absolute; bottom: -1rem; left: 0; width: 100%"
|
||||
:value="progress"
|
||||
:max="duration"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["vidSrc"],
|
||||
data() {
|
||||
return {
|
||||
percent: 0,
|
||||
progress: 0,
|
||||
buffered: 0,
|
||||
duration: 0,
|
||||
watched: 0,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let vid = this.$refs.player;
|
||||
vid.addEventListener("loadeddata", (e) => {
|
||||
//Video should now be loaded but we can add a second check
|
||||
if (vid.readyState >= 3) {
|
||||
vid.ontimeupdate = () => {
|
||||
this.duration = vid.duration;
|
||||
this.progress = vid.currentTime;
|
||||
this.percent = (vid.currentTime / vid.duration) * 100;
|
||||
this.watched = this.$vuetube.humanTime(vid.currentTime);
|
||||
this.total = this.$vuetube.humanTime(vid.duration);
|
||||
};
|
||||
vid.addEventListener("progress", () => {
|
||||
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleFullscreenChange() {
|
||||
if (document.fullscreenElement === this.$refs.player) {
|
||||
|
|
@ -26,10 +180,6 @@ export default {
|
|||
this.$vuetube.navigationBar.show();
|
||||
}
|
||||
},
|
||||
|
||||
getPlayer() {
|
||||
return this.$refs.player;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
<v-progress-linear
|
||||
active
|
||||
background-color="primary"
|
||||
|
|
@ -12,12 +9,8 @@
|
|||
query
|
||||
:value="percentage"
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["video"],
|
||||
|
|
@ -25,8 +18,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
percentage: 0,
|
||||
buffered: 0
|
||||
}
|
||||
buffered: 0,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -36,7 +29,6 @@ export default {
|
|||
this.video.addEventListener("progress", () => {
|
||||
this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@
|
|||
</span>
|
||||
|
||||
<div
|
||||
class="background--text text--lighten-5 caption"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
class="background--text caption"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-5' : 'text--darken-4'"
|
||||
v-text="bottomText"
|
||||
/>
|
||||
</v-card-text>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<v-card
|
||||
v-ripple
|
||||
class="background d-flex flex-row overflow-hidden mb-4 mx-4"
|
||||
style="height: 6rem !important"
|
||||
:class="
|
||||
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
src="/dev.svg"
|
||||
class="background"
|
||||
style="position: relative; max-width: 8rem !important"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
:class="$vuetify.theme.dark ? 'lighten-3' : 'darken-3'"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundThumb
|
||||
? `${$store.state.tweaks.roundTweak / 4}rem`
|
||||
|
|
@ -43,11 +44,11 @@
|
|||
<v-icon>mdi-playlist-play</v-icon>
|
||||
</div>
|
||||
</v-img>
|
||||
<div class="pa-4" v-emoji>
|
||||
<div class="pa-4" v-emoji style="font-size: 0.75rem !important">
|
||||
<b>Work in Progress</b>
|
||||
|
||||
<div
|
||||
class="background--text caption"
|
||||
class="background--text caption mt-2"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
Bottom Text <br />
|
||||
|
|
@ -60,17 +61,19 @@
|
|||
text
|
||||
tile
|
||||
elevation="0"
|
||||
style="width: 50px !important; height: 50px !important"
|
||||
class="flex-grow-1"
|
||||
style="width: 2rem !important"
|
||||
>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
<v-icon>mdi-playlist-plus</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
tile
|
||||
elevation="0"
|
||||
style="width: 50px !important; height: 50px !important"
|
||||
class="flex-grow-1"
|
||||
style="width: 2rem !important"
|
||||
>
|
||||
<v-icon>mdi-plus-box-multiple-outline</v-icon>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
solo
|
||||
dense
|
||||
flat
|
||||
autofocus
|
||||
label="Search"
|
||||
style="margin-top: 7px"
|
||||
:background-color="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
@input="$emit('text-changed', text)"
|
||||
@
|
||||
@keyup.enter="$emit('search-btn', text)"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -237,6 +237,9 @@ export default {
|
|||
.v-input__slot {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.v-slider {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
border: 2px solid var(--v-primary-base) !important;
|
||||
|
|
@ -245,6 +248,9 @@ export default {
|
|||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
.debug {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
||||
.v-card--reveal {
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="ml-7 mb-2">Local Playlists</h4>
|
||||
<h4
|
||||
class="ml-7 mb-2 background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
|
||||
>
|
||||
Local Playlists
|
||||
</h4>
|
||||
<playlist-card />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -25,20 +25,42 @@
|
|||
{{ item.name }}
|
||||
</v-btn>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
:style="{
|
||||
padding:
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? '0 1rem !important'
|
||||
: '0rem !important',
|
||||
}"
|
||||
>
|
||||
<!-- Dev Mode Open -->
|
||||
<v-btn text class="entry" @click="dev()" v-if="!devmode" />
|
||||
<v-btn
|
||||
v-if="!devmode"
|
||||
text
|
||||
class="entry"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||
paddingLeft:
|
||||
$store.state.tweaks.roundTweak > 0 ? '' : '1.5rem !important',
|
||||
}"
|
||||
@click="dev()"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
v-if="devmode"
|
||||
text
|
||||
class="entry text-left text-capitalize"
|
||||
style="margin: 0 0.75em 0 0.75em"
|
||||
to="/mods/developer"
|
||||
v-if="devmode"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||
paddingLeft:
|
||||
$store.state.tweaks.roundTweak > 0 ? '' : '1.5rem !important',
|
||||
}"
|
||||
>
|
||||
<v-icon size="30px" class="icon">mdi-database-edit</v-icon>
|
||||
{{ devmodebuttonname }}
|
||||
</v-btn>
|
||||
</v-list-item>
|
||||
<!-- End Dev Mode -->
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
<template>
|
||||
<div class="background" id="watch-body">
|
||||
<div id="player-container">
|
||||
<v-btn text style="position: fixed; z-index: 69420" to="home">
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
<!-- VueTube Player V1 -->
|
||||
<vuetubePlayer
|
||||
:sources="sources"
|
||||
v-if="useBetaPlayer === 'true' && sources.length > 0"
|
||||
:sources="sources"
|
||||
/>
|
||||
|
||||
<!-- Stock Player -->
|
||||
|
|
@ -16,14 +13,7 @@
|
|||
id="player"
|
||||
ref="player"
|
||||
v-touch="{ down: () => $router.push('/home') }"
|
||||
class="background"
|
||||
:vid-src="vidSrc"
|
||||
style="overflow: hidden !important"
|
||||
:style="{
|
||||
borderRadius: $store.state.tweaks.roundWatch
|
||||
? `${$store.state.tweaks.roundTweak / 4}rem`
|
||||
: '0',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -67,7 +57,7 @@
|
|||
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
|
||||
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
|
||||
</div>
|
||||
<div class="d-flex pl-4">
|
||||
<div class="d-flex pl-2">
|
||||
<v-btn
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
|
|
@ -453,11 +443,22 @@ export default {
|
|||
},
|
||||
{
|
||||
name: "Save",
|
||||
// icon: "mdi-playlist-plus",
|
||||
icon: "mdi-plus-box-multiple-outline",
|
||||
actionName: "enqueue",
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
name: "Quality",
|
||||
icon: "mdi-high-definition",
|
||||
actionName: "quality",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
name: "Speed",
|
||||
icon: "mdi-speedometer",
|
||||
actionName: "speed",
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
showMore: false,
|
||||
showComments: false,
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ const module = {
|
|||
}
|
||||
while (returntext.startsWith(":00")) { returntext = returntext.substring(3); } // Remove Prepending 0s (eg. 00:00:00:01:00)
|
||||
if (returntext.startsWith(":0")) { returntext = returntext.substring(2); } else { returntext = returntext.substring(1); } // Prevent Time Starting With 0 (eg. 01:00)
|
||||
console.log("Human Time:", returntext);
|
||||
// console.log("Human Time:", returntext);
|
||||
return returntext;
|
||||
},
|
||||
//--- End Convert Time To Human Readable String ---//
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ export const actions = {
|
|||
state.loading = true;
|
||||
console.log(channelUrl);
|
||||
const channelRequest =
|
||||
channelUrl.includes("/c/") || channelUrl.includes("/channel/")
|
||||
channelUrl.includes("/c/") ||
|
||||
channelUrl.includes("/user/") ||
|
||||
channelUrl.includes("/channel/")
|
||||
? `https://youtube.com/${channelUrl}`
|
||||
: `https://youtube.com/channel/${channelUrl}`;
|
||||
this.$youtube
|
||||
|
|
|
|||
Loading…
Reference in a new issue