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

102 lines
2.1 KiB
Vue
Raw Normal View History

2020-02-16 19:30:00 +01:00
<template>
<div
class="ft-list-video"
:class="{
list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list'
}"
>
<div class="videoThumbnail">
<img
:src="thumbnail"
@click="play(id)"
>
<p
v-if="!isLive"
class="videoDuration"
@click="play(id)"
>
{{ duration }}
</p>
<font-awesome-icon
v-if="!isLive"
icon="star"
class="favoritesIcon"
:class="{ favorited: isFavorited }"
@click="toggleSave(id)"
/>
<div
v-if="watched"
class="videoWatched"
>
WATCHED
</div>
<div
v-if="watched"
class="watchedProgressBar"
:style="{width: progressPercentage + '%'}"
/>
</div>
<ft-icon-button
class="optionsButton"
title="More Options"
theme="base"
:use-shadow="false"
dropdown-position-x="left"
:dropdown-names="optionsNames"
:dropdown-values="optionsValues"
@click="handleOptionsClick"
/>
<p
class="videoTitle"
@click="play(id)"
>
2020-02-16 19:30:00 +01:00
{{ title }}
</p>
<p
class="channelName"
@click="goToChannel"
>
{{ channelName }}
</p>
<span
v-if="!isLive && !hideViews"
class="viewCount"
@click="play(id)"
2020-02-16 19:30:00 +01:00
>
{{ viewCount }} views
</span>
<span
v-if="uploadedTime !== '' && !isLive"
class="uploadedTime"
@click="play(id)"
2020-02-16 19:30:00 +01:00
>
- {{ uploadedTime }}
</span>
<span
v-if="isLive"
class="viewCount"
@click="play(id)"
2020-02-16 19:30:00 +01:00
>
{{ viewCount }} watching
</span>
<p
v-if="listType !== 'grid'"
class="description"
@click="play(id)"
2020-02-16 19:30:00 +01:00
>
{{ description }}
</p>
<span
v-if="isLive"
class="liveText"
@click="play(id)"
2020-02-16 19:30:00 +01:00
>
LIVE NOW
</span>
</div>
</template>
<script src="./ft-list-video.js" />
<style scoped src="./ft-list-video.css" />