diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue index 0f59e61..580a225 100644 --- a/NUXT/components/Player/index.vue +++ b/NUXT/components/Player/index.vue @@ -374,10 +374,15 @@ export default { mounted() { console.log("sources", this.sources); console.log("recommends", this.recommends); - this.audSrc = this.sources[this.sources.length - 1].url; - this.vidSrc = this.sources[0].url; let 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[0].url); + else { + this.audSrc = this.sources[this.sources.length - 1].url; + this.vidSrc = this.sources[0].url; + } + this.$youtube.getSponsorBlock(this.video.id, (data) => { console.log("sbreturn", data); if (Array.isArray(data)) { @@ -389,8 +394,8 @@ export default { // TODO: detect video loading state and send this.loading to play button :loading = loading here // console.log(e); if (vid.readyState >= 3) { - this.$refs.audio.currentTime = vid.currentTime; this.$refs.audio.play(); + this.$refs.audio.currentTime = vid.currentTime; vid.addEventListener("timeupdate", () => { if (!this.seeking) this.progress = vid.currentTime; // for seekbar @@ -415,6 +420,7 @@ export default { // TODO: handle buffering with audio track // TODO: handle video ending with a "replay" button if not on loop // TODO: detect video loading state and send this.loading to play button :loading = loading here + // TODO: split buffering into multiple sections as it should be for back/forth scrubbing vid.addEventListener("progress", () => { this.buffered = (vid.buffered.end(0) / vid.duration) * 100; }); @@ -431,6 +437,46 @@ export default { screen.orientation.removeEventListener("change"); }, methods: { + prebuffer(url) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", url, true); + xhr.responseType = "blob"; + + xhr.addEventListener( + "load", + function () { + if (xhr.status === 200) { + console.log(window.URL || window.webkitURL); + var URL = window.URL || window.webkitURL; + var blob_url = URL.createObjectURL(xhr.response); + + console.log(xhr.response); + console.log(blob_url); + + // NOTE: blob resolves, no CORS issues. But blob_url is broken because https://youtube.com is the window.URL + this.vidSrc = blob_url; + console.log("pre-fetched", xhr); + } else { + console.error("errorred", xhr.status); + } + }, + false + ); + + var prev_pc = 0; + // TODO: big progress overlay (##%) to replace controls while loading if pre-buffering is enabled + xhr.addEventListener("progress", function (event) { + if (event.lengthComputable) { + var pc = Math.round((event.loaded / event.total) * 100); + if (pc != prev_pc) { + prev_pc = pc; // ##% + console.log("buffering progress", pc); + } + } + }); + + xhr.send(); + }, shortNext() { this.shortTransition = true; setTimeout(() => { diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue index 51db58e..0edc2c8 100644 --- a/NUXT/components/Player/seekbar.vue +++ b/NUXT/components/Player/seekbar.vue @@ -109,7 +109,7 @@ export default { this.video.clientHeight / 3 ); }, - // TODO: better scrubbing preview (don't delet ples 🙏) + // TODO: better scrubbing preview start // loadVideoFrames() { // // Exit loop if desired number of frames have been extracted // if (this.frames.length >= frameCount) { @@ -147,37 +147,6 @@ export default { // // Load the next frame // loadVideoFrames(); // }, - // prefetch_file(url, fetched_callback, progress_callback, error_callback) { - // var xhr = new XMLHttpRequest(); - // xhr.open("GET", url, true); - // xhr.responseType = "blob"; - - // xhr.addEventListener( - // "load", - // function () { - // if (xhr.status === 200) { - // var URL = window.URL || window.webkitURL; - // var blob_url = URL.createObjectURL(xhr.response); - // fetched_callback(blob_url); - // } else { - // error_callback(); - // } - // }, - // false - // ); - - // var prev_pc = 0; - // xhr.addEventListener("progress", function (event) { - // if (event.lengthComputable) { - // var pc = Math.round((event.loaded / event.total) * 100); - // if (pc != prev_pc) { - // prev_pc = pc; - // progress_callback(pc); - // } - // } - // }); - // xhr.send(); - // }, // async extractFramesFromVideo(videoUrl, fps = 25) { // // fully download it first (no buffering): // console.log(videoUrl); diff --git a/NUXT/store/player/index.js b/NUXT/store/player/index.js new file mode 100644 index 0000000..469b08e --- /dev/null +++ b/NUXT/store/player/index.js @@ -0,0 +1,25 @@ +export const state = () => ({ + loop: null, + speed: null, + preload: null, + quality: null, + // qualityAutoSwitch: null, + // shortFullscreen: null, + // autoplay: null, + // shorts: null, + // music: null, +}); +export const mutations = { + setLoop(state, payload) { + state.loop = payload; + }, + setSpeed(state, payload) { + state.loading = payload; + }, + setPreload(state, payload) { + state.preload = payload; + }, + setQuality(state, payload) { + state.quality = payload; + }, +};