TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace font-awesome icons with unocss

This commit is contained in:
0x24d 2024-03-06 19:45:31 +00:00
parent 7abab711c5
commit 51e649813f
18 changed files with 50 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -11,10 +11,6 @@
"lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ."
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "6.5.1",
"@fortawesome/free-brands-svg-icons": "6.5.1",
"@fortawesome/free-solid-svg-icons": "6.5.1",
"@fortawesome/vue-fontawesome": "3.0.6",
"dompurify": "3.0.9",
"fast-xml-parser": "4.3.4",
"hotkeys-js": "3.13.6",

52
pnpm-lock.yaml
View File

@ -5,18 +5,6 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@fortawesome/fontawesome-svg-core':
specifier: 6.5.1
version: 6.5.1
'@fortawesome/free-brands-svg-icons':
specifier: 6.5.1
version: 6.5.1
'@fortawesome/free-solid-svg-icons':
specifier: 6.5.1
version: 6.5.1
'@fortawesome/vue-fontawesome':
specifier: 3.0.6
version: 3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.4.19)
dompurify:
specifier: 3.0.9
version: 3.0.9
@ -1615,46 +1603,6 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true
/@fortawesome/fontawesome-common-types@6.5.1:
resolution: {integrity: sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==}
engines: {node: '>=6'}
requiresBuild: true
dev: false
/@fortawesome/fontawesome-svg-core@6.5.1:
resolution: {integrity: sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.5.1
dev: false
/@fortawesome/free-brands-svg-icons@6.5.1:
resolution: {integrity: sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.5.1
dev: false
/@fortawesome/free-solid-svg-icons@6.5.1:
resolution: {integrity: sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.5.1
dev: false
/@fortawesome/vue-fontawesome@3.0.6(@fortawesome/fontawesome-svg-core@6.5.1)(vue@3.4.19):
resolution: {integrity: sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==}
peerDependencies:
'@fortawesome/fontawesome-svg-core': ~1 || ~6
vue: '>= 3.0.0 < 4'
dependencies:
'@fortawesome/fontawesome-svg-core': 6.5.1
vue: 3.4.19(typescript@5.3.3)
dev: false
/@humanwhocodes/config-array@0.11.14:
resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
engines: {node: '>=10.10.0'}

4
src/components/ChannelItem.vue
View File

@ -6,14 +6,14 @@
</div>
<p>
<span v-text="item.name" />
<font-awesome-icon v-if="item.verified" class="ml-1.5" icon="check" />
<i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
</p>
</router-link>
<p v-if="item.description" v-text="item.description" />
<router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
<p>
<span v-text="item.uploader" />
<font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
<i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
</p>
</router-link>

4
src/components/ChannelPage.vue
View File

@ -13,7 +13,7 @@
<img height="48" width="48" class="m-1 rounded-full" :src="channel.avatarUrl" />
<div class="flex items-center gap-1">
<h1 class="!text-xl" v-text="channel.name" />
<font-awesome-icon v-if="channel.verified" class="!text-xl" icon="check" />
<i v-if="channel.verified" class="i-fa6-solid:check !text-xl" />
</div>
</div>
@ -45,7 +45,7 @@
target="_blank"
class="btn flex-col"
>
<font-awesome-icon icon="rss" />
<i class="i-fa6-solid:rss" />
</a>
</div>
</div>

12
src/components/CommentItem.vue
View File

@ -12,7 +12,7 @@
<div class="comment-content pl-2">
<div class="comment-header">
<div v-if="comment.pinned" class="comment-pinned">
<font-awesome-icon icon="thumbtack" />
<i class="i-fa6-solid:thumbtack" />
<span
v-t="{
path: 'comment.pinned_by',
@ -24,7 +24,7 @@
<div class="comment-author">
<router-link class="link font-bold" :to="comment.commentorUrl">{{ comment.author }}</router-link>
<font-awesome-icon v-if="comment.verified" class="ml-1.5" icon="check" />
<i v-if="comment.verified" class="i-fa6-solid:check ml-1.5" />
</div>
<div class="comment-meta mb-1.5 text-sm" v-text="comment.commentedTime" />
</div>
@ -33,19 +33,19 @@
<div class="comment-footer my-1 flex items-center gap-3">
<div class="i-fa6-solid:thumbs-up" />
<span v-text="numberFormat(comment.likeCount)" />
<font-awesome-icon v-if="comment.hearted" icon="heart" />
<i v-if="comment.hearted" class="i-fa6-solid:heart" />
<img v-if="comment.creatorReplied" :src="uploaderAvatarUrl" class="h-5 w-5 rounded-full" />
</div>
<template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
<div class="cursor-pointer" @click="loadReplies">
<a v-text="`${$t('actions.reply_count', comment.replyCount)}`" />
<font-awesome-icon class="ml-1.5" icon="level-down-alt" />
<i class="i-fa6-solid:level-down-alt ml-1.5" />
</div>
</template>
<template v-if="showingReplies">
<div class="cursor-pointer" @click="hideReplies">
<a v-t="'actions.hide_replies'" />
<font-awesome-icon class="ml-1.5" icon="level-up-alt" />
<i class="i-fa6-solid:level-up-alt ml-1.5" />
</div>
</template>
<div v-show="showingReplies" v-if="replies" class="replies">
@ -54,7 +54,7 @@
</div>
<div v-if="nextpage" class="cursor-pointer" @click="loadReplies">
<a v-t="'actions.load_more_replies'" />
<font-awesome-icon class="ml-1.5" icon="level-down-alt" />
<i class="i-fa6-solid:level-down-alt ml-1.5" />
</div>
</div>
</div>

2
src/components/FeedPage.vue
View File

@ -41,7 +41,7 @@
<span class="flex gap-2">
<router-link v-t="'titles.subscriptions'" class="btn" to="/subscriptions" />
<a :href="getRssUrl" class="btn">
<font-awesome-icon icon="rss" />
<i class="i-fa6-solid:rss" />
</a>
</span>
<hr />

12
src/components/FooterComponent.vue
View File

@ -1,27 +1,27 @@
<template>
<footer class="mt-10 w-full rounded-xl py-4 text-center children:(mx-3)">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
<font-awesome-icon :icon="['fab', 'github']" />
<i class="i-fa6-brands:github" />
<span v-t="'actions.source_code'" class="ml-2" />
</a>
<a href="https://docs.piped.video/" target="_blank">
<font-awesome-icon :icon="['fa', 'book']" />
<i class="i-fa6-solid:book" />
<span v-t="'actions.documentation'" class="ml-2" />
</a>
<a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
<font-awesome-icon :icon="['fab', 'bitcoin']" />
<i class="i-fa6-brands:bitcoin" />
<span v-t="'actions.donations'" class="ml-2" />
</a>
<a v-if="statusPageHref" :href="statusPageHref">
<font-awesome-icon :icon="['fa', 'server']" />
<i class="i-fa6-solid:server" />
<span v-t="'actions.status_page'" class="ml-2" />
</a>
<a v-if="donationHref" :href="donationHref">
<font-awesome-icon :icon="['fa', 'donate']" />
<i class="i-fa6-solid:donate" />
<span v-t="'actions.instance_donations'" class="ml-2" />
</a>
<a v-if="privacyPolicyHref" :href="privacyPolicyHref" target="_blank">
<font-awesome-icon :icon="['fa', 'eye']" />
<i class="i-fa6-solid:eye" />
<span v-t="'actions.instance_privacy_policy'" class="ml-2" />
</a>
</footer>

2
src/components/ModalComponent.vue
View File

@ -2,7 +2,7 @@
<div class="modal">
<div @click="handleClick">
<div class="modal-container">
<button @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
<button @click="$emit('close')"><i class="i-fa6-solid:xmark" /></button>
<slot></slot>
</div>
</div>

4
src/components/PlaylistItem.vue
View File

@ -6,7 +6,7 @@
</div>
<p>
<span v-text="props.item.name" />
<font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
<i v-if="props.item.verified" class="i-fa6-solid:check ml-1.5" />
</p>
</router-link>
<p v-if="props.item.description" v-text="props.item.description" />
@ -14,7 +14,7 @@
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
<p>
<span v-text="props.item.uploaderName" />
<font-awesome-icon v-if="props.item.uploaderVerified" class="ml-1.5" icon="check" />
<i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
</p>
</router-link>
<a v-else-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />

6
src/components/PlaylistPage.vue
View File

@ -17,16 +17,16 @@
<strong class="mr-2" v-text="`${playlist.videos} ${$t('video.videos')}`" />
<button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
{{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
}}<font-awesome-icon class="ml-3" icon="bookmark" />
}}<i class="i-fa6-solid:bookmark ml-3" />
</button>
<button v-if="authenticated && !isPipedPlaylist" class="btn mr-1" @click="clonePlaylist">
{{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
{{ $t("actions.clone_playlist") }}<i class="i-fa6-solid:clone ml-3" />
</button>
<button class="btn mr-1" @click="downloadPlaylistAsTxt">
{{ $t("actions.download_as_txt") }}
</button>
<a class="btn mr-1" :href="getRssUrl">
<font-awesome-icon icon="rss" />
<i class="i-fa6-solid:rss" />
</a>
<WatchOnButton :link="`https://www.youtube.com/playlist?list=${$route.query.list}`" />
</div>

2
src/components/PlaylistsPage.vue
View File

@ -76,7 +76,7 @@
<div class="relative text-sm">
<span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
<div class="absolute bottom-100px right-5px z-100 px-5px" @click.prevent="removeBookmark(index)">
<font-awesome-icon class="ml-3" icon="bookmark" />
<i class="i-fa6-solid:bookmark ml-3" />
</div>
</div>
<p

2
src/components/PreferencesPage.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex">
<button @click="$router.go(-1) || $router.push('/')">
<font-awesome-icon icon="chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
<i class="i-fa6-solid:chevron-left" /><span v-t="'actions.back'" class="ml-1.5" />
</button>
</div>
<h1 v-t="'titles.preferences'" class="text-center font-bold" />

6
src/components/SubscriptionsPage.vue
View File

@ -52,12 +52,12 @@
>
<span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
<div v-if="group.groupName != '' && selectedGroup == group">
<font-awesome-icon class="mx-2" icon="edit" @click="showEditGroupModal = true" />
<font-awesome-icon class="mx-2" icon="circle-minus" @click="deleteGroup(group)" />
<i class="i-fa6-solid:edit mx-2" @click="showEditGroupModal = true" />
<i class="i-fa6-solid:circle-minus mx-2" @click="deleteGroup(group)" />
</div>
</button>
<button class="btn mx-1" @click="showCreateGroupModal = true">
<font-awesome-icon icon="circle-plus" />
<i class="i-fa6-solid:circle-plus" />
</button>
</div>
<br />

14
src/components/VideoItem.vue
View File

@ -43,7 +43,7 @@
v-text="timeFormat(item.duration)"
/>
<i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
<font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" />
<i class="i-fa6-solid:tower-broadcast w-3" />
</i18n-t>
<span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
</div>
@ -78,12 +78,12 @@
:title="item.uploaderName"
>
<span v-text="item.uploaderName" />
<font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
<i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
</router-link>
<div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
<span v-if="item.views >= 0">
<font-awesome-icon icon="eye" />
<i class="i-fa6-solid:eye" />
<span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
</span>
<span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
@ -105,13 +105,13 @@
:aria-label="'Listen to ' + title"
:title="'Listen to ' + title"
>
<font-awesome-icon icon="headphones" />
<i class="i-fa6-solid:headphones" />
</router-link>
<button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
<font-awesome-icon icon="circle-plus" />
<i class="i-fa6-solid:circle-plus" />
</button>
<button :title="$t('actions.share')" @click="showShareModal = !showShareModal">
<font-awesome-icon icon="share" />
<i class="i-fa6-solid:share" />
</button>
<button
v-if="admin"
@ -119,7 +119,7 @@
:title="$t('actions.remove_from_playlist')"
@click="showConfirmRemove = true"
>
<font-awesome-icon icon="circle-minus" />
<i class="i-fa6-solid:circle-minus" />
</button>
<ConfirmModal
v-if="showConfirmRemove"

6
src/components/WatchOnButton.vue
View File

@ -19,11 +19,13 @@ export default {
<!-- For large screens -->
<a :href="link" class="btn flex items-center lt-lg:hidden">
<i18n-t keypath="player.watch_on" tag="strong">{{ platform }}</i18n-t>
<font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
<i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
<i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
</a>
<!-- For small screens -->
<a :href="link" class="btn flex items-center lg:hidden">
<font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
<i v-if="platform == 'YouTube'" class="i-fa6-brands:youtube mx-1.5" />
<i v-else-if="platform == 'Odysee'" class="i-fa6-brands:odysee mx-1.5" />
</a>
</template>
</template>

10
src/components/WatchVideo.vue
View File

@ -84,7 +84,7 @@
video.uploader
}}</router-link>
<!-- Verified Badge -->
<font-awesome-icon v-if="video.uploaderVerified" class="ml-1" icon="check" />
<i v-if="video.uploaderVerified" class="i-fa6-solid:check ml-1" />
</div>
<PlaylistAddModal
v-if="showModal"
@ -106,7 +106,7 @@
{{ $t("actions.download_frame") }}<i class="i-fa6-solid:download" />
</button>
<button class="btn flex items-center" @click="showModal = !showModal">
{{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
{{ $t("actions.add_to_playlist") }}<i class="i-fa6-solid:circle-plus ml-1" />
</button>
<button
class="btn"
@ -128,12 +128,12 @@
target="_blank"
class="btn flex items-center"
>
<font-awesome-icon class="mx-1.5" icon="rss" />
<i class="i-fa6-solid:rss mx-1.5" />
</a>
<!-- Share Dialog -->
<button class="btn flex items-center" @click="showShareModal = !showShareModal">
<i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
<font-awesome-icon class="mx-1.5" icon="fa-share" />
<i class="i-fa6-solid:share mx-1.5" />
</button>
<!-- YouTube -->
<WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
@ -150,7 +150,7 @@
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="btn flex items-center"
>
<font-awesome-icon class="mx-1.5" :icon="isListening ? 'tv' : 'headphones'" />
<i :class="isListening ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'" class="mx-1.5" />
</router-link>
</div>
</div>

55
src/main.js
View File

@ -1,58 +1,4 @@
import { createApp } from "vue";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faEye,
faThumbtack,
faCheck,
faHeart,
faHeadphones,
faRss,
faChevronLeft,
faLevelDownAlt,
faTv,
faLevelUpAlt,
faBroadcastTower,
faCirclePlus,
faCircleMinus,
faXmark,
faClone,
faShare,
faBook,
faServer,
faDonate,
faBookmark,
faEdit,
} from "@fortawesome/free-solid-svg-icons";
import { faGithub, faBitcoin, faYoutube, faOdysee } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
library.add(
faEye,
faGithub,
faBitcoin,
faThumbtack,
faCheck,
faHeart,
faHeadphones,
faYoutube,
faOdysee,
faRss,
faChevronLeft,
faLevelDownAlt,
faLevelUpAlt,
faTv,
faBroadcastTower,
faCirclePlus,
faCircleMinus,
faXmark,
faClone,
faShare,
faBook,
faServer,
faDonate,
faBookmark,
faEdit,
);
import router from "@/router/router.js";
import App from "./App.vue";
@ -657,5 +603,4 @@ const app = createApp(App);
app.use(i18n);
app.use(router);
app.mixin(mixin);
app.component("FontAwesomeIcon", FontAwesomeIcon);
app.mount("#app");

7
uno.config.js
View File

@ -12,7 +12,12 @@ export default defineConfig({
presetUno({
dark: "media",
}),
presetIcons(),
presetIcons({
extraProperties: {
display: "inline-block",
"vertical-align": "middle",
},
}),
presetWebFonts({
provider: "none",
fonts: {