mirror of https://github.com/VueTubeApp/VueTube
force 1x speed for music(sb-tagged music_offtopic), pre-buffering set to lower res quality preset by default, event listeners cleanup on route change and exit, colored sponsorblock segments
This commit is contained in:
parent
b3140464db
commit
5df6e3e007
|
@ -400,29 +400,47 @@ export default {
|
||||||
blocks: [],
|
blocks: [],
|
||||||
vidSrc: "",
|
vidSrc: "",
|
||||||
audSrc: "",
|
audSrc: "",
|
||||||
isVerticalVideo: false,
|
isVerticalVideo: false, // maybe rename(refactor everywhere used) to isShort
|
||||||
bufferingDetected: false,
|
bufferingDetected: false,
|
||||||
|
isMusic: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
deep: true,
|
||||||
|
handler() {
|
||||||
|
this.cleanup();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("sources", this.sources);
|
console.log("sources", this.sources);
|
||||||
console.log("recommends", this.recommends);
|
console.log("recommends", this.recommends);
|
||||||
let vid = this.$refs.player;
|
let vid = this.$refs.player;
|
||||||
|
|
||||||
// TODO: this.$store.state.player.quality, check if exists and select the closest one
|
// TODO: this.$store.state.player.quality, check if exists and select the closest one
|
||||||
if (this.$store.state.player.preload) this.prebuffer(this.sources[0].url);
|
if (this.$store.state.player.preload) this.prebuffer(this.sources[5].url);
|
||||||
else {
|
else {
|
||||||
this.audSrc = this.sources[this.sources.length - 1].url;
|
this.audSrc = this.sources[this.sources.length - 1].url;
|
||||||
this.vidSrc = this.sources[3].url;
|
this.vidSrc = this.sources[5].url;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$youtube.getSponsorBlock(this.video.id, (data) => {
|
this.$youtube.getSponsorBlock(this.video.id, (data) => {
|
||||||
console.log("sbreturn", data);
|
// console.warn("sbreturn", data);
|
||||||
if (Array.isArray(data)) {
|
if (Array.isArray(data)) {
|
||||||
this.blocks = data;
|
this.blocks = data;
|
||||||
|
data.find((block) => {
|
||||||
|
if (block.category === "music_offtopic") {
|
||||||
|
this.isMusic = true;
|
||||||
|
this.$refs.audio.playbackRate = 1;
|
||||||
|
this.$refs.player.playbackRate = 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO: detect this.isMusic from the video or channel metadata instead of just SB segments
|
||||||
|
|
||||||
vid.addEventListener("loadeddata", (e) => {
|
vid.addEventListener("loadeddata", (e) => {
|
||||||
// console.log(e);
|
// console.log(e);
|
||||||
// if (vid.networkState === vid.NETWORK_LOADING) {
|
// if (vid.networkState === vid.NETWORK_LOADING) {
|
||||||
|
@ -436,8 +454,15 @@ export default {
|
||||||
this.$refs.audio.play();
|
this.$refs.audio.play();
|
||||||
this.bufferingDetected = false;
|
this.bufferingDetected = false;
|
||||||
this.$refs.audio.currentTime = vid.currentTime;
|
this.$refs.audio.currentTime = vid.currentTime;
|
||||||
this.$refs.audio.playbackRate = this.$store.state.player.speed;
|
|
||||||
this.$refs.player.playbackRate = this.$store.state.player.speed;
|
if (!this.isMusic) {
|
||||||
|
this.$refs.audio.playbackRate = this.$store.state.player.speed;
|
||||||
|
this.$refs.player.playbackRate = this.$store.state.player.speed;
|
||||||
|
} else {
|
||||||
|
this.$refs.audio.playbackRate = 1;
|
||||||
|
this.$refs.player.playbackRate = 1;
|
||||||
|
}
|
||||||
|
|
||||||
this.$refs.player.loop = this.$store.state.player.loop;
|
this.$refs.player.loop = this.$store.state.player.loop;
|
||||||
this.$refs.audio.loop = this.$store.state.player.loop;
|
this.$refs.audio.loop = this.$store.state.player.loop;
|
||||||
vid.addEventListener("timeupdate", () => {
|
vid.addEventListener("timeupdate", () => {
|
||||||
|
@ -474,7 +499,7 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
// buffering detection & sync
|
// buffering detection & sync
|
||||||
let threshold = 100; //ms after which user perceives buffering
|
let threshold = 250; //ms after which user perceives buffering
|
||||||
|
|
||||||
vid.addEventListener("waiting", () => {
|
vid.addEventListener("waiting", () => {
|
||||||
if (!vid.paused) {
|
if (!vid.paused) {
|
||||||
|
@ -502,11 +527,19 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.xhr.abort();
|
this.cleanup();
|
||||||
if (this.isFullscreen) this.exitFullscreen();
|
|
||||||
screen.orientation.removeEventListener("change");
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
cleanup() {
|
||||||
|
this.xhr.abort();
|
||||||
|
if (this.isFullscreen) this.exitFullscreen();
|
||||||
|
screen.orientation.removeEventListener("change");
|
||||||
|
this.$refs.player.removeEventListener("loadeddata");
|
||||||
|
this.$refs.player.removeEventListener("timeupdate");
|
||||||
|
this.$refs.player.removeEventListener("progress");
|
||||||
|
this.$refs.player.removeEventListener("waiting");
|
||||||
|
this.$refs.player.removeEventListener("playing");
|
||||||
|
},
|
||||||
prebuffer(url) {
|
prebuffer(url) {
|
||||||
this.xhr = new XMLHttpRequest();
|
this.xhr = new XMLHttpRequest();
|
||||||
this.xhr.open("GET", url, true);
|
this.xhr.open("GET", url, true);
|
||||||
|
@ -537,7 +570,7 @@ export default {
|
||||||
if (pc != prev_pc) {
|
if (pc != prev_pc) {
|
||||||
prev_pc = pc; // ##%
|
prev_pc = pc; // ##%
|
||||||
if (pc < 100) this.buffered = pc;
|
if (pc < 100) this.buffered = pc;
|
||||||
console.warn(this.xhr);
|
// console.warn(this.xhr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -10,9 +10,10 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
transform: translateY(50%);
|
transform: translateY(50%);
|
||||||
|
box-shadow: 0 0 1rem 1rem red;
|
||||||
"
|
"
|
||||||
:class="!fullscreen || controls ? '' : 'invisible'"
|
:class="!fullscreen || controls ? '' : 'invisible'"
|
||||||
background-color="white"
|
:background-color="colors[block.category]"
|
||||||
background-opacity="1"
|
background-opacity="1"
|
||||||
color="transparent"
|
color="transparent"
|
||||||
:height="seeking ? 4 : 2"
|
:height="seeking ? 4 : 2"
|
||||||
|
@ -22,7 +23,6 @@
|
||||||
: 'width: 100%; left: 0; bottom: 1px;'
|
: 'width: 100%; left: 0; bottom: 1px;'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<!-- // TODO:background-color="colors[block.category]" -->
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -317,6 +317,7 @@ export default {
|
||||||
$route: {
|
$route: {
|
||||||
deep: true,
|
deep: true,
|
||||||
handler(newRt, oldRt) {
|
handler(newRt, oldRt) {
|
||||||
|
this.$refs.player.cleanup();
|
||||||
if (newRt.query.v && newRt.query.v != oldRt.query.v) {
|
if (newRt.query.v && newRt.query.v != oldRt.query.v) {
|
||||||
// Exit fullscreen if currently in fullscreen
|
// Exit fullscreen if currently in fullscreen
|
||||||
// if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
|
// if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
|
||||||
|
|
|
@ -31,7 +31,7 @@ export const actions = {
|
||||||
this.$youtube
|
this.$youtube
|
||||||
.getChannel(channelRequest)
|
.getChannel(channelRequest)
|
||||||
.then((channel) => {
|
.then((channel) => {
|
||||||
// console.log(channel);
|
// console.warn(channel);
|
||||||
state.loading = false;
|
state.loading = false;
|
||||||
state.banner =
|
state.banner =
|
||||||
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner?.image.sources[0].url;
|
channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner?.image.sources[0].url;
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="deploymentTargetDropDown">
|
<component name="deploymentTargetDropDown">
|
||||||
<targetSelectedWithDropDown>
|
<runningDeviceTargetSelectedWithDropDown>
|
||||||
<Target>
|
<Target>
|
||||||
<type value="QUICK_BOOT_TARGET" />
|
<type value="RUNNING_DEVICE_TARGET" />
|
||||||
<deviceKey>
|
<deviceKey>
|
||||||
<Key>
|
<Key>
|
||||||
<type value="VIRTUAL_DEVICE_PATH" />
|
<type value="SERIAL_NUMBER" />
|
||||||
<value value="$USER_HOME$/.android/avd/Pixel_3a_API_31_arm64-v8a.avd" />
|
<value value="adb-97QAY11P1S-NELaqI._adb-tls-connect._tcp." />
|
||||||
</Key>
|
</Key>
|
||||||
</deviceKey>
|
</deviceKey>
|
||||||
</Target>
|
</Target>
|
||||||
</targetSelectedWithDropDown>
|
</runningDeviceTargetSelectedWithDropDown>
|
||||||
<timeTargetWasSelectedWithDropDown value="2022-07-06T20:31:28.319907Z" />
|
<timeTargetWasSelectedWithDropDown value="2022-08-01T02:55:54.306038Z" />
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
Loading…
Reference in New Issue