160 lines
3.5 KiB
Vue
160 lines
3.5 KiB
Vue
<template>
|
|
<div class="row" v-if="item?.title">
|
|
<div class="left side">Title</div>
|
|
<div class="right side">
|
|
<a :href="`https://www.imdb.com/title/${item.imdb_id}`" target="_blank" v-if="item.imdb_id"
|
|
v-text="item.title" />
|
|
<span v-else v-text="item.title" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.synopsis">
|
|
<div class="left side">Synopsis</div>
|
|
<div class="right side" v-text="item.synopsis" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.description">
|
|
<div class="left side">Description</div>
|
|
<div class="right side" v-text="item.description" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.channelId">
|
|
<div class="left side">Channel</div>
|
|
<div class="right side">
|
|
<a :href="`https://www.youtube.com/channel/${item.channelId}`" target="_blank"
|
|
v-text="item.channelTitle || `https://www.youtube.com/channel/${item.channelId}`" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.year">
|
|
<div class="left side">Year</div>
|
|
<div class="right side" v-text="item.year" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.publishedAt">
|
|
<div class="left side">Published at</div>
|
|
<div class="right side" v-text="formatDate(item.publishedAt, true)" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.file">
|
|
<div class="left side">File</div>
|
|
<div class="right side" v-text="item.file" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.url">
|
|
<div class="left side">URL</div>
|
|
<div class="right side url">
|
|
<a :href="item.url" target="_blank" v-text="item.url" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.trailer">
|
|
<div class="left side">Trailer</div>
|
|
<div class="right side url">
|
|
<a :href="item.trailer" target="_blank" v-text="item.trailer" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.size">
|
|
<div class="left side">Size</div>
|
|
<div class="right side" v-text="convertSize(item.size)" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.quality">
|
|
<div class="left side">Quality</div>
|
|
<div class="right side" v-text="item.quality" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.seeds">
|
|
<div class="left side">Seeds</div>
|
|
<div class="right side" v-text="item.seeds" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.peers">
|
|
<div class="left side">Peers</div>
|
|
<div class="right side" v-text="item.peers" />
|
|
</div>
|
|
|
|
<div class="row" v-if="item?.language">
|
|
<div class="left side">Language</div>
|
|
<div class="right side" v-text="item.language" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Utils from "@/Utils";
|
|
|
|
export default {
|
|
name: "Info",
|
|
mixins: [Utils],
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => {},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.row {
|
|
display: flex;
|
|
min-height: 3em;
|
|
padding: .5em 1em;
|
|
|
|
@include until ($tablet) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
@include from ($tablet) {
|
|
align-items: center;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: $default-border-2;
|
|
}
|
|
|
|
&:hover {
|
|
background: $hover-bg;
|
|
border-radius: .5em;
|
|
}
|
|
|
|
.side {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
|
|
&.url {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@include until ($tablet) {
|
|
display: flex;
|
|
|
|
&.left {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&.right {
|
|
justify-content: left;
|
|
}
|
|
}
|
|
|
|
@include from ($tablet) {
|
|
display: inline-flex;
|
|
|
|
&.left {
|
|
width: 22%;
|
|
margin-right: 3%;
|
|
}
|
|
|
|
&.right {
|
|
width: 75%;
|
|
justify-content: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|