etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2025-01-03 14:11:08 +00:00
Code Issues Projects Releases Wiki Activity

player logic reworked

Browse source
This commit is contained in:
Nikita Krupin 2022-06-08 11:59:43 -04:00
parent a46b87436c
commit 59b65b7d9e
6 changed files with 183 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -151,6 +151,8 @@
v-if="$refs.player" v-if="$refs.player"
:video="$refs.player" :video="$refs.player"
:fullscreen="isFullscreen" :fullscreen="isFullscreen"
:watched="watched"
:duration="duration"
/> />
<v-btn <v-btn
v-if="isFullscreen" v-if="isFullscreen"
@ -257,6 +259,7 @@
:controls="controls" :controls="controls"
:fullscreen="isFullscreen" :fullscreen="isFullscreen"
:current-time="$refs.player.currentTime" :current-time="$refs.player.currentTime"
:buffered="buffered"
/> />
<seekbar <seekbar
v-if="$refs.player" v-if="$refs.player"
@ -266,6 +269,8 @@
:sources="sources" :sources="sources"
:controls="controls" :controls="controls"
:current-time="$refs.player.currentTime" :current-time="$refs.player.currentTime"
:progress="progress"
:duration="$refs.player.duration"
@seeking="seeking = !seeking" @seeking="seeking = !seeking"
/> />
<sponsorblock <sponsorblock
@ -275,6 +280,7 @@
:videoid="videoid" :videoid="videoid"
:controls="controls" :controls="controls"
:fullscreen="isFullscreen" :fullscreen="isFullscreen"
:blocks="blocks"
/> />
</div> </div>
</template> </template>
@ -327,14 +333,57 @@ export default {
controls: false, controls: false,
seeking: false, seeking: false,
contain: true, contain: true,
progress: 0,
buffered: 0,
duration: 0,
watched: 0,
blocks: [],
vidSrc: "", vidSrc: "",
}; };
}, },
mounted() { mounted() {
console.log("sources", this.sources); console.log("sources", this.sources);
this.vidSrc = this.sources[this.sources.length - 1].url; this.vidSrc = this.sources[this.sources.length - 1].url;
// TODO: detect orientation change and enter fullscreen let vid = this.$refs.player;
this.$youtube.getSponsorBlock(this.vidSrc, (data) => {
console.log("sbreturn", data);
if (Array.isArray(data)) {
this.blocks = data;
}
});
vid.addEventListener("loadeddata", (e) => {
// TODO: detect video loading state and send this.loading to play button :loading = loading // TODO: detect video loading state and send this.loading to play button :loading = loading
// console.log(e);
if (vid.readyState >= 3) {
vid.addEventListener("timeupdate", () => {
this.duration = this.$vuetube.humanTime(vid.duration);
this.watched = this.$vuetube.humanTime(vid.currentTime);
if (!this.seeking) this.progress = vid.currentTime;
// console.log("sb check", data);
// iterate over data.segments array
if (this.blocks.length > 0)
this.blocks.forEach((sponsor) => {
let vidTime = vid.currentTime;
if (
vidTime >= sponsor.segment[0] &&
vidTime <= sponsor.segment[1]
) {
console.log("Skipping the sponsor");
this.$youtube.showToast("Skipped sponsor");
vid.currentTime = sponsor.segment[1] + 1;
}
});
});
vid.addEventListener("progress", () => {
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
});
}
});
// TODO: detect orientation change and enter fullscreen
}, },
beforeDestroy() { beforeDestroy() {
if (this.isFullscreen) this.exitFullscreen(); if (this.isFullscreen) this.exitFullscreen();

15
NUXT/components/Player/progressbar.vue
View file

@ -43,19 +43,10 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
buffered: {
type: Number,
required: true,
}, },
data: () => ({
buffered: 0,
}),
mounted() {
this.video.addEventListener("loadeddata", (e) => {
if (this.video.readyState >= 3) {
this.video.addEventListener("progress", () => {
this.buffered =
(this.video.buffered.end(0) / this.video.duration) * 100;
});
}
});
}, },
}; };
</script> </script>

228
NUXT/components/Player/seekbar.vue
View file

@ -77,23 +77,21 @@ export default {
type: Number, type: Number,
required: true, required: true,
}, },
progress: {
type: Number,
required: true,
},
duration: {
type: Number,
required: true,
},
}, },
data: () => ({ data: () => ({
scrubbing: false, scrubbing: false,
progress: 0,
duration: 0,
vidWrs: "", vidWrs: "",
}), }),
mounted() { mounted() {
this.vidWrs = this.sources[1].url; this.vidWrs = this.sources[1].url;
this.video.addEventListener("loadeddata", (e) => {
if (this.video.readyState >= 3) {
this.video.addEventListener("timeupdate", () => {
this.duration = this.video.duration;
if (!this.scrubbing) this.progress = this.currentTime;
});
}
});
}, },
methods: { methods: {
seek(e) { seek(e) {
@ -114,126 +112,126 @@ export default {
scrub(e) { scrub(e) {
this.video.currentTime = e; this.video.currentTime = e;
}, },
// TODO: better scrubbing preview // TODO: better scrubbing preview (don't delet ples 🙏)
loadVideoFrames() { // loadVideoFrames() {
// Exit loop if desired number of frames have been extracted // // Exit loop if desired number of frames have been extracted
if (this.frames.length >= frameCount) { // if (this.frames.length >= frameCount) {
this.visibleFrame = 0; // this.visibleFrame = 0;
// Append all canvases to container div // // Append all canvases to container div
this.frames.forEach((frame) => { // this.frames.forEach((frame) => {
this.frameContainerElement.appendChild(frame); // this.frameContainerElement.appendChild(frame);
}); // });
return; // return;
} // }
// If extraction hasn’t started, set desired time for first frame // // If extraction hasn’t started, set desired time for first frame
if (this.frames.length === 0) { // if (this.frames.length === 0) {
this.requestedTime = 0; // this.requestedTime = 0;
} else { // } else {
this.requestedTime = this.requestedTime + this.frameTimestep; // this.requestedTime = this.requestedTime + this.frameTimestep;
} // }
// Send seek request to video player for the next frame. // // Send seek request to video player for the next frame.
this.videoElement.currentTime = this.requestedTime; // this.videoElement.currentTime = this.requestedTime;
}, // },
extractFrame(videoWidth, videoHeight) { // extractFrame(videoWidth, videoHeight) {
// Create DOM canvas object // // Create DOM canvas object
var canvas = document.createElement("canvas"); // var canvas = document.createElement("canvas");
canvas.className = "video-scrubber-frame"; // canvas.className = "video-scrubber-frame";
canvas.height = videoHeight; // canvas.height = videoHeight;
canvas.width = videoWidth; // canvas.width = videoWidth;
// Copy current frame to canvas // // Copy current frame to canvas
var context = canvas.getContext("2d"); // var context = canvas.getContext("2d");
context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight); // context.drawImage(this.videoElement, 0, 0, videoWidth, videoHeight);
this.frames.push(canvas); // this.frames.push(canvas);
// Load the next frame // // Load the next frame
loadVideoFrames(); // loadVideoFrames();
}, // },
prefetch_file(url, fetched_callback, progress_callback, error_callback) { // prefetch_file(url, fetched_callback, progress_callback, error_callback) {
var xhr = new XMLHttpRequest(); // var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // xhr.open("GET", url, true);
xhr.responseType = "blob"; // xhr.responseType = "blob";
xhr.addEventListener( // xhr.addEventListener(
"load", // "load",
function () { // function () {
if (xhr.status === 200) { // if (xhr.status === 200) {
var URL = window.URL || window.webkitURL; // var URL = window.URL || window.webkitURL;
var blob_url = URL.createObjectURL(xhr.response); // var blob_url = URL.createObjectURL(xhr.response);
fetched_callback(blob_url); // fetched_callback(blob_url);
} else { // } else {
error_callback(); // error_callback();
} // }
}, // },
false // false
); // );
var prev_pc = 0; // var prev_pc = 0;
xhr.addEventListener("progress", function (event) { // xhr.addEventListener("progress", function (event) {
if (event.lengthComputable) { // if (event.lengthComputable) {
var pc = Math.round((event.loaded / event.total) * 100); // var pc = Math.round((event.loaded / event.total) * 100);
if (pc != prev_pc) { // if (pc != prev_pc) {
prev_pc = pc; // prev_pc = pc;
progress_callback(pc); // progress_callback(pc);
} // }
} // }
}); // });
xhr.send(); // xhr.send();
}, // },
async extractFramesFromVideo(videoUrl, fps = 25) { // async extractFramesFromVideo(videoUrl, fps = 25) {
// fully download it first (no buffering): // // fully download it first (no buffering):
console.log(videoUrl); // console.log(videoUrl);
console.log(fps); // console.log(fps);
let videoBlob = await fetch(videoUrl, { // let videoBlob = await fetch(videoUrl, {
headers: { range: "bytes=0-567139" }, // headers: { range: "bytes=0-567139" },
}).then((r) => r.blob()); // }).then((r) => r.blob());
console.log(videoBlob); // console.log(videoBlob);
let videoObjectUrl = URL.createObjectURL(videoBlob); // let videoObjectUrl = URL.createObjectURL(videoBlob);
let video = document.createElement("video"); // let video = document.createElement("video");
let seekResolve; // let seekResolve;
video.addEventListener("seeked", async function () { // video.addEventListener("seeked", async function () {
if (seekResolve) seekResolve(); // if (seekResolve) seekResolve();
}); // });
video.src = videoObjectUrl; // video.src = videoObjectUrl;
// workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683) // // workaround chromium metadata bug (https://stackoverflow.com/q/38062864/993683)
while ( // while (
(video.duration === Infinity || isNaN(video.duration)) && // (video.duration === Infinity || isNaN(video.duration)) &&
video.readyState < 2 // video.readyState < 2
) { // ) {
await new Promise((r) => setTimeout(r, 1000)); // await new Promise((r) => setTimeout(r, 1000));
video.currentTime = 10000000 * Math.random(); // video.currentTime = 10000000 * Math.random();
} // }
let duration = video.duration; // let duration = video.duration;
let canvas = document.createElement("canvas"); // let canvas = document.createElement("canvas");
let context = canvas.getContext("2d"); // let context = canvas.getContext("2d");
let [w, h] = [video.videoWidth, video.videoHeight]; // let [w, h] = [video.videoWidth, video.videoHeight];
canvas.width = w; // canvas.width = w;
canvas.height = h; // canvas.height = h;
let interval = 1; // let interval = 1;
let currentTime = 0; // let currentTime = 0;
while (currentTime < duration) { // while (currentTime < duration) {
video.currentTime = currentTime; // video.currentTime = currentTime;
await new Promise((r) => (seekResolve = r)); // await new Promise((r) => (seekResolve = r));
context.drawImage(video, 0, 0, w, h); // context.drawImage(video, 0, 0, w, h);
let base64ImageData = canvas.toDataURL(); // let base64ImageData = canvas.toDataURL();
console.log(base64ImageData); // console.log(base64ImageData);
this.frames.push(base64ImageData); // this.frames.push(base64ImageData);
currentTime += interval; // currentTime += interval;
} // }
console.log("%c frames", "color: #00ff00"); // console.log("%c frames", "color: #00ff00");
console.log(this.frames); // console.log(this.frames);
}, // },
// TODO: scrubbing preview end // TODO: scrubbing preview end
}, },
}; };

37
NUXT/components/Player/sponsorblock.vue
View file

@ -49,41 +49,10 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
blocks: {
type: Array,
required: true,
}, },
data: () => ({
blocks: [],
}),
mounted() {
let vid = this.video;
let id = this.videoid;
vid.addEventListener("loadeddata", (e) => {
if (vid.readyState >= 3) {
this.$youtube.getSponsorBlock(id, (data) => {
console.log("sbreturn", data);
if (Array.isArray(data)) {
this.blocks = data;
// iterate over data.segments array
vid.addEventListener("timeupdate", () => {
// console.log("sb check", data);
data.forEach((sponsor) => {
let vidTime = vid.currentTime;
if (
vidTime >= sponsor.segment[0] &&
vidTime <= sponsor.segment[1]
) {
console.log("Skipping the sponsor");
this.$youtube.showToast("Skipped sponsor");
vid.currentTime = sponsor.segment[1] + 1;
}
});
});
}
});
}
});
}, },
}; };
</script> </script>

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

@ -19,18 +19,14 @@ export default {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
duration: {
type: Number,
required: true,
}, },
data() { watched: {
return { type: Number,
watched: 0, required: true,
duration: 0,
};
}, },
mounted() {
this.video.addEventListener("timeupdate", () => {
this.duration = this.$vuetube.humanTime(this.video.duration);
this.watched = this.$vuetube.humanTime(this.video.currentTime);
});
}, },
}; };
</script> </script>

10
ios/App/App.xcodeproj/project.pbxproj
View file

@ -352,15 +352,14 @@
DEVELOPMENT_TEAM = VRCJ7YWR89; DEVELOPMENT_TEAM = VRCJ7YWR89;
INFOPLIST_FILE = App/Info.plist; INFOPLIST_FILE = App/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 12.2; IPHONEOS_DEPLOYMENT_TARGET = 12.2;
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\""; OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube; PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
PRODUCT_NAME = "$(TARGET_NAME)"; PRODUCT_NAME = "$(TARGET_NAME)";
SUPPORTS_MACCATALYST = YES; SUPPORTS_MACCATALYST = NO;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG; SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2,6"; TARGETED_DEVICE_FAMILY = "1,2";
}; };
name = Debug; name = Debug;
}; };
@ -374,14 +373,13 @@
DEVELOPMENT_TEAM = VRCJ7YWR89; DEVELOPMENT_TEAM = VRCJ7YWR89;
INFOPLIST_FILE = App/Info.plist; INFOPLIST_FILE = App/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 12.2; IPHONEOS_DEPLOYMENT_TARGET = 12.2;
"IPHONEOS_DEPLOYMENT_TARGET[sdk=macosx*]" = 14.2;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube; PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
PRODUCT_NAME = "$(TARGET_NAME)"; PRODUCT_NAME = "$(TARGET_NAME)";
SUPPORTS_MACCATALYST = YES; SUPPORTS_MACCATALYST = NO;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = ""; SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
SWIFT_VERSION = 5.0; SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2,6"; TARGETED_DEVICE_FAMILY = "1,2";
}; };
name = Release; name = Release;
}; };