TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add audio only buttons.

Browse source
This commit is contained in:
FireMasterK 2021-06-17 00:44:46 +05:30
parent 339337554d
commit 691b7257e3
5 changed files with 72 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/Channel.vue
View file

@ -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>

22
src/components/Playlist.vue
View file

@ -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>

30
src/components/TrendingPage.vue
View file

@ -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
View 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>

4
src/main.js
View file

@ -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");