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

124 lines
3.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,
watched: addWatchedStyle
2020-02-16 19:30:00 +01:00
}"
>
2020-06-23 17:47:19 +02:00
<div
class="videoThumbnail"
>
<router-link
class="thumbnailLink"
tabindex="-1"
2020-06-23 17:47:19 +02:00
: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>
Add support for External Players (closes #418) (#1271) * feat: add support for opening videos/playlists in external players (like mpv) #418 Signed-off-by: Randshot <randshot@norealm.xyz> * feat: move external player settings into own section feat: add warnings for when the external player doesn't support the current action (e.g. reversing playlists) feat: add toggle in settings for ignoring unsupported action warnings Signed-off-by: Randshot <randshot@norealm.xyz> * improvement: do not append start offset argument when the watch progress is 0 Signed-off-by: Randshot <randshot@norealm.xyz> * fix: fix undefined showToast error when clicking on the external player playlist button Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add icon button for external player to watch-video-info (below video player) component improvement: refactor the code for opening the external player into a separate function in utils.js Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for ytdl protocol urls (supportsYtdlProtocol) chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for passing default playback rate to external player improvement: add warning message for when the external player does not support starting playback at a given offset chore: rename reverse, shuffle, and loopPlaylist fields for consistency Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add setting for custom external player command line arguments Signed-off-by: Randshot <randshot@norealm.xyz> * chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(watch-video-info.js): change the default for playlistId back to null (consistent with other occurrences) improvement(utils.js/openInExternalPlayer): also check for empty playlistId string fix(watch-video-info.js): fix merge error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(components/ft-list-video): check whether watch history is turned on, before adding a video to it fix(store/utils): fix playlistReverse typo, causing `undefined` being set as a command line argument fix(store/utils): check for 'string' type, instead of `null` and `undefined` fix(views/Watch): fix getPlaylistIndex returning an incorrect index, when reverse was turned on chore(locales/en-US): fix thumbnail and suppress typo chore(locales/en_GB): fix thumbnail and suppress typo Signed-off-by: Randshot <randshot@norealm.xyz> * feat: pause player when opening video in external player Signed-off-by: Randshot <randshot@norealm.xyz> * feat(externalPlayer): refactor externalPlayerCmdArguments into a separate static file `static/external-player-map.json` chore(components/ft-list-video): fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * Revert "feat: pause player when opening video in external player" This reverts commit 28b4713334bf941be9e403abf517bb4b89beb04f. * feat: pause the app's player when opening video in external player * This commit addresses above requested changes. improvement(components/external-player-settings): move `externalPlayer` check to `ft-flex-box` improvement(components/external-player-settings): use `update*` methods, instead of `handle*` improvement(store/utils): move child_process invocation to `main/index.js` via IPC call to renderer improvement(store/utils): use `dispatch` for calling actions improvement(store/utils): get external player related settings directly in the action improvement(renderer/App): move `checkExternalPlayer` call down into `usingElectron` if statement fix(renderer/App): fix lint error improvement(components/ft-list-playlist): remove unnecessary payload fields fix(components/ft-list-playlist): fix typo in component name improvement(components/ft-list-video): remove unnecessary payload fields improvement(components/watch-video-info): remove unnecessary payload fields improvement(views/Settings): add `usingElectron` condition Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix toast message error Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix a few code mess-ups Co-authored-by: Svallinn <41585298+Svallinn@users.noreply.github.com>
2021-06-13 17:31:43 +02:00
<ft-icon-button
v-if="externalPlayer !== ''"
:title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
icon="external-link-alt"
class="externalPlayerIcon"
theme="base"
:padding="appearance === `watchPlaylistItem` ? 6 : 7"
:size="appearance === `watchPlaylistItem` ? 12 : 16"
@click="handleExternalPlayer"
/>
2020-06-23 17:47:19 +02:00
<ft-icon-button
2020-02-16 19:30:00 +01:00
v-if="!isLive"
:title="$t('Video.Save Video')"
2020-02-16 19:30:00 +01:00
icon="star"
class="favoritesIcon"
:theme="favoriteIconTheme"
2020-07-10 03:22:13 +02:00
:padding="appearance === `watchPlaylistItem` ? 5 : 6"
:size="appearance === `watchPlaylistItem` ? 14 : 18"
@click="toggleSave"
2020-02-16 19:30:00 +01:00
/>
<div
v-if="addWatchedStyle"
2020-02-16 19:30:00 +01:00
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-no-default"
2020-06-23 17:47:19 +02:00
: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>
<template v-if="!isLive && !isUpcoming && !isPremium && !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" />