Webpack bundle dependencies (#2511)
* Allow webpack to bundle *most* dependencies * Exclude *most* node_modules from getting packaged by electron-builder * Import only the required icons instead of bundling the whole icon pack * Reduce packaging blacklist to only include the few things that still need blacklisting
This commit is contained in:
absidue
GitHub
parent
a453c8436e
commit
eaa15ea833
|
|
@ -58,22 +58,14 @@ const config = {
|
|||
'icon.svg',
|
||||
'./dist/**/*',
|
||||
'!dist/web/*',
|
||||
'!**/node_modules/**/.*',
|
||||
'!**/node_modules/**/index.html',
|
||||
'!**/{.github,Jenkinsfile}',
|
||||
'!**/{CHANGES.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md,CONTRIBUTION.md,DEVELOPMENT.md,docs,docs.md,docs.mli,examples,History.md,HISTORY.md,README.md,TODO.md,UPGRADE_GUIDE.md,UPGRADING.md}',
|
||||
'!**/{commitlint.config.js,.editorconfig,.eslintignore,.eslintrc.{js,yml},.gitmodules,.huskyrc,.lintstagedrc,.nvmrc,.nycrc{,.json},.prettierrc{,.yaml},tslint.json}',
|
||||
'!**/{.babelrc,bower.json,Gruntfile.js,Makefile,.npmrc.proregistry,rollup.config.js,.tm_properties,.tool-versions,tsconfig.json,webpack.config.js}',
|
||||
'!**/*.{{,c,m}js,min,ts}.map',
|
||||
'!**/*.d.ts',
|
||||
'!node_modules/**/*',
|
||||
|
||||
// only exclude the src directory for specific packages
|
||||
// as some of them have their dist code in there and we don't want to exclude those
|
||||
'!**/node_modules/{@fortawesome/vue-fontawesome,agent-base,jquery,localforage,m3u8-parser,marked,mpd-parser,performance-now,video.js,vue,vue-i18n,vue-router}/src/*',
|
||||
'!**/node_modules/**/{bin,man,scripts}/*',
|
||||
'!**/node_modules/jquery/dist/jquery.slim*.js',
|
||||
'!**/node_modules/video.js/dist/{alt/*,video.js}',
|
||||
'!**/node_modules/@videojs/*/src'
|
||||
// renderer
|
||||
'node_modules/{miniget,ytpl,ytsr}/**/*',
|
||||
|
||||
'!**/README.md',
|
||||
'!**/*.js.map',
|
||||
'!**/*.d.ts',
|
||||
],
|
||||
dmg: {
|
||||
contents: [
|
||||
|
|
|
|||
|
|
@ -2,15 +2,9 @@ const path = require('path')
|
|||
const webpack = require('webpack')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
|
||||
const {
|
||||
dependencies,
|
||||
devDependencies,
|
||||
productName,
|
||||
} = require('../package.json')
|
||||
const { productName } = require('../package.json')
|
||||
|
||||
const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
|
||||
const isDevMode = process.env.NODE_ENV === 'development'
|
||||
const whiteListedModules = []
|
||||
|
||||
const config = {
|
||||
name: 'main',
|
||||
|
|
@ -19,7 +13,10 @@ const config = {
|
|||
entry: {
|
||||
main: path.join(__dirname, '../src/main/index.js'),
|
||||
},
|
||||
externals: externals.filter(d => !whiteListedModules.includes(d)),
|
||||
// webpack spits out errors while inlining electron-debug as
|
||||
// it tries to dynamically load dependencies
|
||||
// the error: "Critical dependency: the request of a dependency is an expression"
|
||||
externals: ['electron-debug'],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,15 +4,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
const {
|
||||
dependencies,
|
||||
devDependencies,
|
||||
productName,
|
||||
} = require('../package.json')
|
||||
const { productName } = require('../package.json')
|
||||
|
||||
const externals = Object.keys(dependencies).concat(Object.keys(devDependencies))
|
||||
const isDevMode = process.env.NODE_ENV === 'development'
|
||||
const whiteListedModules = ['vue']
|
||||
|
||||
const config = {
|
||||
name: 'renderer',
|
||||
|
|
@ -32,7 +26,10 @@ const config = {
|
|||
path: path.join(__dirname, '../dist'),
|
||||
filename: '[name].js',
|
||||
},
|
||||
externals: externals.filter(d => !whiteListedModules.includes(d)),
|
||||
// webpack spits out errors while inlining ytpl and ytsr as
|
||||
// they dynamically import their package.json file to extract the bug report URL
|
||||
// the error: "Critical dependency: the request of a dependency is an expression"
|
||||
externals: ['ytpl', 'ytsr'],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
class="bubble selected"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="check"
|
||||
:icon="['fas', 'check']"
|
||||
class="icon"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default Vue.extend({
|
|||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'ellipsis-v'
|
||||
type: Array,
|
||||
default: () => ['fas', 'ellipsis-v']
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default Vue.extend({
|
|||
// As the text input box should be empty
|
||||
clearTextButtonExisting: false,
|
||||
clearTextButtonVisible: false,
|
||||
actionButtonIconName: 'search'
|
||||
actionButtonIconName: ['fas', 'search']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -136,7 +136,7 @@ export default Vue.extend({
|
|||
|
||||
if (!this.inputDataPresent) {
|
||||
// Change back to default icon if text is blank
|
||||
this.actionButtonIconName = 'search'
|
||||
this.actionButtonIconName = ['fas', 'search']
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -165,15 +165,15 @@ export default Vue.extend({
|
|||
|
||||
if (isYoutubeLink) {
|
||||
// Go to URL (i.e. Video/Playlist/Channel
|
||||
this.actionButtonIconName = 'arrow-right'
|
||||
this.actionButtonIconName = ['fas', 'arrow-right']
|
||||
} else {
|
||||
// Search with text
|
||||
this.actionButtonIconName = 'search'
|
||||
this.actionButtonIconName = ['fas', 'search']
|
||||
}
|
||||
})
|
||||
} catch (ex) {
|
||||
// On exception, consider text as invalid URL
|
||||
this.actionButtonIconName = 'search'
|
||||
this.actionButtonIconName = ['fas', 'search']
|
||||
// Rethrow exception
|
||||
throw ex
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</label>
|
||||
<font-awesome-icon
|
||||
v-if="showClearTextButton"
|
||||
icon="times-circle"
|
||||
:icon="['fas', 'times-circle']"
|
||||
class="clearInputTextButton"
|
||||
:class="{
|
||||
visible: inputDataPresent
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{{ title }}
|
||||
<font-awesome-icon
|
||||
class="angleDownIcon"
|
||||
icon="angle-down"
|
||||
:icon="['fas', 'angle-down']"
|
||||
/>
|
||||
</div>
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="background" />
|
||||
<div class="inner">
|
||||
<div>{{ videoCount }}</div>
|
||||
<div><font-awesome-icon icon="list" /></div>
|
||||
<div><font-awesome-icon :icon="['fas','list']" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<ft-icon-button
|
||||
v-if="externalPlayer !== ''"
|
||||
:title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
|
||||
icon="external-link-alt"
|
||||
:icon="['fas', 'external-link-alt']"
|
||||
class="externalPlayerButton"
|
||||
theme="base-no-default"
|
||||
:size="16"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<ft-icon-button
|
||||
v-if="externalPlayer !== ''"
|
||||
:title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
|
||||
icon="external-link-alt"
|
||||
:icon="['fas', 'external-link-alt']"
|
||||
class="externalPlayerIcon"
|
||||
theme="base"
|
||||
:padding="appearance === `watchPlaylistItem` ? 6 : 7"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<ft-icon-button
|
||||
v-if="!isLive"
|
||||
:title="$t('Video.Save Video')"
|
||||
icon="star"
|
||||
:icon="['fas', 'star']"
|
||||
class="favoritesIcon"
|
||||
:theme="favoriteIconTheme"
|
||||
:padding="appearance === `watchPlaylistItem` ? 5 : 6"
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="info">
|
||||
<ft-icon-button
|
||||
class="optionsButton"
|
||||
icon="ellipsis-v"
|
||||
:icon="['fas', 'ellipsis-v']"
|
||||
title="More Options"
|
||||
theme="base-no-default"
|
||||
:size="16"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
<font-awesome-icon
|
||||
class="bannerIcon"
|
||||
icon="times"
|
||||
:icon="['fas', 'times']"
|
||||
@click="handleClose"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</h3>
|
||||
<ft-icon-button
|
||||
class="profileSettings"
|
||||
icon="sliders-h"
|
||||
:icon="['fas', 'sliders-h']"
|
||||
@click="openProfileSettings"
|
||||
/>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</option>
|
||||
</select>
|
||||
<font-awesome-icon
|
||||
icon="sort-down"
|
||||
:icon="['fas', 'sort-down']"
|
||||
class="iconSelect"
|
||||
/>
|
||||
<span class="select-highlight" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
ref="iconButton"
|
||||
:title="$t('Share.Share Video')"
|
||||
theme="secondary"
|
||||
icon="share-alt"
|
||||
:icon="['fas', 'share-alt']"
|
||||
dropdown-position-x="left"
|
||||
:force-dropdown="true"
|
||||
>
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
class="action"
|
||||
@click="copyYoutube()"
|
||||
>
|
||||
<font-awesome-icon icon="copy" />
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
{{ $t("Share.Copy Link") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
class="action"
|
||||
@click="openYoutube()"
|
||||
>
|
||||
<font-awesome-icon icon="globe" />
|
||||
<font-awesome-icon :icon="['fas', 'globe']" />
|
||||
{{ $t("Share.Open Link") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
background-color="var(--accent-color-active)"
|
||||
@click="copyYoutubeEmbed()"
|
||||
>
|
||||
<font-awesome-icon icon="copy" />
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
{{ $t("Share.Copy Embed") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
background-color="var(--accent-color-active)"
|
||||
@click="openYoutubeEmbed()"
|
||||
>
|
||||
<font-awesome-icon icon="globe" />
|
||||
<font-awesome-icon :icon="['fas', 'globe']" />
|
||||
{{ $t("Share.Open Embed") }}
|
||||
</ft-button>
|
||||
</div>
|
||||
|
|
@ -70,14 +70,14 @@
|
|||
class="action"
|
||||
@click="copyInvidious()"
|
||||
>
|
||||
<font-awesome-icon icon="copy" />
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
{{ $t("Share.Copy Link") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
class="action"
|
||||
@click="openInvidious()"
|
||||
>
|
||||
<font-awesome-icon icon="globe" />
|
||||
<font-awesome-icon :icon="['fas', 'globe']" />
|
||||
{{ $t("Share.Open Link") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
background-color="var(--accent-color-active)"
|
||||
@click="copyInvidiousEmbed()"
|
||||
>
|
||||
<font-awesome-icon icon="copy" />
|
||||
<font-awesome-icon :icon="['fas', 'copy']" />
|
||||
{{ $t("Share.Copy Embed") }}
|
||||
</ft-button>
|
||||
<ft-button
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
background-color="var(--accent-color-active)"
|
||||
@click="openInvidiousEmbed()"
|
||||
>
|
||||
<font-awesome-icon icon="globe" />
|
||||
<font-awesome-icon :icon="['fas', 'globe']" />
|
||||
{{ $t("Share.Open Embed") }}
|
||||
</ft-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
class="button"
|
||||
type="button"
|
||||
>
|
||||
<font-awesome-icon icon="question-circle" />
|
||||
<font-awesome-icon :icon="['fas', 'question-circle']" />
|
||||
</button>
|
||||
<p
|
||||
:id="id"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
@click="openMoreOptions = !openMoreOptions"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="ellipsis-h"
|
||||
:icon="['fas', 'ellipsis-h']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="list"
|
||||
:icon="['fas', 'list']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
@click="navigate('trending')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="fire"
|
||||
:icon="['fas', 'fire']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
@click="navigate('popular')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="users"
|
||||
:icon="['fas', 'users']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
@click="navigate('about')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="info-circle"
|
||||
:icon="['fas', 'info-circle']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
@click="navigate('history')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="history"
|
||||
:icon="['fas', 'history']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
@click="navigate('settings')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="sliders-h"
|
||||
:icon="['fas', 'sliders-h']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
@click="navigate('about')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="info-circle"
|
||||
:icon="['fas', 'info-circle']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="rss"
|
||||
:icon="['fas', 'rss']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="list"
|
||||
:icon="['fas', 'list']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="fire"
|
||||
:icon="['fas', 'fire']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="users"
|
||||
:icon="['fas', 'users']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="bookmark"
|
||||
:icon="['fas', 'bookmark']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="history"
|
||||
:icon="['fas', 'history']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="sliders-h"
|
||||
:icon="['fas', 'sliders-h']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
class="thumbnailContainer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="info-circle"
|
||||
:icon="['fas', 'info-circle']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
fixed-width
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="side">
|
||||
<font-awesome-icon
|
||||
class="menuIcon navIcon"
|
||||
icon="bars"
|
||||
:icon="['fas', 'bars']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="toggleSideNav"
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<font-awesome-icon
|
||||
id="historyArrowBack"
|
||||
class="navBackIcon navIcon fa-arrow-left"
|
||||
icon="arrow-left"
|
||||
:icon="['fas', 'arrow-left']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:title="backwardText"
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<font-awesome-icon
|
||||
id="historyArrowForward"
|
||||
class="navForwardIcon navIcon fa-arrow-right"
|
||||
icon="arrow-right"
|
||||
:icon="['fas', 'arrow-right']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:title="forwardText"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<font-awesome-icon
|
||||
v-if="!hideSearchBar"
|
||||
class="navSearchIcon navIcon"
|
||||
icon="search"
|
||||
:icon="['fas', 'search']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="toggleSearchContainer"
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
/>
|
||||
<font-awesome-icon
|
||||
class="navNewWindowIcon navIcon"
|
||||
icon="clone"
|
||||
:icon="['fas', 'clone']"
|
||||
:title="newWindowText"
|
||||
@click="createNewWindow"
|
||||
/>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
v-if="!hideSearchBar"
|
||||
class="navFilterIcon navIcon"
|
||||
:class="{ filterChanged: searchFilterValueChanged }"
|
||||
icon="filter"
|
||||
:icon="['fas', 'filter']"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="showFilters = !showFilters"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
class="commentPinned"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="thumbtack"
|
||||
:icon="['fas', 'thumbtack']"
|
||||
/>
|
||||
{{ $t("Comments.Pinned by") }} {{ channelName }}
|
||||
</p>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
<p class="commentLikeCount">
|
||||
<font-awesome-icon
|
||||
v-if="!hideCommentLikes"
|
||||
icon="thumbs-up"
|
||||
:icon="['fas', 'thumbs-up']"
|
||||
/>
|
||||
{{ comment.likes }}
|
||||
<span
|
||||
|
|
@ -100,11 +100,11 @@
|
|||
class="commentHeartBadgeImg"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="heart"
|
||||
:icon="['fas', 'heart']"
|
||||
class="commentHeartBadgeWhite"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
icon="heart"
|
||||
:icon="['fas', 'heart']"
|
||||
class="commentHeartBadgeRed"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<p class="commentLikeCount">
|
||||
<font-awesome-icon
|
||||
v-if="!hideCommentLikes"
|
||||
icon="thumbs-up"
|
||||
:icon="['fas', 'thumbs-up']"
|
||||
/>
|
||||
{{ reply.likes }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
class="likeSection"
|
||||
>
|
||||
<div>
|
||||
<span class="likeCount"><font-awesome-icon icon="thumbs-up" /> {{ parsedLikeCount }}</span>
|
||||
<span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
:style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
|
||||
/>
|
||||
<div>
|
||||
<span class="likeCount"><font-awesome-icon icon="thumbs-up" /> {{ parsedLikeCount }}</span>
|
||||
<span class="dislikeCount"><font-awesome-icon icon="thumbs-down" /> {{ parsedDislikeCount }}</span>
|
||||
<span class="likeCount"><font-awesome-icon :icon="['fas', 'thumbs-up']" /> {{ parsedLikeCount }}</span>
|
||||
<span class="dislikeCount"><font-awesome-icon :icon="['fas', 'thumbs-down']" /> {{ parsedDislikeCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<ft-icon-button
|
||||
v-if="!isUpcoming"
|
||||
:title="$t('Video.Save Video')"
|
||||
icon="star"
|
||||
:icon="['fas', 'star']"
|
||||
class="option"
|
||||
:theme="favoriteIconTheme"
|
||||
@click="toggleSave"
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<ft-icon-button
|
||||
v-if="externalPlayer !== ''"
|
||||
:title="$t('Video.External Player.OpenInTemplate').replace('$', externalPlayer)"
|
||||
icon="external-link-alt"
|
||||
:icon="['fas', 'external-link-alt']"
|
||||
class="option"
|
||||
theme="secondary"
|
||||
@click="handleExternalPlayer"
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
:title="$t('Video.Download Video')"
|
||||
class="option"
|
||||
theme="secondary"
|
||||
icon="download"
|
||||
:icon="['fas', 'download']"
|
||||
:return-index="true"
|
||||
:dropdown-options="downloadLinkOptions"
|
||||
@click="handleDownload"
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
:title="$t('Change Format.Change Media Formats')"
|
||||
class="option"
|
||||
theme="secondary"
|
||||
icon="file-video"
|
||||
:icon="['fas', 'file-video']"
|
||||
:dropdown-options="formatTypeOptions"
|
||||
@click="handleFormatChange"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
{{ errorMessage }}
|
||||
</p>
|
||||
<font-awesome-icon
|
||||
icon="exclamation-circle"
|
||||
:icon="['fas', 'exclamation-circle']"
|
||||
class="errorIcon"
|
||||
/>
|
||||
<ft-button
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
icon="arrow-down"
|
||||
:icon="['fas', 'arrow-down']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,33 +33,33 @@
|
|||
<font-awesome-icon
|
||||
class="playlistIcon"
|
||||
:class="{ playlistIconActive: loopEnabled }"
|
||||
icon="retweet"
|
||||
:icon="['fas', 'retweet']"
|
||||
:title="$t('Video.Loop Playlist')"
|
||||
@click="toggleLoop"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
class="playlistIcon"
|
||||
:class="{ playlistIconActive: shuffleEnabled }"
|
||||
icon="random"
|
||||
:icon="['fas', 'random']"
|
||||
:title="$t('Video.Shuffle Playlist')"
|
||||
@click="toggleShuffle"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
class="playlistIcon"
|
||||
:class="{ playlistIconActive: reversePlaylist }"
|
||||
icon="exchange-alt"
|
||||
:icon="['fas', 'exchange-alt']"
|
||||
:title="$t('Video.Reverse Playlist')"
|
||||
@click="toggleReversePlaylist"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
class="playlistIcon"
|
||||
icon="step-backward"
|
||||
:icon="['fas', 'step-backward']"
|
||||
:title="$t('Video.Play Previous Video')"
|
||||
@click="playPreviousVideo"
|
||||
/>
|
||||
<font-awesome-icon
|
||||
class="playlistIcon"
|
||||
icon="step-forward"
|
||||
:icon="['fas', 'step-forward']"
|
||||
:title="$t('Video.Play Next Video')"
|
||||
@click="playNextVideo"
|
||||
/>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
<font-awesome-icon
|
||||
v-if="currentVideoIndex === (index + 1)"
|
||||
class="videoIndexIcon"
|
||||
icon="play"
|
||||
:icon="['fas', 'play']"
|
||||
/>
|
||||
<p
|
||||
v-else
|
||||
|
|
|
|||
|
|
@ -5,7 +5,55 @@ import router from './router/index'
|
|||
import store from './store/index'
|
||||
import i18n from './i18n/index'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import {
|
||||
faAngleDown,
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faBars,
|
||||
faBookmark,
|
||||
faCheck,
|
||||
faClone,
|
||||
faCommentDots,
|
||||
faCopy,
|
||||
faDownload,
|
||||
faEllipsisH,
|
||||
faEllipsisV,
|
||||
faEnvelope,
|
||||
faExchangeAlt,
|
||||
faExclamationCircle,
|
||||
faExternalLinkAlt,
|
||||
faFileDownload,
|
||||
faFileVideo,
|
||||
faFilter,
|
||||
faFire,
|
||||
faGlobe,
|
||||
faHeart,
|
||||
faHistory,
|
||||
faInfoCircle,
|
||||
faLanguage,
|
||||
faList,
|
||||
faNewspaper,
|
||||
faPlay,
|
||||
faQuestionCircle,
|
||||
faRandom,
|
||||
faRetweet,
|
||||
faRss,
|
||||
faSatelliteDish,
|
||||
faSearch,
|
||||
faShareAlt,
|
||||
faSlidersH,
|
||||
faSortDown,
|
||||
faStar,
|
||||
faStepBackward,
|
||||
faStepForward,
|
||||
faSync,
|
||||
faThumbsUp,
|
||||
faThumbtack,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faUsers
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
|
||||
import { faBitcoin } from '@fortawesome/free-brands-svg-icons/faBitcoin'
|
||||
import { faMonero } from '@fortawesome/free-brands-svg-icons/faMonero'
|
||||
|
|
@ -18,7 +66,62 @@ Vue.config.devtools = isDev
|
|||
Vue.config.performance = isDev
|
||||
Vue.config.productionTip = isDev
|
||||
|
||||
library.add(fas, faGithub, faBitcoin, faMonero, faMastodon)
|
||||
library.add(
|
||||
// solid icons
|
||||
faAngleDown,
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faBars,
|
||||
faBookmark,
|
||||
faCheck,
|
||||
faClone,
|
||||
faCommentDots,
|
||||
faCopy,
|
||||
faDownload,
|
||||
faEllipsisH,
|
||||
faEllipsisV,
|
||||
faEnvelope,
|
||||
faExchangeAlt,
|
||||
faExclamationCircle,
|
||||
faExternalLinkAlt,
|
||||
faFileDownload,
|
||||
faFileVideo,
|
||||
faFilter,
|
||||
faFire,
|
||||
faGlobe,
|
||||
faHeart,
|
||||
faHistory,
|
||||
faInfoCircle,
|
||||
faLanguage,
|
||||
faList,
|
||||
faNewspaper,
|
||||
faPlay,
|
||||
faQuestionCircle,
|
||||
faRandom,
|
||||
faRetweet,
|
||||
faRss,
|
||||
faSatelliteDish,
|
||||
faSearch,
|
||||
faShareAlt,
|
||||
faSlidersH,
|
||||
faSortDown,
|
||||
faStar,
|
||||
faStepBackward,
|
||||
faStepForward,
|
||||
faSync,
|
||||
faThumbsUp,
|
||||
faThumbtack,
|
||||
faTimes,
|
||||
faTimesCircle,
|
||||
faUsers,
|
||||
|
||||
// brand icons
|
||||
faGithub,
|
||||
faBitcoin,
|
||||
faMastodon,
|
||||
faMonero
|
||||
)
|
||||
|
||||
Vue.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
|
||||
|
|
|
|||
|
|
@ -22,32 +22,32 @@ export default Vue.extend({
|
|||
content: `<a href="https://github.com/FreeTubeApp/FreeTube">GitHub: FreeTubeApp/FreeTube</a><br>${this.$t('About.Licensed under the AGPLv3')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${this.$t('About.View License')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'file-download',
|
||||
icon: ['fas', 'file-download'],
|
||||
title: this.$t('About.Downloads / Changelog'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${this.$t('About.GitHub releases')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'question-circle',
|
||||
icon: ['fas', 'question-circle'],
|
||||
title: this.$t('About.Help'),
|
||||
content: `<a href="https://docs.freetubeapp.io/">${this.$t('About.FreeTube Wiki')}</a> / <a href="https://docs.freetubeapp.io/faq/">${this.$t('About.FAQ')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'exclamation-circle',
|
||||
icon: ['fas', 'exclamation-circle'],
|
||||
title: this.$t('About.Report a problem'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${this.$t('About.GitHub issues')}</a><br>${this.$t('About.Please check for duplicates before posting')}`
|
||||
},
|
||||
{
|
||||
icon: 'globe',
|
||||
icon: ['fas', 'globe'],
|
||||
title: this.$t('About.Website'),
|
||||
content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
|
||||
},
|
||||
{
|
||||
icon: 'newspaper',
|
||||
icon: ['fas', 'newspaper'],
|
||||
title: this.$t('About.Blog'),
|
||||
content: '<a href="https://blog.freetubeapp.io">https://blog.freetubeapp.io</a>'
|
||||
},
|
||||
{
|
||||
icon: 'envelope',
|
||||
icon: ['fas', 'envelope'],
|
||||
title: this.$t('About.Email'),
|
||||
content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
|
||||
},
|
||||
|
|
@ -57,22 +57,22 @@ export default Vue.extend({
|
|||
content: '<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>'
|
||||
},
|
||||
{
|
||||
icon: 'comment-dots',
|
||||
icon: ['fas', 'comment-dots'],
|
||||
title: this.$t('About.Chat on Matrix'),
|
||||
content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${this.$t('About.Please read the')} <a href="https://docs.freetubeapp.io/community/matrix/">${this.$t('About.room rules')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'language',
|
||||
icon: ['fas', 'language'],
|
||||
title: this.$t('About.Translate'),
|
||||
content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
|
||||
},
|
||||
{
|
||||
icon: 'users',
|
||||
icon: ['fas', 'users'],
|
||||
title: this.$t('About.Credits'),
|
||||
content: `${this.$t('About.FreeTube is made possible by')} <a href="https://docs.freetubeapp.io/credits/">${this.$t('About.these people and projects')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'heart',
|
||||
icon: ['fas', 'heart'],
|
||||
title: `${this.$t('About.Donate')} - Liberapay`,
|
||||
content: '<a href="https://liberapay.com/FreeTube">https://liberapay.com/FreeTube</a>'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
class="getNextPage"
|
||||
@click="handleFetchMore"
|
||||
>
|
||||
<font-awesome-icon icon="search" /> {{ $t("Search Filters.Fetch more results") }}
|
||||
<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
|
||||
</div>
|
||||
</div>
|
||||
</ft-card>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</ft-card>
|
||||
<ft-icon-button
|
||||
v-if="!isLoading"
|
||||
icon="sync"
|
||||
:icon="['fas', 'sync']"
|
||||
class="floatingTopButton"
|
||||
:size="12"
|
||||
theme="primary"
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
class="getNextPage"
|
||||
@click="nextPage"
|
||||
>
|
||||
<font-awesome-icon icon="search" /> {{ $t("Search Filters.Fetch more results") }}
|
||||
<font-awesome-icon :icon="['fas', 'search']" /> {{ $t("Search Filters.Fetch more results") }}
|
||||
</div>
|
||||
</ft-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
</ft-card>
|
||||
<ft-icon-button
|
||||
v-if="!isLoading"
|
||||
icon="sync"
|
||||
:icon="['fas', 'sync']"
|
||||
class="floatingTopButton"
|
||||
:title="$t('Subscriptions.Refresh Subscriptions')"
|
||||
:size="12"
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
</ft-card>
|
||||
<ft-icon-button
|
||||
v-if="!isLoading"
|
||||
icon="sync"
|
||||
:icon="['fas', 'sync']"
|
||||
class="floatingTopButton"
|
||||
:size="12"
|
||||
theme="primary"
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
class="premiereDate"
|
||||
>
|
||||
<font-awesome-icon
|
||||
icon="satellite-dish"
|
||||
:icon="['fas', 'satellite-dish']"
|
||||
class="premiereIcon"
|
||||
/>
|
||||
<p
|
||||
|
|
|
|||
Loading…
Reference in New Issue