mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #262 from 404-Program-not-found/main
Refactored Video selection rendering to be more consistent
This commit is contained in:
commit
470533a622
|
@ -1,136 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card
|
<base-video-renderer
|
||||||
class="entry gridVideoRenderer background"
|
:vidId="video.videoId"
|
||||||
:to="`/watch?v=${video.videoId}`"
|
:thumbnails="video.thumbnail.thumbnails"
|
||||||
flat
|
:thumbnailOverlayStyle="thumbnailOverlayStyle"
|
||||||
|
:thumbnailOverlayText="thumbnailOverlayText"
|
||||||
|
:channelUrl="
|
||||||
|
this.$rendererUtils.getNavigationEndpoints(video.shortBylineText.runs[0])
|
||||||
|
"
|
||||||
|
:channelIcon="video.channelThumbnail.thumbnails[0].url"
|
||||||
|
:titles="video.title.runs"
|
||||||
|
:bottomText="parseBottom(video)"
|
||||||
>
|
>
|
||||||
<div style="position: relative" class="thumbnail-container">
|
</base-video-renderer>
|
||||||
<v-img
|
|
||||||
:aspect-ratio="16 / 9"
|
|
||||||
:src="
|
|
||||||
$youtube.getThumbnail(
|
|
||||||
video.videoId,
|
|
||||||
'max',
|
|
||||||
video.thumbnail.thumbnails
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="videoRuntimeFloat"
|
|
||||||
:class="
|
|
||||||
'style-' +
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
|
|
||||||
"
|
|
||||||
style="color: #fff"
|
|
||||||
v-text="
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
|
|
||||||
.runs[0].text
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="details">
|
|
||||||
<a
|
|
||||||
:href="
|
|
||||||
this.$rendererUtils.getNavigationEndpoints(
|
|
||||||
video.shortBylineText.runs[0]
|
|
||||||
)
|
|
||||||
"
|
|
||||||
class="avatar-link pt-2"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
class="avatar-thumbnail"
|
|
||||||
:src="video.channelThumbnail.thumbnails[0].url"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<v-card-text class="video-info pt-2" v-emoji>
|
|
||||||
<div
|
|
||||||
v-for="title in video.title.runs"
|
|
||||||
:key="title.text"
|
|
||||||
style="margin-top: 0.5em"
|
|
||||||
class="font-weight-medium vid-title"
|
|
||||||
>
|
|
||||||
{{ title.text }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="background--text caption"
|
|
||||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
|
||||||
v-text="parseBottom(video)"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
|
||||||
</div>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.entry {
|
|
||||||
width: 100%; /* Prevent Loading Weirdness */
|
|
||||||
}
|
|
||||||
.videoRuntimeFloat {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
right: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0px 4px 0px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-DEFAULT {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-LIVE {
|
|
||||||
background: rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vid-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-basis: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (orientation: landscape) {
|
|
||||||
.entry {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.thumbnail-container {
|
|
||||||
width: 50vh;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#details {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.video-info {
|
|
||||||
padding-top: 0 !important;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
|
||||||
export default {
|
export default {
|
||||||
props: ["video"],
|
props: ["video"],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
baseVideoRenderer,
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
thumbnailOverlayText() {
|
||||||
|
return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
|
||||||
|
?.text.runs[0].text;
|
||||||
|
},
|
||||||
|
thumbnailOverlayStyle() {
|
||||||
|
return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
|
||||||
|
?.style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
parseBottom(video) {
|
parseBottom(video) {
|
||||||
const bottomText = [
|
const bottomText = [
|
||||||
|
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<v-card class="entry videoRenderer background" :to="`/watch?v=${vidId}`" flat>
|
||||||
|
<div style="position: relative" class="thumbnail-container">
|
||||||
|
<v-img
|
||||||
|
:aspect-ratio="16 / 9"
|
||||||
|
:src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="thumbnailOverlayText && thumbnailOverlayStyle"
|
||||||
|
class="videoRuntimeFloat"
|
||||||
|
:class="'style-' + thumbnailOverlayStyle"
|
||||||
|
style="color: #fff"
|
||||||
|
v-text="thumbnailOverlayText"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="details">
|
||||||
|
<a :href="channelUrl" class="avatar-link pt-2">
|
||||||
|
<v-img class="avatar-thumbnail" :src="channelIcon" />
|
||||||
|
</a>
|
||||||
|
<v-card-text class="video-info pt-2" v-emoji>
|
||||||
|
<span
|
||||||
|
v-for="title in titles"
|
||||||
|
:key="title.text"
|
||||||
|
style="margin-top: 0.5em"
|
||||||
|
class="font-weight-medium vid-title"
|
||||||
|
>
|
||||||
|
{{ title.text }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="background--text text--lighten-5 caption"
|
||||||
|
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||||
|
v-text="bottomText"
|
||||||
|
/>
|
||||||
|
</v-card-text>
|
||||||
|
</div>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.entry {
|
||||||
|
width: 100%; /* Prevent Loading Weirdness */
|
||||||
|
}
|
||||||
|
.videoRuntimeFloat {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0px 4px 0px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoRuntimeFloat.style-DEFAULT {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoRuntimeFloat.style-LIVE {
|
||||||
|
background: rgba(255, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vid-title {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-thumbnail {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (orientation: landscape) {
|
||||||
|
.entry {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.thumbnail-container {
|
||||||
|
width: 50vh;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#details {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
.avatar-thumbnail {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.video-info {
|
||||||
|
padding-top: 0 !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
vidId: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
thumbnails: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
channelUrl: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
channelIcon: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
titles: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
bottomText: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
thumbnailOverlayText: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
thumbnailOverlayStyle: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,138 +1,41 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card
|
<base-video-renderer
|
||||||
class="entry gridVideoRenderer background"
|
:vidId="video.videoId"
|
||||||
:to="`/watch?v=${video.videoId}`"
|
:thumbnails="video.thumbnail.thumbnails"
|
||||||
flat
|
:thumbnailOverlayStyle="thumbnailOverlayStyle"
|
||||||
|
:thumbnailOverlayText="thumbnailOverlayText"
|
||||||
|
:channelUrl="
|
||||||
|
$rendererUtils.getNavigationEndpoints(
|
||||||
|
video.shortBylineText.runs[0].navigationEndpoint
|
||||||
|
)
|
||||||
|
"
|
||||||
|
:channelIcon="video.channelThumbnail.thumbnails[0].url"
|
||||||
|
:titles="video.title.runs"
|
||||||
|
:bottomText="parseBottom(video)"
|
||||||
>
|
>
|
||||||
<div style="position: relative" class="thumbnail-container">
|
</base-video-renderer>
|
||||||
<v-img
|
|
||||||
v-if="video.thumbnail"
|
|
||||||
:aspect-ratio="16 / 9"
|
|
||||||
:src="
|
|
||||||
$youtube.getThumbnail(
|
|
||||||
video.videoId,
|
|
||||||
'max',
|
|
||||||
video.thumbnail.thumbnails
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="video.thumbnailOverlays"
|
|
||||||
class="videoRuntimeFloat"
|
|
||||||
:class="
|
|
||||||
'style-' +
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
|
|
||||||
"
|
|
||||||
style="color: #fff"
|
|
||||||
v-text="
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
|
|
||||||
.runs[0].text
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="details">
|
|
||||||
<a
|
|
||||||
:href="
|
|
||||||
$rendererUtils.getNavigationEndpoints(
|
|
||||||
video.shortBylineText.runs[0].navigationEndpoint
|
|
||||||
)
|
|
||||||
"
|
|
||||||
class="avatar-link pt-2"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
class="avatar-thumbnail"
|
|
||||||
:src="video.channelThumbnail.thumbnails[0].url"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<v-card-text class="video-info pt-2" v-emoji>
|
|
||||||
<div
|
|
||||||
v-for="title in video.title.runs"
|
|
||||||
:key="title.text"
|
|
||||||
style="margin-top: 0.5em"
|
|
||||||
class="font-weight-medium vid-title"
|
|
||||||
>
|
|
||||||
{{ title.text }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="background--text text--lighten-5 caption"
|
|
||||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
|
||||||
v-text="parseBottom(video)"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
|
||||||
</div>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.entry {
|
|
||||||
width: 100%; /* Prevent Loading Weirdness */
|
|
||||||
}
|
|
||||||
.videoRuntimeFloat {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
right: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0px 4px 0px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-DEFAULT {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-LIVE {
|
|
||||||
background: rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vid-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-basis: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (orientation: landscape) {
|
|
||||||
.entry {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.thumbnail-container {
|
|
||||||
width: 50vh;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#details {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.video-info {
|
|
||||||
padding-top: 0 !important;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
|
||||||
export default {
|
export default {
|
||||||
props: ["video"],
|
props: ["video"],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
baseVideoRenderer,
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
thumbnailOverlayText() {
|
||||||
|
return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
|
||||||
|
?.text.runs[0].text;
|
||||||
|
},
|
||||||
|
thumbnailOverlayStyle() {
|
||||||
|
return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
|
||||||
|
?.style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
parseBottom(video) {
|
parseBottom(video) {
|
||||||
const bottomText = [
|
const bottomText = [
|
||||||
|
|
|
@ -1,141 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card
|
<base-video-renderer
|
||||||
class="entry videoWithContextRenderer background"
|
:vidId="video.videoId"
|
||||||
:to="`/watch?v=${video.videoId}`"
|
:thumbnails="video.thumbnail.thumbnails"
|
||||||
flat
|
:thumbnailOverlayStyle="thumbnailOverlayStyle"
|
||||||
|
:thumbnailOverlayText="thumbnailOverlayText"
|
||||||
|
:channelUrl="
|
||||||
|
$rendererUtils.getNavigationEndpoints(
|
||||||
|
video.shortBylineText.runs[0].navigationEndpoint
|
||||||
|
)
|
||||||
|
"
|
||||||
|
:channelIcon="
|
||||||
|
video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
|
||||||
|
.thumbnails[0].url
|
||||||
|
"
|
||||||
|
:titles="video.headline.runs"
|
||||||
|
:bottomText="parseBottom(video)"
|
||||||
>
|
>
|
||||||
<div style="position: relative" class="thumbnail-container">
|
</base-video-renderer>
|
||||||
<v-img
|
|
||||||
v-if="video.thumbnail"
|
|
||||||
:aspect-ratio="16 / 9"
|
|
||||||
:src="
|
|
||||||
$youtube.getThumbnail(
|
|
||||||
video.videoId,
|
|
||||||
'max',
|
|
||||||
video.thumbnail.thumbnails
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="video.thumbnailOverlays"
|
|
||||||
class="videoRuntimeFloat"
|
|
||||||
:class="
|
|
||||||
'style-' +
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
|
|
||||||
"
|
|
||||||
style="color: #fff"
|
|
||||||
v-text="
|
|
||||||
video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
|
|
||||||
.runs[0].text
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="details">
|
|
||||||
<a
|
|
||||||
:href="
|
|
||||||
$rendererUtils.getNavigationEndpoints(
|
|
||||||
video.shortBylineText.runs[0].navigationEndpoint
|
|
||||||
)
|
|
||||||
"
|
|
||||||
class="avatar-link pt-2"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
class="avatar-thumbnail"
|
|
||||||
:src="
|
|
||||||
video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
|
|
||||||
.thumbnails[0].url
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<v-card-text class="video-info pt-2" v-emoji>
|
|
||||||
<div
|
|
||||||
v-for="title in video.headline.runs"
|
|
||||||
:key="title.text"
|
|
||||||
style="margin-top: 0.5em"
|
|
||||||
class="font-weight-medium vid-title"
|
|
||||||
>
|
|
||||||
{{ title.text }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="background--text text--lighten-5 caption"
|
|
||||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
|
||||||
v-text="parseBottom(video)"
|
|
||||||
/>
|
|
||||||
</v-card-text>
|
|
||||||
</div>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.entry {
|
|
||||||
width: 100%; /* Prevent Loading Weirdness */
|
|
||||||
}
|
|
||||||
.videoRuntimeFloat {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
right: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 0px 4px 0px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-DEFAULT {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.videoRuntimeFloat.style-LIVE {
|
|
||||||
background: rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vid-title {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 35px;
|
|
||||||
height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-basis: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (orientation: landscape) {
|
|
||||||
.entry {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.thumbnail-container {
|
|
||||||
width: 50vh;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#details {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
.avatar-thumbnail {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.video-info {
|
|
||||||
padding-top: 0 !important;
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
|
||||||
export default {
|
export default {
|
||||||
props: ["video"],
|
props: ["video"],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
baseVideoRenderer,
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
thumbnailOverlayText() {
|
||||||
|
return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
|
||||||
|
.text.runs[0].text;
|
||||||
|
},
|
||||||
|
thumbnailOverlayStyle() {
|
||||||
|
return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
|
||||||
|
.style;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
parseBottom(video) {
|
parseBottom(video) {
|
||||||
const bottomText = [
|
const bottomText = [
|
||||||
|
|
Loading…
Reference in New Issue