Piped/src/components/Channel.vue

80 lines
2.3 KiB
Vue
Raw Normal View History

<template>
2020-11-17 05:15:35 +00:00
<div v-if="channel">
<h1 class="uk-text-center">
<img v-bind:src="channel.avatarUrl" />{{ channel.name }}
</h1>
<img v-bind:src="channel.bannerUrl" style="width: 100%" />
<p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
2020-11-13 11:57:11 +00:00
2020-11-17 05:15:35 +00:00
<hr />
2020-11-13 11:57:11 +00:00
2020-11-17 05:15:35 +00:00
<div class="uk-grid-small" style="width: 100%" uk-grid="parallax: 0">
<div
style="width: 288px"
v-bind:key="item.url"
v-for="item in this.channel.relatedStreams"
>
<router-link
class="uk-link-muted"
style="height: 100px"
v-bind:to="item.url || '/'"
>
<img style="width: 100%" v-bind:src="item.thumbnail" />
<a>{{ item.title }}</a>
</router-link>
<br />
<a>{{ timeFormat(item.duration) }}</a>
</div>
</div>
</div>
</template>
<script>
import Constants from "@/Constants.js";
export default {
data() {
return {
2020-11-17 05:15:35 +00:00
channel: null
};
},
mounted() {
2020-11-17 05:15:35 +00:00
this.getChannelData();
},
methods: {
async fetchChannel() {
return await (
2020-11-17 05:15:35 +00:00
await fetch(
Constants.BASE_URL +
"/channels/" +
this.$route.params.channelId
)
).json();
},
async getChannelData() {
2020-11-17 05:15:35 +00:00
this.fetchChannel()
.then(data => (this.channel = data))
.then(() => (document.title = this.channel.name + " - Piped"));
},
timeFormat(duration) {
2020-11-17 05:15:35 +00:00
var pad = function(num, size) {
return ("000" + num).slice(size * -1);
};
var time = parseFloat(duration).toFixed(3),
hours = Math.floor(time / 60 / 60),
minutes = Math.floor(time / 60) % 60,
seconds = Math.floor(time - minutes * 60);
var str = "";
2020-11-17 05:15:35 +00:00
if (hours > 0) str += pad(hours, 2) + ":";
2020-11-17 05:15:35 +00:00
str += pad(minutes, 2) + ":" + pad(seconds, 2);
return str;
}
}
2020-11-17 05:15:35 +00:00
};
</script>