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 @@
{{ watched }}
/ {{ duration }}
@@ -15,7 +10,16 @@