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,15 +73,21 @@
/> />
<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>
<button <div class="relative ml-auto children:mx-2">
v-if="authenticated" <button class="btn" v-if="authenticated" @click="showModal = !showModal">
class="btn relative ml-auto" {{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
@click="subscribeHandler" </button>
v-t="{ <button
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`, class="btn"
args: { count: numberFormat(video.uploaderSubscriberCount) }, v-if="authenticated"
}" @click="subscribeHandler"
/> v-t="{
path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
args: { count: numberFormat(video.uploaderSubscriberCount) },
}"
/>
</div>
<PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
</div> </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: {