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

111 lines
3.0 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
v-if="isLive || duration !== '0:00'"
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
>
{{ isLive ? $t("Video.Live") : duration }}
2020-06-23 17:47:19 +02:00
</div>
<ft-icon-button
2020-02-16 19:30:00 +01:00
v-if="!isLive"
icon="star"
class="favoritesIcon"
2020-07-10 03:22:13 +02:00
:padding="appearance === `watchPlaylistItem` ? 5 : 6"
:size="appearance === `watchPlaylistItem` ? 14 : 18"
2020-02-16 19:30:00 +01:00
:class="{ favorited: isFavorited }"
@click="toggleSave(id)"
/>
<div
v-if="watched"
class="videoWatched"
>
{{ $t("Video.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>
2020-10-09 03:53:34 +02:00
<template v-if="!isLive && !isUpcoming && !hideViews">
<span class="viewCount"> {{ parsedViewCount }}</span>
<span v-if="viewCount === 1">{{ $t("Video.View").toLowerCase() }}</span>
<span v-else>{{ $t("Video.Views").toLowerCase() }}</span>
</template>
2020-06-23 18:39:26 +02:00
<span
v-if="uploadedTime !== '' && !isLive && !inHistory"
2020-06-23 18:39:26 +02:00
class="uploadedTime"
> {{ uploadedTime }}</span>
<span
v-if="inHistory"
class="uploadedTime"
> {{ publishedText }}</span>
2020-06-23 18:39:26 +02:00
<span
v-if="isLive && !hideViews"
2020-06-23 18:39:26 +02:00
class="viewCount"
> {{ parsedViewCount }} {{ $t("Video.Watching").toLowerCase() }}</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" />