mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-22 11:15:14 +00:00
slider improvements
This commit is contained in:
parent
c89ad35c80
commit
6d4fde2dcc
8 changed files with 41 additions and 42 deletions
|
@ -155,6 +155,7 @@
|
|||
<progressbar
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:seeking="seeking"
|
||||
:controls="controls"
|
||||
:fullscreen="isFullscreen"
|
||||
:current-time="$refs.player.currentTime"
|
||||
|
@ -172,6 +173,7 @@
|
|||
<sponsorblock
|
||||
v-if="$refs.player"
|
||||
:video="$refs.player"
|
||||
:seeking="seeking"
|
||||
:videoid="videoid"
|
||||
:controls="controls"
|
||||
:fullscreen="isFullscreen"
|
||||
|
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<v-progress-linear
|
||||
style="width: 100%; background: #ffffff22"
|
||||
style="
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background: #ffffff22;
|
||||
transform: translateY(50%);
|
||||
"
|
||||
background-opacity="0.5"
|
||||
background-color="primary"
|
||||
background-color="white"
|
||||
:buffer-value="buffered"
|
||||
:value="(currentTime / video.duration) * 100"
|
||||
:class="!fullscreen || controls ? '' : 'invisible'"
|
||||
color="primary"
|
||||
height="2"
|
||||
:height="seeking ? 4 : 2"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
|
||||
: 'width: 100%'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
|
||||
: 'width: 100%; left: 0; bottom: 1px;'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
@ -22,6 +27,10 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
seeking: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
|
|
|
@ -13,12 +13,14 @@
|
|||
hide-details
|
||||
height="2"
|
||||
dense
|
||||
color="transparent"
|
||||
thumb-color="primary"
|
||||
track-color="transparent"
|
||||
:class="!controls && !fullscreen && !scrubbing ? 'invisible' : ''"
|
||||
style="position: absolute; z-index: 3"
|
||||
style="position: absolute; z-index: 4"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3rem;'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 51px;'
|
||||
: 'width: calc(100% - 0.8rem); left: 0.4rem; bottom: 0;'
|
||||
"
|
||||
:thumb-size="0"
|
||||
|
|
|
@ -6,20 +6,21 @@
|
|||
:buffer-value="(block.segment[1] / video.duration) * 100"
|
||||
:value="(block.segment[0] / video.duration) * 100"
|
||||
style="
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
transform: translateY(50%);
|
||||
"
|
||||
:class="!fullscreen || controls ? '' : 'invisible'"
|
||||
background-color="white"
|
||||
background-opacity="1"
|
||||
color="transparent"
|
||||
height="2"
|
||||
:height="seeking ? 4 : 2"
|
||||
:style="
|
||||
fullscreen
|
||||
? 'width: calc(100% - 2rem); left: 1rem; position: absolute; bottom: 3rem;'
|
||||
: 'width: 100%; left: 0; position: absolute; bottom: 0;'
|
||||
? 'width: calc(100% - 2rem); left: 1rem; bottom: 3.25rem;'
|
||||
: 'width: 100%; left: 0; bottom: 1px;'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
@ -32,6 +33,10 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
seeking: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
videoid: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
@ -70,7 +75,7 @@ export default {
|
|||
vidTime <= sponsor.segment[1]
|
||||
) {
|
||||
console.log("Skipping the sponsor");
|
||||
this.$youtube.showToast("Skipped sponsor")
|
||||
this.$youtube.showToast("Skipped sponsor");
|
||||
vid.currentTime = sponsor.segment[1] + 1;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<style scoped>
|
||||
.description {
|
||||
white-space: pre-line;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
<v-card v-if="loaded" class="background rounded-0" flat>
|
||||
<div
|
||||
v-ripple
|
||||
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||
class="d-flex justify-space-between align-start px-3 pt-4"
|
||||
@click="showMore = !showMore"
|
||||
>
|
||||
<div class="d-flex flex-column">
|
||||
|
@ -164,7 +164,7 @@
|
|||
|
||||
<!-- Description -->
|
||||
<div v-if="showMore">
|
||||
<div class="scroll-y ma-4">
|
||||
<div class="scroll-y ma-4 pt-1">
|
||||
<slim-video-description-renderer
|
||||
:render="video.renderedData.description"
|
||||
/>
|
||||
|
|
|
@ -141,31 +141,11 @@ const module = {
|
|||
Math.floor((((seconds % 31536000) % 86400) % 3600) % 60), //Seconds
|
||||
];
|
||||
levels = levels.filter((level) => level !== null);
|
||||
|
||||
for (let i = 1; i < levels.length; i++) {
|
||||
levels[i] = levels[i].toString().padStart(2, "0");
|
||||
}
|
||||
|
||||
// join the array into a string with : as a separator
|
||||
let returntext = levels.join(":");
|
||||
|
||||
console.log("Human Time:", returntext);
|
||||
// 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)
|
||||
|
||||
// if (!returntext.includes(":")) {
|
||||
// if (returntext.length == 1) {
|
||||
// returntext = "0" + returntext; // Make tens digit in seconds always visible (eg. 0:09)
|
||||
// }
|
||||
// returntext = "0:" + returntext; // Make minutes visible as 0 when sub 60 seconds (eg. 0:51)
|
||||
// }
|
||||
|
||||
return returntext;
|
||||
},
|
||||
//--- End Convert Time To Human Readable String ---//
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="deploymentTargetDropDown">
|
||||
<targetSelectedWithDropDown>
|
||||
<runningDeviceTargetSelectedWithDropDown>
|
||||
<Target>
|
||||
<type value="QUICK_BOOT_TARGET" />
|
||||
<type value="RUNNING_DEVICE_TARGET" />
|
||||
<deviceKey>
|
||||
<Key>
|
||||
<type value="VIRTUAL_DEVICE_PATH" />
|
||||
<value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
|
||||
<type value="SERIAL_NUMBER" />
|
||||
<value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
|
||||
</Key>
|
||||
</deviceKey>
|
||||
</Target>
|
||||
</targetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-05-14T02:50:17.689302Z" />
|
||||
</runningDeviceTargetSelectedWithDropDown>
|
||||
<timeTargetWasSelectedWithDropDown value="2022-06-07T16:21:41.251850Z" />
|
||||
</component>
|
||||
</project>
|
Loading…
Reference in a new issue