etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-25 04:35:17 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #560 from etekweb/fix-event-errors

Browse source 
fix player errors related to intervals / event handlers
This commit is contained in:
Kenny 2022-10-09 10:24:07 -04:00 committed by GitHub
commit 7c4defe67e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 104 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
NUXT/components/Player/index.vue
View file

@ -202,12 +202,7 @@
:video="$refs.player"
:buffering="bufferingDetected"
@play="$refs.player.play(), $refs.audio.play()"
@pause="
$refs.player.pause(),
$refs.audio.pause(),
clearTimeout(bufferingDetected),
(bufferingDetected = false)
"
@pause="pauseHandler"
/>
<v-btn
v-if="!verticalFullscreen"
@ -331,8 +326,8 @@
left: 50%;
top: 50%;
"
:value="buffered"
color="primary"
:value="buffered"
:rotate="-90"
:size="64"
>
@ -385,6 +380,9 @@ export default {
},
recommends: {
type: Array,
default: () => {
return [];
},
},
},
data() {
@ -407,12 +405,13 @@ export default {
isVerticalVideo: false, // maybe rename(refactor everywhere used) to isShort
bufferingDetected: false,
isMusic: false,
vid: null,
};
},
mounted() {
console.log("sources", this.sources);
console.log("recommends", this.recommends);
let vid = this.$refs.player;
this.vid = this.$refs.player;
// TODO: this.$store.state.player.quality, check if exists and select the closest one
if (this.$store.state.player.preload) this.prebuffer(this.sources[5].url);
@ -437,7 +436,18 @@ export default {
// TODO: detect this.isMusic from the video or channel metadata instead of just SB segments
this.$refs.player.addEventListener("loadeddata", (e) => {
this.$refs.player.addEventListener("loadeddata", this.loadedDataEvent);
},
created() {
screen.orientation.addEventListener("change", () =>
this.fullscreenHandler(false)
);
},
beforeDestroy() {
this.cleanup();
},
methods: {
loadedDataEvent() {
// console.log(e);
// if (vid.networkState === vid.NETWORK_LOADING) {
// // The user agent is actively trying to download data.
@ -446,10 +456,10 @@ export default {
// if (vid.readyState < vid.HAVE_FUTURE_DATA) {
// // There is not enough data to keep playing from this point
// }
if (vid.readyState >= 3) {
if (this.vid.readyState >= 3) {
this.$refs.audio.play();
this.bufferingDetected = false;
this.$refs.audio.currentTime = vid.currentTime;
this.$refs.audio.currentTime = this.vid.currentTime;
if (!this.isMusic) {
this.$refs.audio.playbackRate = this.$store.state.player.speed;
@ -461,43 +471,45 @@ export default {
this.$refs.player.loop = this.$store.state.player.loop;
this.$refs.audio.loop = this.$store.state.player.loop;
this.$refs.player.addEventListener("timeupdate", () => {
if (!this.seeking) this.progress = vid.currentTime; // for seekbar
this.$refs.player.addEventListener("timeupdate", this.timeUpdateEvent);
// TODO: handle video ending with a "replay" button instead of <playpause /> if not on loop
// TODO: split buffering into multiple sections as it should be for back/forth scrubbing
this.$refs.player.addEventListener("progress", this.progressEvent);
this.$refs.player.addEventListener("waiting", this.waitingEvent);
this.$refs.player.addEventListener("playing", this.playingEvent);
}
},
timeUpdateEvent() {
if (!this.seeking) this.progress = this.vid.currentTime; // for seekbar
// console.log("sb check", this.blocks);
// iterate over data.segments array
// for sponsorblock
if (this.blocks.length > 0)
this.blocks.forEach((sponsor) => {
let vidTime = vid.currentTime;
let vidTime = this.vid.currentTime;
if (
vidTime >= sponsor.segment[0] &&
vidTime <= sponsor.segment[1]
) {
if (vidTime >= sponsor.segment[0] && vidTime <= sponsor.segment[1]) {
console.log("Skipping the sponsor");
this.$youtube.showToast("Skipped sponsor");
this.$refs.player.currentTime = sponsor.segment[1] + 1;
this.$refs.audio.currentTime = this.$refs.player.currentTime;
}
});
});
// TODO: handle video ending with a "replay" button instead of <playpause /> if not on loop
// TODO: split buffering into multiple sections as it should be for back/forth scrubbing
this.$refs.player.addEventListener("progress", () => {
},
progressEvent() {
if (this.bufferingDetected) {
this.$refs.audio.currentTime = vid.currentTime;
this.$refs.audio.currentTime = this.vid.currentTime;
clearTimeout(this.bufferingDetected);
this.bufferingDetected = false;
}
if (this.$refs.audio.paused && !this.$refs.player.paused) this.$refs.audio.play();
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
});
if (this.$refs.audio.paused && !this.$refs.player.paused)
this.$refs.audio.play();
this.buffered = (this.vid.buffered.end(0) / this.vid.duration) * 100;
},
waitingEvent() {
// buffering detection & sync
let threshold = 250; //ms after which user perceives buffering
this.$refs.player.addEventListener("waiting", () => {
if (!this.$refs.player.paused) {
this.bufferingDetected = setTimeout(() => {
this.bufferingDetected = true;
@ -505,37 +517,25 @@ export default {
//show buffering
}, threshold);
}
});
this.$refs.player.addEventListener("playing", () => {
},
playingEvent() {
if (this.bufferingDetected != false) {
clearTimeout(this.bufferingDetected);
this.$refs.audio.currentTime = vid.currentTime;
this.$refs.audio.currentTime = this.vid.currentTime;
this.bufferingDetected = false;
this.$refs.audio.play();
}
});
}
});
},
created() {
screen.orientation.addEventListener("change", () =>
this.fullscreenHandler(false)
);
},
beforeDestroy() {
this.cleanup();
},
methods: {
cleanup() {
if (this.xhr) this.xhr.abort();
if (this.isFullscreen) this.exitFullscreen();
if (this.bufferingDetected) clearTimeout(this.bufferingDetected);
screen.orientation.removeEventListener("change");
//! this.$refs.player.removeEventListener("loadeddata"); // NOTE: needs a function to be passed as the 2nd argument, but breaks if called with vue method as the 2nd argument in mounted()
// this.$refs.player.removeEventListener("timeupdate");
this.$refs.player.removeEventListener("progress", () => {});
this.$refs.player.removeEventListener("waiting", () => {});
this.$refs.player.removeEventListener("playing", () => {});
this.$refs.player.removeEventListener("loadeddata", this.loadedDataEvent);
this.$refs.player.removeEventListener("timeupdate", this.timeUpdateEvent);
this.$refs.player.removeEventListener("progress", this.progressEvent);
this.$refs.player.removeEventListener("waiting", this.waitingEvent);
this.$refs.player.removeEventListener("playing", this.playingEvent);
},
prebuffer(url) {
this.xhr = new XMLHttpRequest();
@ -689,15 +689,26 @@ export default {
this.isFullscreen = true;
//--- Fix pressing back button in fullscreen exiting the watch page ---//
this.$vuetube.addBackAction(new backType(
() => { this.exitFullscreen(true); },
() => { return this.isFullscreen; }
));
this.$vuetube.addBackAction(
new backType(
() => {
this.exitFullscreen(true);
},
() => {
return this.isFullscreen;
}
)
);
},
getPlayer() {
return this.$refs.player;
},
pauseHandler() {
this.$refs.player.pause();
this.$refs.audio.pause();
clearTimeout(this.bufferingDetected);
this.bufferingDetected = false;
},
},
};
</script>

40
NUXT/components/Player/watchtime.vue
View file

@ -21,41 +21,15 @@ export default {
required: true,
},
},
data() {
return {
humanWatchTime: "0:00",
humanDuration: "0:00",
runWatchTimeUpdates: null
}
computed: {
humanDuration() {
if (this.duration) return this.$vuetube.humanTime(this.duration);
return "0:00";
},
mounted() {
//--- Only show end duration when 'this.duration' becomes defined ---//
const durationTimer = setInterval(() => {
if (this.duration) {
this.humanDuration = this.$vuetube.humanTime(this.duration);
return clearInterval(durationTimer);
}
}, 100);
//--- END Only show end duration when 'this.duration' becomes defined ---//
humanWatchTime() {
if (this.currentTime) return this.$vuetube.humanTime(this.currentTime);
return "0:00";
},
methods: {
updateWatchTime() {
this.humanWatchTime = this.$vuetube.humanTime(this.currentTime);
}
},
watch: {
controls(newVal) {
if (newVal) { // controls are VISIBLE
this.updateWatchTime(); // Call to immediately update
this.runWatchTimeUpdates = setInterval(this.updateWatchTime, 500);
} else { // Controls are INVISIBLE
clearInterval(this.runWatchTimeUpdates);
}
}
}
};
</script>

2
NUXT/plugins/vuetube.js
View file

@ -138,7 +138,7 @@ const module = {
}
// join the array into a string with : as a sepatrator
let returntext = levels.join(":");
console.log(returntext);
// console.log(returntext);
return returntext;
},
//--- End Convert Time To Human Readable String ---//