mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Add audio only buttons.
This commit is contained in:
parent
eae3ca3603
commit
426c5669f0
@ -11,25 +11,10 @@
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
|
||||
v-bind:key="item.url"
|
||||
v-for="item in this.channel.relatedStreams"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in this.channel.relatedStreams"
|
||||
>
|
||||
<router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
|
||||
<img height="94" width="168" style="width: 100%" v-bind:src="item.thumbnail" loading="lazy" />
|
||||
<a>{{ item.title }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
<div>
|
||||
<b class="uk-text-small uk-align-left">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(item.views) }} views
|
||||
<br />
|
||||
{{ item.uploadedDate }}
|
||||
</b>
|
||||
<b class="uk-text-small uk-align-right">
|
||||
{{ timeFormat(item.duration) }}
|
||||
</b>
|
||||
</div>
|
||||
<VideoItem :video="video" height="94" width="168" hideChannel />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,6 +23,7 @@
|
||||
<script>
|
||||
import Constants from "@/Constants.js";
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -87,6 +73,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -21,24 +21,10 @@
|
||||
<div class="uk-grid-xl" uk-grid="parallax: 0">
|
||||
<div
|
||||
class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
|
||||
v-bind:key="item.url"
|
||||
v-for="item in this.playlist.relatedStreams"
|
||||
v-bind:key="video.url"
|
||||
v-for="video in this.playlist.relatedStreams"
|
||||
>
|
||||
<router-link class="uk-link-muted uk-text-justify" v-bind:to="item.url || '/'">
|
||||
<img style="width: 100%" height="94" width="168" v-bind:src="item.thumbnail" loading="lazy" />
|
||||
<a>{{ item.title }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
<div>
|
||||
<b class="uk-text-small uk-align-left">
|
||||
<router-link class="uk-text-justify" v-bind:to="item.uploaderUrl || '/'">{{
|
||||
item.uploaderName
|
||||
}}</router-link>
|
||||
</b>
|
||||
<b class="uk-text-small uk-align-right">
|
||||
{{ timeFormat(item.duration) }}
|
||||
</b>
|
||||
</div>
|
||||
<VideoItem :video="video" height="94" width="168" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,6 +33,7 @@
|
||||
<script>
|
||||
import Constants from "@/Constants.js";
|
||||
import ErrorHandler from "@/components/ErrorHandler.vue";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -87,6 +74,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
ErrorHandler,
|
||||
VideoItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -10,37 +10,14 @@
|
||||
v-bind:key="video.url"
|
||||
v-for="video in videos"
|
||||
>
|
||||
<div class="uk-text-secondary" style="background: #0b0e0f">
|
||||
<router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
|
||||
<img
|
||||
height="118"
|
||||
width="210"
|
||||
style="width: 100%"
|
||||
v-bind:src="video.thumbnail"
|
||||
alt="thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>{{ video.title }}</p>
|
||||
</router-link>
|
||||
<router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
|
||||
<p>{{ video.uploaderName }}</p>
|
||||
</router-link>
|
||||
<b class="uk-text-small uk-align-left">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(video.views) }} views
|
||||
<br />
|
||||
{{ video.uploadedDate }}
|
||||
</b>
|
||||
<b class="uk-text-small uk-align-right">
|
||||
{{ timeFormat(video.duration) }}
|
||||
</b>
|
||||
</div>
|
||||
<VideoItem :video="video" height="118" width="210" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Constants from "@/Constants.js";
|
||||
import VideoItem from "@/components/VideoItem.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -58,5 +35,8 @@ export default {
|
||||
return await this.fetchJson(Constants.BASE_URL + "/trending");
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VideoItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
55
src/components/VideoItem.vue
Normal file
55
src/components/VideoItem.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="uk-text-secondary" style="background: #0b0e0f">
|
||||
<router-link class="uk-text-emphasis" v-bind:to="video.url">
|
||||
<img
|
||||
:height="height"
|
||||
:width="width"
|
||||
style="width: 100%"
|
||||
v-bind:src="video.thumbnail"
|
||||
alt="thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
<p>{{ video.title }}</p>
|
||||
</router-link>
|
||||
|
||||
<div :class="{ 'uk-align-left': !(video.views >= 0 || video.uploadedDate) }">
|
||||
<div v-if="video.uploaderUrl && video.uploaderName && !hideChannel">
|
||||
<router-link class="uk-link-muted" :to="video.uploaderUrl">
|
||||
<a>{{ video.uploaderName }}</a>
|
||||
</router-link>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small uk-align-left">
|
||||
<div v-if="video.views >= 0">
|
||||
<font-awesome-icon icon="eye"></font-awesome-icon>
|
||||
{{ numberFormat(video.views) }} views
|
||||
<br />
|
||||
</div>
|
||||
<div v-if="video.uploadedDate">
|
||||
{{ video.uploadedDate }}
|
||||
</div>
|
||||
</b>
|
||||
<div class="uk-align-right">
|
||||
<b class="uk-text-small">{{ timeFormat(video.duration) }}</b>
|
||||
|
||||
<br />
|
||||
|
||||
<router-link :to="video.url + '&listen=1'">
|
||||
<font-awesome-icon icon="headphones"></font-awesome-icon>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
video: Object,
|
||||
height: String,
|
||||
width: String,
|
||||
hideChannel: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
@ -1,9 +1,9 @@
|
||||
import { createApp } from "vue";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faThumbsUp, faThumbsDown, faEye, faThumbtack, faCheck, faHeart, faHeadphones } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart);
|
||||
library.add(faThumbsUp, faThumbsDown, faEye, faGithub, faBitcoin, faThumbtack, faCheck, faHeart, faHeadphones);
|
||||
|
||||
import("uikit/dist/css/uikit-core.css");
|
||||
import("uikit/dist/js/uikit-core.min");
|
||||
|
Loading…
Reference in New Issue
Block a user