mmjee/Piped-Material
1
0
Fork 0
mirror of https://github.com/mmjee/Piped-Material.git synced 2024-12-06 19:26:36 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Convert from using iconfonts to SVG

Browse Source
This commit is contained in:
root
2022-02-18 11:02:27 +05:30
parent 1814026552
commit c9887814fe
11 changed files with 57 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
babel.config.js
+3 -3
View File
@@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package.json
+1 -1
View File
@@ -16,7 +16,7 @@
"@fontsource/noto-sans-sc": "^4.5.3",
"@fontsource/noto-sans-tc": "^4.5.3",
"@fontsource/nunito-sans": "^4.5.2",
"@mdi/font": "^6.5.95",
"@mdi/js": "^6.5.95",
"axios": "^0.25.0",
"core-js": "^3.21.0",
"dexie": "^3.2.0",
src/App.vue
+6 -2
View File
@@ -18,7 +18,7 @@
</v-btn>
<AuthenticationModal />
<v-btn icon @click="toggleDarkMode">
<v-icon>mdi-brightness-6</v-icon>
<v-icon>{{ mdiBrightness6 }}</v-icon>
</v-btn>
<v-select
class="mt-6"
@@ -97,6 +97,8 @@
</style>
<script>
import { mdiBrightness6 } from '@mdi/js'
import SearchMenu from '@/routes/SearchMenu'
import { changeLocale } from '@/plugins/i18n'
import AuthenticationModal from '@/components/AuthenticationModal'
@@ -186,7 +188,9 @@ export default {
].sort((a, b) => {
return a.text.localeCompare(b.text)
}),
drawer: false
drawer: false,
mdiBrightness6
}),
computed: {
src/components/VideoComment.vue
+13 -6
View File
@@ -7,9 +7,9 @@
</v-col>
<v-col cols="12" md="11">
<v-card-text>
<v-icon v-if="comment.pinned" class="mx-2">mdi-pin</v-icon>
<v-icon v-if="comment.pinned" class="mx-2">{{ mdiPin }}</v-icon>
<router-link :to="comment.commentorUrl" class="text-decoration-none primary--text">
<b>{{ comment.author }}</b><v-icon v-if="comment.verified">mdi-account-check</v-icon>
<b>{{ comment.author }}</b><v-icon v-if="comment.verified">{{ mdiAccountCheck }}</v-icon>
</router-link>
{{ comment.commentedTime }}
@@ -17,8 +17,8 @@
<v-divider class="my-2" />
<v-icon>mdi-thumb-up</v-icon> {{ this.$store.getters['i18n/fmtNumber'](comment.likeCount) }}
<v-icon v-if="comment.hearted" class="ml-4">mdi-heart</v-icon>
<v-icon>{{ mdiThumbUp }}</v-icon> {{ this.$store.getters['i18n/fmtNumber'](comment.likeCount) }}
<v-icon v-if="comment.hearted" class="ml-4">{{ mdiHeart }}</v-icon>
<br />
<v-btn class="mt-1" text :loading="requestInProgress" :disabled="requestInProgress" @click="loadReplies" v-if="!subComment && childComments.length === 0 && comment.repliesPage != null">Load Replies</v-btn>
<div v-else-if="!subComment && childComments.length !== 0">
@@ -33,8 +33,10 @@
</template>
<script>
import { LibPiped } from '@/tools/libpiped'
import marked from 'marked'
import { mdiPin, mdiAccountCheck, mdiHeart, mdiThumbUp } from '@mdi/js'
import { LibPiped } from '@/tools/libpiped'
export default {
name: 'VideoComment',
@@ -42,7 +44,12 @@ export default {
data: () => ({
requestInProgress: false,
showChildComments: true,
childComments: []
childComments: [],
mdiPin,
mdiAccountCheck,
mdiHeart,
mdiThumbUp
}),
methods: {
async loadReplies () {
src/main.js
-1
View File
@@ -1,7 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
import '@mdi/font/css/materialdesignicons.min.css'
import '@/styles/main.scss'
import { i18n, i18nInitialized } from '@/plugins/i18n'
src/plugins/vuetify.js
+3
View File
@@ -4,6 +4,9 @@ import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdiSvg'
},
theme: {
// There's apparently a race condition that causes components being rendered shortly before dark mode initialization unable to change to dark mode
dark: (() => {
src/routes/Channel.vue
+5 -2
View File
@@ -9,7 +9,7 @@
<v-img :src="channel.avatarUrl" height="48" width="48" class="rounded-circle" />
</div>
<span class="text-h5 ml-4">{{ channel.name }}</span>
<v-icon class="ml-2" v-if="channel.verified">mdi-check-circle-outline</v-icon>
<v-icon class="ml-2" v-if="channel.verified">{{ mdiCheckCircleOutline }}</v-icon>
<SubscriptionButton :channel-id="channel.id" />
</div>
<v-card-text>
@@ -33,6 +33,7 @@
<script>
import marked from 'marked'
import { mdiCheckCircleOutline } from '@mdi/js'
import NGErrorHandler from '@/components/NGErrorHandler'
import VideoItem from '@/components/VideoItem.vue'
@@ -46,7 +47,9 @@ export default {
data () {
return {
channel: null,
error: null
error: null,
mdiCheckCircleOutline
}
},
metaInfo () {
src/routes/FeedPage.vue
+6 -2
View File
@@ -9,7 +9,7 @@
v-if="$store.getters['auth/isCurrentlyAuthenticated']"
link :href="$store.getters['prefs/apiUrl'] + '/feed/rss?authToken=' + $store.getters['auth/authToken']"
>
<v-icon>mdi-rss</v-icon>
<v-icon>{{ mdiRss }}</v-icon>
{{ $t('actions.rss_of_subscriptions') }}
</v-btn>
@@ -27,6 +27,8 @@
<script>
import axios from 'axios'
import { mdiRss } from '@mdi/js'
import VideoItem from '@/components/VideoItem.vue'
import NGErrorHandler from '@/components/NGErrorHandler'
import GridRow from '@/components/Grid/GridRow'
@@ -40,7 +42,9 @@ export default {
feedName: 'trending',
videos: [],
error: null,
errorIsJSON: false
errorIsJSON: false,
mdiRss
}
},
src/routes/Playlist.vue
+9 -5
View File
@@ -26,8 +26,8 @@
<h5 class="text-h5 ml-16">{{ $tc('counts.videos', playlist.videos) }}</h5>
</v-card-text>
<v-card-actions>
<v-btn icon x-large link :href="getRssUrl"><v-icon x-large>mdi-rss-box</v-icon></v-btn>
<v-btn icon x-large link :href="youtubeURL"><v-icon x-large>mdi-youtube</v-icon></v-btn>
<v-btn icon x-large link :href="getRssUrl"><v-icon x-large>{{ mdiRssBox }}</v-icon></v-btn>
<v-btn icon x-large link :href="youtubeURL"><v-icon x-large>{{ mdiYoutube }}</v-icon></v-btn>
</v-card-actions>
</v-card>
@@ -42,15 +42,19 @@
</template>
<script>
import { chunk as _chunk } from 'lodash-es'
import { mdiRssBox, mdiYoutube } from '@mdi/js'
import ErrorHandler from '@/components/ErrorHandler.vue'
import VideoItem from '@/components/VideoItem.vue'
import { chunk as _chunk } from 'lodash-es'
export default {
data () {
return {
playlist: null
playlist: null,
mdiRssBox,
mdiYoutube
}
},
metaInfo () {
src/routes/WatchVideo.vue
+8 -3
View File
@@ -30,12 +30,12 @@
</span>
</v-col>
<v-col cols="12" md="6" :style="$vuetify.breakpoint.mdAndUp ? { textAlign: 'right' } : {}">
<v-icon>mdi-thumb-up</v-icon>
<v-icon>{{ mdiThumbUp }}</v-icon>
<b class="ml-2">{{ $store.getters['i18n/fmtNumber'](video.likes) }}</b>
<v-btn icon class="ml-2" link :href="'https://youtu.be/' + videoId"
@click.prevent="onYTClick" target="_blank">
<v-icon large>
mdi-youtube
{{ mdiYoutube }}
</v-icon>
</v-btn>
<v-btn class="ml-2" link :href="'https://odysee.com/' + video.lbryId"
@@ -113,6 +113,8 @@
<script>
import { debounce } from 'lodash-es'
import { mdiThumbUp, mdiYoutube } from '@mdi/js'
import { LibPiped } from '@/tools/libpiped'
import Player from '@/components/Player.vue'
@@ -140,7 +142,10 @@ export default {
channelId: null,
dbID: null,
lastWatch: null
lastWatch: null,
mdiThumbUp,
mdiYoutube
}
},
metaInfo () {
yarn.lock
+3 -3
View File
@@ -1076,10 +1076,10 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@mdi/font@^6.5.95":
"@mdi/js@^6.5.95":
version "6.5.95"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-6.5.95.tgz#203922f6dd46397de9eb1f5956b85339adb6344d"
integrity sha512-ES5rj6J39FUkHe/b3C9SJs8bqIungYhuU7rBINTBaHOv/Ce4RCb3Gw08CZVl32W33UEkgRkzyWaIedV4at+QHg==
resolved "https://registry.yarnpkg.com/@mdi/js/-/js-6.5.95.tgz#2d895b013408f213252b77c30e0fdaaba6dc8b4b"
integrity sha512-x/bwEoAGP+Mo10Dfk5audNIPi7Yz8ZBrILcbXLW3ShOI/njpgodzpgpC2WYK3D2ZSC392peRRemIFb/JsyzzYQ==
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"