Add button to add to playlist when watching.

This commit is contained in:
Kavin 2022-04-07 16:48:03 +01:00
parent 54e947fda7
commit 6a05acf939
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD

View File

@ -73,9 +73,13 @@
/> />
<font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" /> <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
</div> </div>
<div class="relative ml-auto children:mx-2">
<button class="btn" v-if="authenticated" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
</button>
<button <button
class="btn"
v-if="authenticated" v-if="authenticated"
class="btn relative ml-auto"
@click="subscribeHandler" @click="subscribeHandler"
v-t="{ v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`, path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
@ -83,6 +87,8 @@
}" }"
/> />
</div> </div>
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
</div>
<hr /> <hr />
@ -149,6 +155,7 @@ import VideoItem from "@/components/VideoItem.vue";
import ErrorHandler from "@/components/ErrorHandler.vue"; import ErrorHandler from "@/components/ErrorHandler.vue";
import CommentItem from "@/components/CommentItem.vue"; import CommentItem from "@/components/CommentItem.vue";
import Chapters from "@/components/Chapters.vue"; import Chapters from "@/components/Chapters.vue";
import PlaylistAddModal from "./PlaylistAddModal.vue";
export default { export default {
name: "App", name: "App",
@ -158,6 +165,7 @@ export default {
ErrorHandler, ErrorHandler,
CommentItem, CommentItem,
Chapters, Chapters,
PlaylistAddModal,
}, },
data() { data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)"); const smallViewQuery = window.matchMedia("(max-width: 640px)");
@ -176,6 +184,7 @@ export default {
active: true, active: true,
smallViewQuery: smallViewQuery, smallViewQuery: smallViewQuery,
smallView: smallViewQuery.matches, smallView: smallViewQuery.matches,
showModal: false,
}; };
}, },
computed: { computed: {