Skip to content

Commit

Permalink
Migrate FtListChannel and FtListHashtag to the composition API (#5945)
Browse files Browse the repository at this point in the history
  • Loading branch information
absidue authored Oct 28, 2024
1 parent e026b54 commit 8b3c394
Show file tree
Hide file tree
Showing 9 changed files with 222 additions and 228 deletions.
176 changes: 176 additions & 0 deletions src/renderer/components/FtListChannel/FtListChannel.vue
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" />
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
aria-hidden="true"
:to="url"
>
<font-awesome-icon
<FontAwesomeIcon
class="hashtagImage"
:icon="['fas', 'hashtag']"
/>
Expand All @@ -34,19 +34,55 @@
v-if="channelCount"
class="channelCount"
>
{{ $tc('Global.Counts.Channel Count', channelCount, {count: parsedChannelCount}) }}
{{ $tc('Global.Counts.Channel Count', channelCount, {count: formattedChannelCount}) }}
</span>
<span
v-if="videoCount"
class="videoCount"
>
<template v-if="channelCount"> • </template>
{{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideosCount}) }}
{{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideosCount}) }}
</span>
</div>
</div>
</div>
</template>

<script src="./ft-list-hashtag.js" />
<style scoped lang="scss" src="./ft-list-hashtag.scss" />
<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { computed } from 'vue'
import store from '../../store/index'
import { formatNumber } from '../../helpers/utils'
const props = defineProps({
data: {
type: Object,
required: true
},
appearance: {
type: String,
required: true
}
})
const listType = computed(() => {
return store.getters.getListType
})
const title = props.data.title
const channelCount = props.data.channelCount
const videoCount = props.data.videoCount
const url = `/hashtag/${encodeURIComponent(title.substring(1))}`
const formattedChannelCount = computed(() => {
return formatNumber(channelCount)
})
const formattedVideosCount = computed(() => {
return formatNumber(videoCount)
})
</script>

<style scoped lang="scss" src="./FtListHashtag.scss" />
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,10 @@
import { computed, ref } from 'vue'
import FtListVideo from '../ft-list-video/ft-list-video.vue'
import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
import FtListChannel from '../FtListChannel/FtListChannel.vue'
import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
import FtCommunityPost from '../FtCommunityPost/FtCommunityPost.vue'
import FtListHashtag from '../ft-list-hashtag/ft-list-hashtag.vue'
import FtListHashtag from '../FtListHashtag/FtListHashtag.vue'
import store from '../../store/index'
Expand Down
100 changes: 0 additions & 100 deletions src/renderer/components/ft-list-channel/ft-list-channel.js

This file was deleted.

Loading

0 comments on commit 8b3c394

Please sign in to comment.