FreeTube/src/renderer/components/ft-list-video/ft-list-video.vue

105 lines
2.5 KiB
Vue
Raw Normal View History

2020-02-16 19:30:00 +01:00
<template>
<div
2020-06-23 18:08:24 +02:00
class="ft-list-video ft-list-item"
2020-02-16 19:30:00 +01:00
:class="{
list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
2020-06-23 17:47:19 +02:00
grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
[appearance]: true
2020-02-16 19:30:00 +01:00
}"
>
2020-06-23 17:47:19 +02:00
<div
class="videoThumbnail"
>
<router-link
class="thumbnailLink"
:to="{
path: `/watch/${id}`,
query: playlistId ? {playlistId} : {}
}"
2020-02-16 19:30:00 +01:00
>
2020-06-23 17:47:19 +02:00
<img
:src="thumbnail"
class="thumbnailImage"
>
</router-link>
<div
2020-02-16 19:30:00 +01:00
class="videoDuration"
2020-06-23 17:47:19 +02:00
:class="{ live: isLive }"
2020-02-16 19:30:00 +01:00
>
2020-06-23 17:47:19 +02:00
{{ isLive ? "Live" : duration }}
</div>
<ft-icon-button
2020-02-16 19:30:00 +01:00
v-if="!isLive"
icon="star"
class="favoritesIcon"
2020-06-23 17:47:19 +02:00
:padding="6"
:size="18"
2020-02-16 19:30:00 +01:00
:class="{ favorited: isFavorited }"
@click="toggleSave(id)"
/>
<div
v-if="watched"
class="videoWatched"
>
2020-06-23 17:47:19 +02:00
Watched
2020-02-16 19:30:00 +01:00
</div>
<div
v-if="watched"
class="watchedProgressBar"
:style="{width: progressPercentage + '%'}"
/>
</div>
2020-06-23 18:08:24 +02:00
<div class="info">
2020-06-23 17:47:19 +02:00
<ft-icon-button
class="optionsButton"
title="More Options"
theme="base"
:size="16"
:use-shadow="false"
dropdown-position-x="left"
:dropdown-names="optionsNames"
:dropdown-values="optionsValues"
@click="handleOptionsClick"
/>
<router-link
class="title"
:to="{
path: `/watch/${id}`,
query: playlistId ? {playlistId} : {}
}"
>
{{ title }}
</router-link>
<div class="infoLine">
2020-06-23 18:39:26 +02:00
<router-link
class="channelName"
:to="`/channel/${channelId}`"
>
<span>{{ channelName }}</span>
</router-link>
<span
v-if="!isLive && !hideViews"
class="viewCount"
> {{ viewCount }} views</span>
<span
v-if="uploadedTime !== '' && !isLive"
class="uploadedTime"
> {{ uploadedTime }}</span>
<span
v-if="isLive"
class="viewCount"
> {{ viewCount }} watching</span>
2020-06-23 17:47:19 +02:00
</div>
<p
v-if="listType !== 'grid' && appearance === 'result'"
class="description"
>
{{ description }}
</p>
</div>
2020-02-16 19:30:00 +01:00
</div>
</template>
<script src="./ft-list-video.js" />
2020-06-23 17:47:19 +02:00
<style scoped src="./ft-list-video.sass" lang="sass" />