-
Notifications
You must be signed in to change notification settings - Fork 898
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate FtListChannel and FtListHashtag to the composition API (#5945)
- Loading branch information
Showing
9 changed files
with
222 additions
and
228 deletions.
There are no files selected for viewing
File renamed without changes.
176 changes: 176 additions & 0 deletions
176
src/renderer/components/FtListChannel/FtListChannel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
<template> | ||
<div | ||
class="ft-list-channel ft-list-item" | ||
:class="{ | ||
list: listType === 'list', | ||
grid: listType === 'grid', | ||
[appearance]: true | ||
}" | ||
> | ||
<div class="channelThumbnail"> | ||
<router-link | ||
:to="`/channel/${id}`" | ||
class="channelThumbnailLink" | ||
tabindex="-1" | ||
aria-hidden="true" | ||
> | ||
<img | ||
:src="thumbnail" | ||
class="channelImage" | ||
alt="" | ||
> | ||
</router-link> | ||
</div> | ||
<div class="infoAndSubscribe"> | ||
<div class="info"> | ||
<router-link | ||
class="title" | ||
:to="`/channel/${id}`" | ||
> | ||
<h3 class="h3Title"> | ||
{{ name }} | ||
</h3> | ||
</router-link> | ||
<div class="infoLine"> | ||
<router-link | ||
v-if="handle !== null" | ||
class="handle" | ||
:to="`/channel/${id}`" | ||
> | ||
{{ handle }} | ||
</router-link> | ||
<span | ||
v-if="subscriberCount !== null && !hideChannelSubscriptions" | ||
class="subscriberCount" | ||
> | ||
<template v-if="handle !== null"> • </template> | ||
{{ $tc('Global.Counts.Subscriber Count', subscriberCount, {count: formattedSubscriberCount}) }} | ||
</span> | ||
<span | ||
v-if="handle == null && videoCount != null" | ||
class="videoCount" | ||
> | ||
<template v-if="subscriberCount !== null && !hideChannelSubscriptions"> • </template> | ||
{{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideoCount}) }} | ||
</span> | ||
</div> | ||
<p | ||
v-if="listType !== 'grid'" | ||
class="description" | ||
v-html="description" | ||
/> | ||
</div> | ||
<FtSubscribeButton | ||
class="channelSubscribeButton" | ||
:channel-id="id" | ||
:channel-name="name" | ||
:channel-thumbnail="thumbnail" | ||
/> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script setup> | ||
import { computed } from 'vue' | ||
import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue' | ||
import store from '../../store/index' | ||
import { youtubeImageUrlToInvidious } from '../../helpers/api/invidious' | ||
import { formatNumber } from '../../helpers/utils' | ||
const props = defineProps({ | ||
data: { | ||
type: Object, | ||
required: true | ||
}, | ||
appearance: { | ||
type: String, | ||
required: true | ||
} | ||
}) | ||
const currentInvidiousInstanceUrl = computed(() => { | ||
return store.getters.getCurrentInvidiousInstanceUrl | ||
}) | ||
const listType = computed(() => { | ||
return store.getters.getListType | ||
}) | ||
const hideChannelSubscriptions = computed(() => { | ||
return store.getters.getHideChannelSubscriptions | ||
}) | ||
let id = '' | ||
let thumbnail = '' | ||
let name = '' | ||
let subscriberCount = null | ||
let videoCount = null | ||
let handle = null | ||
let description = '' | ||
if (process.env.SUPPORTS_LOCAL_API && props.data.dataSource === 'local') { | ||
parseLocalData() | ||
} else { | ||
parseInvidiousData() | ||
} | ||
const formattedSubscriberCount = computed(() => { | ||
if (subscriberCount != null) { | ||
return formatNumber(subscriberCount) | ||
} | ||
return '' | ||
}) | ||
const formattedVideoCount = computed(() => { | ||
if (videoCount != null) { | ||
return formatNumber(videoCount) | ||
} | ||
return '' | ||
}) | ||
function parseLocalData() { | ||
thumbnail = props.data.thumbnail | ||
name = props.data.name | ||
id = props.data.id | ||
if (props.data.subscribers != null) { | ||
subscriberCount = props.data.subscribers | ||
} | ||
if (props.data.videoCount != null) { | ||
videoCount = props.data.videos | ||
} | ||
if (props.data.handle) { | ||
handle = props.data.handle | ||
} | ||
description = props.data.descriptionShort | ||
} | ||
function parseInvidiousData() { | ||
// Can be prefixed with `https://` or `//` (protocol relative) | ||
const thumbnailUrl = props.data.authorThumbnails[2].url | ||
thumbnail = youtubeImageUrlToInvidious(thumbnailUrl, currentInvidiousInstanceUrl.value) | ||
name = props.data.author | ||
id = props.data.authorId | ||
subscriberCount = props.data.subCount | ||
if (props.data.channelHandle != null) { | ||
handle = props.data.channelHandle | ||
} else { | ||
videoCount = props.data.videoCount | ||
} | ||
description = props.data.description | ||
} | ||
</script> | ||
|
||
<style scoped lang="scss" src="./FtListChannel.scss" /> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 0 additions & 100 deletions
100
src/renderer/components/ft-list-channel/ft-list-channel.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.