Add option to loop current video.

This commit is contained in:
FireMasterK 2021-07-05 00:12:10 +05:30
parent 7a77534098
commit 6b0cb2352b
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
2 changed files with 20 additions and 3 deletions

View file

@ -5,7 +5,13 @@
style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px; background: #000"
ref="container"
>
<video data-shaka-player class="uk-width-expand" :autoplay="shouldAutoPlay" ref="videoEl"></video>
<video
data-shaka-player
class="uk-width-expand"
:autoplay="shouldAutoPlay"
:loop="selectedAutoLoop"
ref="videoEl"
></video>
</div>
</div>
</template>
@ -21,6 +27,7 @@ export default {
video: Object,
sponsors: Object,
selectedAutoPlay: Boolean,
selectedAutoLoop: Boolean,
},
computed: {
shouldAutoPlay: _this => {
@ -109,7 +116,7 @@ export default {
});
videoEl.addEventListener("ended", () => {
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
if (!this.selectedAutoLoop && this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
const params = this.$route.query;
let url = this.video.relatedStreams[0].url;
const searchParams = new URLSearchParams();

View file

@ -3,7 +3,13 @@
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
<div v-show="!video.error">
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
<Player
ref="videoPlayer"
:video="video"
:sponsors="sponsors"
:selectedAutoPlay="selectedAutoPlay"
:selectedAutoLoop="selectedAutoLoop"
/>
<h1 class="uk-text-bold">{{ video.title }}</h1>
<div uk-grid>
@ -48,6 +54,9 @@
<hr />
<b>Loop this Video:</b>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
<br />
<b>Auto Play next Video:</b>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
@ -118,6 +127,7 @@ export default {
title: "Loading...",
},
sponsors: null,
selectedAutoLoop: false,
selectedAutoPlay: null,
showDesc: true,
comments: null,