diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml new file mode 100644 index 0000000..2430db7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question.yml @@ -0,0 +1,37 @@ +name: ❓ Question +description: Ask a quesion related to VueTube +labels: [question] +body: + + - type: textarea + id: question + attributes: + label: Ask your question + description: What do you want to know? + placeholder: | + Example: + "How do I add a plugin?" + validations: + required: true + + - type: textarea + id: aditional-info + attributes: + label: Aditional information + placeholder: | + Additional useful information, for example, a screenshot. + + - type: checkboxes + id: acknowledgements + attributes: + label: Acknowledgements + description: Your question will be closed if you haven't done these steps. + options: + - label: I have searched the existing issues and this is a new question, **NOT** a duplicate or related to another open issue. + required: true + - label: I have written a short but informative title. + required: true + - label: I will fill out all of the requested information in this form. + required: true + - label: My question isn't asked in FAQ (Frequently Asked Questions). + required: true diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 14b2b3b..8899d6f 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -106,7 +106,7 @@ jobs: CODE_SIGNING_ALLOWED="NO" CODE_SIGN_ENTITLEMENTS="" - name: Make IPA - run: mkdir Payload && mv ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-iphoneos/App.app Payload && zip -r Payload.zip Payload && mv Payload.zip VueTube.ipa + run: mkdir Payload && mv ~/Library/Developer/Xcode/DerivedData/App-*/Build/Products/Debug-maccatalyst/App.app/ Payload && zip -r Payload.zip Payload && mv Payload.zip VueTube.ipa - name: Upload artifacts uses: actions/upload-artifact@v2 diff --git a/NUXT/components/Player/fullscreen.vue b/NUXT/components/Player/fullscreen.vue index c4cfdb5..b332d7d 100644 --- a/NUXT/components/Player/fullscreen.vue +++ b/NUXT/components/Player/fullscreen.vue @@ -4,10 +4,13 @@ text small color="white" - style="position: absolute; bottom: 0.25rem; right: 0.25rem" + style="position: absolute; right: 0.25rem" + :style="fullscreen ? 'bottom: 3.5rem' : 'bottom: 0.25rem'" @click.stop="$emit('fullscreen')" > - {{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }} + {{ + fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" + }} diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue index c2a7eeb..1cfff4a 100644 --- a/NUXT/components/Player/index.vue +++ b/NUXT/components/Player/index.vue @@ -74,7 +74,11 @@
@@ -143,7 +147,89 @@ mdi-fast-forward-5 - + + + mdi-thumb-up-outline + + + mdi-thumb-down-outline + + + mdi-share-outline + + + mdi-plus-box-multiple-outline + + + mdi-comment-text-outline + + + + mdi-cards-outline + @@ -151,8 +237,27 @@ :fullscreen="isFullscreen" @fullscreen="(controls = $refs.player.paused), handleFullscreenChange()" /> + + mdi-cards-outline +
- + + @@ -176,8 +290,12 @@ import captions from "~/components/Player/captions.vue"; import playpause from "~/components/Player/playpause.vue"; import watchtime from "~/components/Player/watchtime.vue"; import fullscreen from "~/components/Player/fullscreen.vue"; +import progressbar from "~/components/Player/progressbar.vue"; +import sponsorblock from "~/components/Player/sponsorblock.vue"; export default { components: { + sponsorblock, + progressbar, fullscreen, watchtime, playpause, @@ -198,6 +316,10 @@ export default { type: Object, required: true, }, + videoid: { + type: String, + required: true, + }, }, data() { return { @@ -213,21 +335,6 @@ export default { this.vidSrc = this.sources[this.sources.length - 1].url; // TODO: detect orientation change and enter fullscreen // TODO: detect video loading state and send this.loading to play button :loading = loading - - - this.$youtube.getSponsorBlock(this.$route.query.v, (data) => { - sponsorBlock = data.segment; - }); - - this.$refs.player.ontimeupdate = () => { - let vidTime = this.$refs.player.currentTime; - for (let i = 0; i < sponsorBlock.length; i++) { - if (vidTime > sponsorBlock[i][0] && vidTime < sponsorBlock[0][i]) { - this.$refs.player.currentTime = sponsorBlock[i][0]; - break; - } - } - } }, beforeDestroy() { if (this.isFullscreen) this.exitFullscreen(); diff --git a/NUXT/components/Player/progressbar.vue b/NUXT/components/Player/progressbar.vue new file mode 100644 index 0000000..1ff8c98 --- /dev/null +++ b/NUXT/components/Player/progressbar.vue @@ -0,0 +1,61 @@ + + diff --git a/NUXT/components/Player/quality.vue b/NUXT/components/Player/quality.vue index fe356c2..b065e82 100644 --- a/NUXT/components/Player/quality.vue +++ b/NUXT/components/Player/quality.vue @@ -18,13 +18,25 @@ {{ sources.find((src) => src.url == video.src).qualityLabel }} - - Quality for current video + + + Quality for current video + + mdi-close + + + - export default { - props: ["sources", "video", "controls", "fullscreen"], - - data() { - return { - scrubbing: false, - percent: 0, - progress: 0, - buffered: 0, - duration: 0, - vidSrc: "", - vidWrs: "", - }; + props: { + video: { + type: Object, + required: true, + }, + controls: { + type: Boolean, + required: true, + }, + fullscreen: { + type: Boolean, + required: true, + }, + sources: { + type: Array, + required: true, + }, + currentTime: { + type: Number, + required: true, + }, }, + data: () => ({ + scrubbing: false, + progress: 0, + duration: 0, + vidWrs: "", + }), mounted() { - console.log("sources", this.sources); - this.vidSrc = this.sources[this.sources.length - 1].url; this.vidWrs = this.sources[1].url; - let vid = this.video; - vid.addEventListener("loadeddata", (e) => { - // console.log("%c loadeddata", "color: #00ff00"); - console.log(e); - //Video should now be loaded but we can add a second check - if (vid.readyState >= 3) { - vid.ontimeupdate = () => { - // console.log("%c timeupdate", "color: #aaaaff"); - this.duration = vid.duration; - if (!this.scrubbing) this.progress = vid.currentTime; - this.percent = (vid.currentTime / vid.duration) * 100; - }; - vid.onprogress = () => { - // console.log("%c progress", "color: #ff00ff"); - this.buffered = (vid.buffered.end(0) / vid.duration) * 100; - }; + 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: { + seek(e) { + // console.log(`scrubbing ${e}`); + let vid = this.$refs.playerfake; + let canvas = this.$refs.preview; + this.$refs.playerfake.currentTime = e; + canvas + .getContext("2d") + .drawImage( + vid, + 0, + 0, + this.video.clientWidth / 3, + this.video.clientHeight / 3 + ); + }, + scrub(e) { + this.video.currentTime = e; + }, // TODO: better scrubbing preview loadVideoFrames() { // Exit loop if desired number of frames have been extracted @@ -228,24 +235,6 @@ export default { console.log(this.frames); }, // TODO: scrubbing preview end - seek(e) { - // console.log(`scrubbing ${e}`); - let vid = this.$refs.playerfake; - let canvas = this.$refs.preview; - this.$refs.playerfake.currentTime = e; - canvas - .getContext("2d") - .drawImage( - vid, - 0, - 0, - this.video.clientWidth / 3, - this.video.clientHeight / 3 - ); - }, - scrub(e) { - this.video.currentTime = e; - }, }, }; diff --git a/NUXT/components/Player/speed.vue b/NUXT/components/Player/speed.vue index 8ebf423..26ef7f3 100644 --- a/NUXT/components/Player/speed.vue +++ b/NUXT/components/Player/speed.vue @@ -18,13 +18,25 @@ {{ video.playbackRate }}X - - Playback Speed + + + Playback Speed + + mdi-close + + + +
+ +
+ + + + + diff --git a/NUXT/components/Player/watchtime.vue b/NUXT/components/Player/watchtime.vue index 496810b..dd23cac 100644 --- a/NUXT/components/Player/watchtime.vue +++ b/NUXT/components/Player/watchtime.vue @@ -1,12 +1,7 @@