110 lines
2 KiB
Vue
110 lines
2 KiB
Vue
|
<template>
|
||
|
<div class="media-youtube-browser">
|
||
|
<Loading v-if="loading" />
|
||
|
|
||
|
<div class="browser" v-else>
|
||
|
<MediaNav :path="computedPath" @back="$emit('back')" />
|
||
|
<NoToken v-if="!authToken" />
|
||
|
|
||
|
<div class="body" v-else>
|
||
|
<Feed @play="$emit('play', $event)" v-if="selectedView === 'feed'" />
|
||
|
<Index @select="selectView" v-else />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import Loading from "@/components/Loading";
|
||
|
import MediaNav from "./Nav";
|
||
|
import MediaProvider from "./Mixin";
|
||
|
|
||
|
import Feed from "./YouTube/Feed";
|
||
|
import Index from "./YouTube/Index";
|
||
|
import NoToken from "./YouTube/NoToken";
|
||
|
|
||
|
export default {
|
||
|
mixins: [MediaProvider],
|
||
|
components: {
|
||
|
Feed,
|
||
|
Index,
|
||
|
Loading,
|
||
|
MediaNav,
|
||
|
NoToken,
|
||
|
},
|
||
|
|
||
|
data() {
|
||
|
return {
|
||
|
youtubeConfig: null,
|
||
|
selectedView: null,
|
||
|
path: [],
|
||
|
}
|
||
|
},
|
||
|
|
||
|
computed: {
|
||
|
authToken() {
|
||
|
return this.youtubeConfig?.auth_token
|
||
|
},
|
||
|
|
||
|
computedPath() {
|
||
|
return [
|
||
|
{
|
||
|
title: 'YouTube',
|
||
|
click: () => this.selectView(null),
|
||
|
icon: {
|
||
|
class: 'fab fa-youtube',
|
||
|
},
|
||
|
},
|
||
|
...this.path,
|
||
|
]
|
||
|
},
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
async loadYoutubeConfig() {
|
||
|
this.loading = true
|
||
|
try {
|
||
|
this.youtubeConfig = (await this.request('config.get_plugins')).youtube
|
||
|
} finally {
|
||
|
this.loading = false
|
||
|
}
|
||
|
},
|
||
|
|
||
|
selectView(view) {
|
||
|
this.selectedView = view
|
||
|
if (view?.length) {
|
||
|
this.path = [
|
||
|
{
|
||
|
title: view.slice(0, 1).toUpperCase() + view.slice(1),
|
||
|
},
|
||
|
]
|
||
|
} else {
|
||
|
this.path = []
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
|
||
|
mounted() {
|
||
|
this.loadYoutubeConfig()
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
@import "../style.scss";
|
||
|
|
||
|
.media-youtube-browser {
|
||
|
height: 100%;
|
||
|
|
||
|
.browser {
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
.body {
|
||
|
height: calc(100% - $media-nav-height - 2px);
|
||
|
margin-top: 2px;
|
||
|
overflow: auto;
|
||
|
}
|
||
|
}
|
||
|
</style>
|