tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Full Theme Support and More Settings are Functional

This commit is contained in:
Preston 2020-02-29 22:37:02 -05:00
parent f429e346cf
commit 77e7168c73
30 changed files with 1040 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.ejs
View File

@ -15,7 +15,7 @@
<% } %> <% } %>
</head> </head>
<body class="redLight"> <body class="light mainRed secBlue">
<div id="app"></div> <div id="app"></div>
<!-- Set `__static` path to static files in production --> <!-- Set `__static` path to static files in production -->
<script> <script>

32
src/renderer/App.js
View File

@ -18,13 +18,30 @@ export default Vue.extend({
mounted: function () { mounted: function () {
this.$store.dispatch('grabUserSettings') this.$store.dispatch('grabUserSettings')
const theme = localStorage.getItem('theme') let baseTheme = localStorage.getItem('baseTheme')
console.log(theme) let mainColor = localStorage.getItem('mainColor')
let secColor = localStorage.getItem('secColor')
if (theme !== null) { if (baseTheme === null) {
this.updateTheme(theme) baseTheme = 'light'
} }
if (mainColor === null) {
mainColor = 'mainRed'
}
if (secColor === null) {
secColor = 'secBlue'
}
const theme = {
baseTheme: baseTheme,
mainColor: mainColor,
secColor: secColor
}
this.updateTheme(theme)
// Open links externally by default // Open links externally by default
$(document).on('click', 'a[href^="http"]', (event) => { $(document).on('click', 'a[href^="http"]', (event) => {
const el = event.currentTarget const el = event.currentTarget
@ -38,9 +55,12 @@ export default Vue.extend({
methods: { methods: {
updateTheme: function (theme) { updateTheme: function (theme) {
console.log(theme) console.log(theme)
const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
const body = document.getElementsByTagName('body')[0] const body = document.getElementsByTagName('body')[0]
body.className = theme body.className = className
localStorage.setItem('theme', theme) localStorage.setItem('baseTheme', theme.baseTheme)
localStorage.setItem('mainColor', theme.mainColor)
localStorage.setItem('secColor', theme.secColor)
} }
} }
}) })

4
src/renderer/components/ft-button/ft-button.js
View File

@ -19,11 +19,11 @@ export default Vue.extend({
}, },
textColor: { textColor: {
type: String, type: String,
default: '#FFFFFF' default: 'var(--text-with-accent-color)'
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: '#2196F3' default: 'var(--accent-color)'
} }
} }
}) })

21
src/renderer/components/ft-input/ft-input.css
View File

@ -22,6 +22,15 @@
color: var(--teritary-text-color); color: var(--teritary-text-color);
} }
.search .ft-input {
color: var(--text-with-main-color);
border-bottom: 1px solid var(--text-with-main-color);
}
.search ::-webkit-input-placeholder {
color: var(--text-with-main-color);
}
.inputAction { .inputAction {
position: absolute; position: absolute;
padding: 10px; padding: 10px;
@ -32,6 +41,10 @@
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.search .inputAction {
color: var(--text-with-main-color)
}
.inputAction:hover { .inputAction:hover {
background-color: var(--side-nav-hover-color); background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in;
@ -39,9 +52,17 @@
transition: background 0.2s ease-in; transition: background 0.2s ease-in;
} }
.search .inputAction:hover {
background-color: var(--primary-color-hover);
}
.inputAction:active { .inputAction:active {
background-color: var(--teritary-text-color); background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in; transition: background 0.2s ease-in;
} }
.search .inputAction:active {
background-color: var(--primary-color-active);
}

16
src/renderer/components/ft-input/ft-input.js
View File

@ -10,13 +10,25 @@ export default Vue.extend({
showArrow: { showArrow: {
type: Boolean, type: Boolean,
default: true default: true
},
isSearch: {
type: Boolean,
default: false
} }
}, },
data: function () { data: function () {
return { return {
id: '', id: '',
inputData: '', inputData: ''
component: this }
},
computed: {
barColor: function () {
return this.$store.getters.getBarColor
},
forceTextColor: function () {
return this.isSearch && this.barColor
} }
}, },
mounted: function () { mounted: function () {

7
src/renderer/components/ft-input/ft-input.vue
View File

@ -1,5 +1,8 @@
<template> <template>
<div class="ft-input-component"> <div
class="ft-input-component"
:class="{ search: forceTextColor }"
>
<input <input
:id="id" :id="id"
v-model="inputData" v-model="inputData"
@ -11,7 +14,7 @@
v-if="showArrow" v-if="showArrow"
icon="arrow-right" icon="arrow-right"
class="inputAction" class="inputAction"
@click="handleClick(inputData, component)" @click="handleClick"
/> />
</div> </div>
</template> </template>

4
src/renderer/components/ft-select/ft-select.css
View File

@ -40,6 +40,10 @@
border: none; border: none;
} }
.select option {
color: #000000;
}
/* Remove focus */ /* Remove focus */
.select-text:focus { .select-text:focus {
outline: none; outline: none;

40
src/renderer/components/ft-slider/ft-slider.css
View File

@ -1,8 +1,8 @@
.pure-material-slider { .pure-material-slider {
--pure-material-safari-helper1: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04); --pure-material-safari-helper1: var(--accent-color-opacity1);
--pure-material-safari-helper2: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12); --pure-material-safari-helper2: var(--accent-color-opacity2);
--pure-material-safari-helper3: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16); --pure-material-safari-helper3: var(--accent-color-opacity3);
--pure-material-safari-helper4: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24); --pure-material-safari-helper4: var(--accent-color-opacity4);
display: inline-block; display: inline-block;
width: 220px; width: 220px;
color: rgba(var(--primary-text-color), 0.87); color: rgba(var(--primary-text-color), 0.87);
@ -58,7 +58,7 @@
border-radius: 1px; border-radius: 1px;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24); background-color: var(--accent-color-opacity4);
} }
/* Webkit | Thumb */ /* Webkit | Thumb */
@ -69,7 +69,7 @@
border-radius: 50%; border-radius: 50%;
height: 2px; height: 2px;
width: 2px; width: 2px;
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); background-color: var(--accent-color);
transform: scale(6, 6); transform: scale(6, 6);
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
@ -110,7 +110,7 @@
border-radius: 1px; border-radius: 1px;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24); background-color: var(--accent-color-opacity4);
} }
/* Moz | Thumb */ /* Moz | Thumb */
@ -121,7 +121,7 @@
border-radius: 50%; border-radius: 50%;
height: 2px; height: 2px;
width: 2px; width: 2px;
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); background-color: var(--accent-color);
transform: scale(6, 6); transform: scale(6, 6);
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
@ -130,25 +130,25 @@
.pure-material-slider > input::-moz-range-progress { .pure-material-slider > input::-moz-range-progress {
border-radius: 1px; border-radius: 1px;
height: 2px; height: 2px;
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); background-color: var(--accent-color);
} }
/* Moz | Hover, Focus */ /* Moz | Hover, Focus */
.pure-material-slider:hover > input:hover::-moz-range-thumb { .pure-material-slider:hover > input:hover::-moz-range-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04); box-shadow: 0 0 0 2px var(--accent-color-opacity1);
} }
.pure-material-slider > input:focus::-moz-range-thumb { .pure-material-slider > input:focus::-moz-range-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12); box-shadow: 0 0 0 2px var(--accent-color-opacity2);
} }
.pure-material-slider:hover > input:focus::-moz-range-thumb { .pure-material-slider:hover > input:focus::-moz-range-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16); box-shadow: 0 0 0 2px var(--accent-color-opacity3);
} }
/* Moz | Active */ /* Moz | Active */
.pure-material-slider > input:active::-moz-range-thumb { .pure-material-slider > input:active::-moz-range-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important; box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
} }
/* Moz | Disabled */ /* Moz | Disabled */
@ -185,14 +185,14 @@
.pure-material-slider > input::-ms-fill-lower { .pure-material-slider > input::-ms-fill-lower {
border-radius: 1px; border-radius: 1px;
height: 2px; height: 2px;
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); background-color: var(--accent-color);
} }
/* MS | Progress */ /* MS | Progress */
.pure-material-slider > input::-ms-fill-upper { .pure-material-slider > input::-ms-fill-upper {
border-radius: 1px; border-radius: 1px;
height: 2px; height: 2px;
background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24); background-color: var(--accent-color-opacity4);
} }
/* MS | Thumb */ /* MS | Thumb */
@ -203,27 +203,27 @@
border-radius: 50%; border-radius: 50%;
height: 2px; height: 2px;
width: 2px; width: 2px;
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243)); background-color: var(--accent-color);
transform: scale(6, 6); transform: scale(6, 6);
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
/* MS | Hover, Focus */ /* MS | Hover, Focus */
.pure-material-slider:hover > input::-ms-thumb { .pure-material-slider:hover > input::-ms-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.04); box-shadow: 0 0 0 2px var(--accent-color-opacity1);
} }
.pure-material-slider > input:focus::-ms-thumb { .pure-material-slider > input:focus::-ms-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.12); box-shadow: 0 0 0 2px var(--accent-color-opacity2);
} }
.pure-material-slider:hover > input:focus::-ms-thumb { .pure-material-slider:hover > input:focus::-ms-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.16); box-shadow: 0 0 0 2px var(--accent-color-opacity3);
} }
/* MS | Active */ /* MS | Active */
.pure-material-slider > input:active::-ms-thumb { .pure-material-slider > input:active::-ms-thumb {
box-shadow: 0 0 0 2px rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.24) !important; box-shadow: 0 0 0 2px var(--accent-color-opacity4) !important;
} }
/* MS | Disabled */ /* MS | Disabled */

5
src/renderer/components/ft-slider/ft-slider.js
View File

@ -43,6 +43,11 @@ export default Vue.extend({
} }
} }
}, },
watch: {
defaultValue: function () {
this.currentValue = this.defaultValue
}
},
mounted: function () { mounted: function () {
this.id = this._uid this.id = this._uid
this.currentValue = this.defaultValue this.currentValue = this.defaultValue

1
src/renderer/components/ft-slider/ft-slider.vue
View File

@ -9,6 +9,7 @@
:max="maxValue" :max="maxValue"
:step="step" :step="step"
v-model.number="currentValue" v-model.number="currentValue"
@change="$emit('change', $event.target.value)"
> >
<span> <span>
{{ label }} - {{ label }} -

4
src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
View File

@ -55,11 +55,11 @@
} }
.switch-input:checked+.switch-label:before { .switch-input:checked+.switch-label:before {
background-color: #90CAF9; background-color: var(--accent-color-light);
} }
.switch-input:checked+.switch-label:after { .switch-input:checked+.switch-label:after {
background-color: #2196F3; background-color: var(--accent-color);
-ms-transform: translate(80%, -50%); -ms-transform: translate(80%, -50%);
-webkit-transform: translate(80%, -50%); -webkit-transform: translate(80%, -50%);
transform: translate(80%, -50%); transform: translate(80%, -50%);

30
src/renderer/components/ft-video-player/ft-video-player.js
View File

@ -46,6 +46,7 @@ export default Vue.extend({
data: function () { data: function () {
return { return {
id: '', id: '',
volume: 1,
player: null, player: null,
useDash: false, useDash: false,
useHls: false, useHls: false,
@ -99,17 +100,27 @@ export default Vue.extend({
return this.$store.getters.getListType return this.$store.getters.getListType
}, },
videoFormatPreference: function () { defaultPlayback: function () {
return this.$store.getters.getVideoFormatPreference return this.$store.getters.getDefaultPlayback
}, },
autoplay: function () { defaultVideoFormat: function () {
return this.$store.getters.getAutoplay return this.$store.getters.getDefaultVideoFormat
},
autoplayVideos: function () {
return this.$store.getters.getAutoplayVideos
} }
}, },
mounted: function () { mounted: function () {
this.id = this._uid this.id = this._uid
const volume = sessionStorage.getItem('volume')
if (volume !== null) {
this.volume = volume
}
this.determineFormatType() this.determineFormatType()
}, },
beforeDestroy: function () { beforeDestroy: function () {
@ -129,6 +140,9 @@ export default Vue.extend({
this.player = videojs(videoPlayer) this.player = videojs(videoPlayer)
this.player.volume(this.volume)
this.player.playbackRate(this.defaultPlayback)
this.player.vttThumbnails({ this.player.vttThumbnails({
src: this.storyboardSrc src: this.storyboardSrc
}) })
@ -141,7 +155,7 @@ export default Vue.extend({
this.player.httpSourceSelector() this.player.httpSourceSelector()
} }
if (this.autoplay) { if (this.autoplayVideos) {
// Calling play() won't happen right away, so a quick timeout will make it function properly. // Calling play() won't happen right away, so a quick timeout will make it function properly.
setTimeout(() => { setTimeout(() => {
this.player.play() this.player.play()
@ -152,6 +166,7 @@ export default Vue.extend({
this.player.on('mousemove', this.hideMouseTimeout) this.player.on('mousemove', this.hideMouseTimeout)
this.player.on('mouseleave', this.removeMouseTimeout) this.player.on('mouseleave', this.removeMouseTimeout)
this.player.on('volumechange', this.updateVolume)
const v = this const v = this
@ -161,6 +176,11 @@ export default Vue.extend({
} }
}, },
updateVolume: function (event) {
const volume = this.player.volume()
sessionStorage.setItem('volume', volume)
},
determineFormatType: function () { determineFormatType: function () {
if (this.format === 'dash') { if (this.format === 'dash') {
this.enableDashFormat() this.enableDashFormat()

21
src/renderer/components/general-settings/general-settings.js
View File

@ -16,17 +16,6 @@ export default Vue.extend({
data: function () { data: function () {
return { return {
title: 'General Settings', title: 'General Settings',
currentTheme: '',
themeNames: [
'Light Red',
'Dark Red',
'Gray Red'
],
themeValues: [
'redLight',
'redDark',
'redGray'
],
backendNames: [ backendNames: [
'Invidious API', 'Invidious API',
'Local API' 'Local API'
@ -558,9 +547,6 @@ export default Vue.extend({
checkForUpdates: function () { checkForUpdates: function () {
return this.$store.getters.getCheckForUpdates return this.$store.getters.getCheckForUpdates
}, },
barColor: function () {
return this.$store.getters.getBarColor
},
backendPreference: function () { backendPreference: function () {
return this.$store.getters.getBackendPreference return this.$store.getters.getBackendPreference
}, },
@ -577,14 +563,7 @@ export default Vue.extend({
return this.$store.getters.getThumbnailPreference return this.$store.getters.getThumbnailPreference
} }
}, },
mounted: function () {
this.currentTheme = localStorage.getItem('theme')
},
methods: { methods: {
updateTheme: function (theme) {
this.$parent.$parent.updateTheme(theme)
},
...mapActions([ ...mapActions([
'updateBackendFallback', 'updateBackendFallback',
'updateCheckForUpdates', 'updateCheckForUpdates',

12
src/renderer/components/general-settings/general-settings.vue
View File

@ -17,11 +17,6 @@
:default-value="checkForUpdates" :default-value="checkForUpdates"
@change="updateCheckForUpdates" @change="updateCheckForUpdates"
/> />
<ft-toggle-switch
label="Match Top Bar with Theme Color"
:default-value="barColor"
@change="updateBarColor"
/>
</ft-flex-box> </ft-flex-box>
<br> <br>
<ft-flex-box> <ft-flex-box>
@ -32,13 +27,6 @@
:select-values="backendValues" :select-values="backendValues"
@change="updateBackendPreference" @change="updateBackendPreference"
/> />
<ft-select
placeholder="Default Theme"
:value="currentTheme"
:select-names="themeNames"
:select-values="themeValues"
@change="updateTheme"
/>
<ft-select <ft-select
placeholder="Default Landing Page" placeholder="Default Landing Page"
:value="landingPage" :value="landingPage"

65
src/renderer/components/player-settings/player-settings.js
View File

@ -1,4 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import { mapActions } from 'vuex'
import FtCard from '../ft-card/ft-card.vue' import FtCard from '../ft-card/ft-card.vue'
import FtSelect from '../ft-select/ft-select.vue' import FtSelect from '../ft-select/ft-select.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue' import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
@ -54,13 +55,67 @@ export default Vue.extend({
} }
}, },
computed: { computed: {
invidiousInstance: function () { rememberHistory: function () {
return this.$store.getters.getInvidiousInstance return this.$store.getters.getRememberHistory
},
autoplayVideos: function () {
return this.$store.getters.getAutoplayVideos
},
autoplayPlaylists: function () {
return this.$store.getters.getAutoplayPlaylists
},
playNextVideo: function () {
return this.$store.getters.getPlayNextVideo
},
enableSubtitles: function () {
return this.$store.getters.getEnableSubtitles
},
forceLocalBackendForLegacy: function () {
return this.$store.getters.getForceLocalBackendForLegacy
},
proxyVideos: function () {
return this.$store.getters.getProxyVideos
},
defaultVolume: function () {
return parseFloat(this.$store.getters.getDefaultVolume) * 100
},
defaultPlayback: function () {
return parseFloat(this.$store.getters.getDefaultPlayback)
},
defaultVideoFormat: function () {
return this.$store.getters.getDefaultVideoFormat
},
defaultQuality: function () {
return this.$store.getters.getDefaultQuality
} }
}, },
methods: { methods: {
goToChannel: function () { parseVolumeBeforeUpdate: function (volume) {
console.log('TODO: Handle goToChannel') this.updateDefaultVolume(volume / 100)
} },
...mapActions([
'updateRememberHistory',
'updateAutoplayVideos',
'updateAutoplayPlaylists',
'updatePlayNextVideo',
'updateEnableSubtitles',
'updateForceLocalBackendForLegacy',
'updateProxyVideos',
'updateDefaultVolume',
'updateDefaultPlayback',
'updateDefaultVideoFormat',
'updateDefaultQuality'
])
} }
}) })

26
src/renderer/components/player-settings/player-settings.vue
View File

@ -9,58 +9,76 @@
<ft-flex-box> <ft-flex-box>
<ft-toggle-switch <ft-toggle-switch
label="Remember History" label="Remember History"
:default-value="rememberHistory"
@change="updateRememberHistory"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Autoplay Videos" label="Autoplay Videos"
:default-value="autoplayVideos"
@change="updateAutoplayVideos"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Autoplay Playlists" label="Autoplay Playlists"
:default-value="autoplayPlaylists"
@change="updateAutoplayPlaylists"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Play Next Video" label="Play Next Video"
:default-value="playNextVideo"
@change="updatePlayNextVideo"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Enable Subtitles by Default" label="Enable Subtitles by Default"
:default-value="enableSubtitles"
@change="updateEnableSubtitles"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Force Local Backend for Legacy Formats" label="Force Local Backend for Legacy Formats"
:default-value="forceLocalBackendForLegacy"
@change="updateForceLocalBackendForLegacy"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Proxy Videos Through Invidious" label="Proxy Videos Through Invidious"
:default-value="proxyVideos"
@change="updateProxyVideos"
/> />
</ft-flex-box> </ft-flex-box>
<br> <br>
<ft-flex-box> <ft-flex-box>
<ft-slider <ft-slider
label="Default Volume" label="Default Volume"
:default-value="100" :default-value="defaultVolume"
:min-value="0" :min-value="0"
:max-value="100" :max-value="100"
:step="1" :step="1"
value-extension="%" value-extension="%"
@change="parseVolumeBeforeUpdate"
/> />
<ft-slider <ft-slider
label="Default Playback Rate" label="Default Playback Rate"
:default-value="1" :default-value="defaultPlayback"
:min-value="0.25" :min-value="0.25"
:max-value="3" :max-value="3"
:step="0.25" :step="0.25"
value-extension="x" value-extension="x"
@change="updateDefaultPlayback"
/> />
</ft-flex-box> </ft-flex-box>
<br> <br>
<ft-flex-box> <ft-flex-box>
<ft-select <ft-select
placeholder="Default Video Format" placeholder="Default Video Format"
:value="formatValues[0]" :value="defaultVideoFormat"
:select-names="formatNames" :select-names="formatNames"
:select-values="formatValues" :select-values="formatValues"
@change="updateDefaultVideoFormat"
/> />
<ft-select <ft-select
placeholder="Default Quality" placeholder="Default Quality"
:value="qualityValues[0]" :value="defaultQuality"
:select-names="qualityNames" :select-names="qualityNames"
:select-values="qualityValues" :select-values="qualityValues"
@change="updateDefaultQuality"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </ft-card>

9
src/renderer/components/theme-settings/theme-settings.css Normal file
View File

@ -0,0 +1,9 @@
.relative {
position: relative;
}
.card {
width: 85%;
margin: 0 auto;
margin-bottom: 10px;
}

127
src/renderer/components/theme-settings/theme-settings.js Normal file
View File

@ -0,0 +1,127 @@
import Vue from 'vue'
import { mapActions } from 'vuex'
import FtCard from '../ft-card/ft-card.vue'
import FtSelect from '../ft-select/ft-select.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
export default Vue.extend({
name: 'ThemeSettings',
components: {
'ft-card': FtCard,
'ft-select': FtSelect,
'ft-toggle-switch': FtToggleSwitch,
'ft-flex-box': FtFlexBox
},
data: function () {
return {
title: 'Theme Settings',
currentBaseTheme: '',
currentMainColor: '',
currentSecColor: '',
baseThemeNames: [
'Light',
'Dark',
'Gray'
],
baseThemeValues: [
'light',
'dark',
'gray'
],
colorNames: [
'Red',
'Pink',
'Purple',
'Deep Purple',
'Indigo',
'Blue',
'Light Blue',
'Cyan',
'Teal',
'Green',
'Light Green',
'Lime',
'Yellow',
'Amber',
'Orange',
'Deep Orange'
],
colorValues: [
'Red',
'Pink',
'Purple',
'DeepPurple',
'Indigo',
'Blue',
'LightBlue',
'Cyan',
'Teal',
'Green',
'LightGreen',
'Lime',
'Yellow',
'Amber',
'Orange',
'DeepOrange'
]
}
},
computed: {
barColor: function () {
return this.$store.getters.getBarColor
}
},
mounted: function () {
this.currentBaseTheme = localStorage.getItem('baseTheme')
this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
},
methods: {
updateBaseTheme: function (theme) {
const mainColor = `main${this.currentMainColor}`
const secColor = `sec${this.currentSecColor}`
const payload = {
baseTheme: theme,
mainColor: mainColor,
secColor: secColor
}
this.$parent.$parent.updateTheme(payload)
this.currentBaseTheme = theme
},
updateMainColor: function (color) {
const mainColor = `main${color}`
const secColor = `sec${this.currentSecColor}`
const payload = {
baseTheme: this.currentBaseTheme,
mainColor: mainColor,
secColor: secColor
}
this.$parent.$parent.updateTheme(payload)
this.currentMainColor = color
},
updateSecColor: function (color) {
const mainColor = `main${this.currentMainColor}`
const secColor = `sec${color}`
const payload = {
baseTheme: this.currentBaseTheme,
mainColor: mainColor,
secColor: secColor
}
this.$parent.$parent.updateTheme(payload)
this.currentSecColor = color
},
...mapActions([
'updateBarColor'
])
}
})

42
src/renderer/components/theme-settings/theme-settings.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<ft-card
class="relative card">
<h3>
{{ title }}
</h3>
<ft-flex-box>
<ft-toggle-switch
label="Match Top Bar with Main Color"
:default-value="barColor"
@change="updateBarColor"
/>
</ft-flex-box>
<br>
<ft-flex-box>
<ft-select
placeholder="Base Theme"
:value="currentBaseTheme"
:select-names="baseThemeNames"
:select-values="baseThemeValues"
@change="updateBaseTheme"
/>
<ft-select
placeholder="Main Color Theme"
:value="currentMainColor"
:select-names="colorNames"
:select-values="colorValues"
@change="updateMainColor"
/>
<ft-select
placeholder="Secondary Color Theme"
:value="currentSecColor"
:select-names="colorNames"
:select-values="colorValues"
@change="updateSecColor"
/>
</ft-flex-box>
</ft-card>
</template>
<script src="./theme-settings.js" />
<style scoped src="./theme-settings.css" />

87
src/renderer/components/top-nav/top-nav.css
View File

@ -18,6 +18,9 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
}
.navIcon {
font-size: 20px; font-size: 20px;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
@ -30,78 +33,42 @@
transition: background 0.2s ease-out; transition: background 0.2s ease-out;
} }
.menuIcon:hover { .topNavBarColor .navIcon {
color: var(--text-with-main-color);
}
.navIcon:hover {
background-color: var(--side-nav-hover-color); background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in; transition: background 0.2s ease-in;
} }
.menuIcon:active { .topNavBarColor .navIcon:hover {
background-color: var(--primary-color-hover);
}
.navIcon:active {
background-color: var(--teritary-text-color); background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in; transition: background 0.2s ease-in;
} }
.topNavBarColor .menuIcon:active {
background-color: var(--primary-color-active)
}
.navBackIcon { .navBackIcon {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 50px; left: 50px;
font-size: 20px;
padding: 10px;
cursor: pointer;
color: var(--primary-text-color);
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
}
.navBackIcon:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.navBackIcon:active {
background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
} }
.navForwardIcon { .navForwardIcon {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 85px; left: 85px;
font-size: 20px;
padding: 10px;
cursor: pointer;
color: var(--primary-text-color);
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
-webkit-transition: background 0.2s ease-out;
-moz-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
transition: background 0.2s ease-out;
}
.navForwardIcon:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.navForwardIcon:active {
background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
} }
.logoIcon { .logoIcon {
@ -142,32 +109,14 @@
position: relative; position: relative;
} }
.search { .searchInput {
width: 450px; width: 450px;
} }
.navFilterIcon { .navFilterIcon {
position: absolute; position: absolute;
padding: 10px;
top: 10px; top: 10px;
right: 10px; right: 10px;
cursor: pointer;
border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
}
.navFilterIcon:hover {
background-color: var(--side-nav-hover-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.navFilterIcon:active {
background-color: var(--teritary-text-color);
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
} }
.searchFilters { .searchFilters {

11
src/renderer/components/top-nav/top-nav.vue
View File

@ -4,17 +4,17 @@
:class="{ topNavBarColor: barColor }" :class="{ topNavBarColor: barColor }"
> >
<font-awesome-icon <font-awesome-icon
class="menuIcon" class=" menuIcon navIcon"
icon="bars" icon="bars"
@click="toggleSideNav" @click="toggleSideNav"
/> />
<font-awesome-icon <font-awesome-icon
class="navBackIcon" class="navBackIcon navIcon"
icon="arrow-left" icon="arrow-left"
@click="historyBack" @click="historyBack"
/> />
<font-awesome-icon <font-awesome-icon
class="navForwardIcon" class="navForwardIcon navIcon"
icon="arrow-right" icon="arrow-right"
@click="historyForward" @click="historyForward"
/> />
@ -29,11 +29,12 @@
<div class="searchContainer"> <div class="searchContainer">
<ft-input <ft-input
placeholder="Search / Go to URL" placeholder="Search / Go to URL"
class="search" class="searchInput"
:is-search="true"
@click="goToSearch" @click="goToSearch"
/> />
<font-awesome-icon <font-awesome-icon
class="navFilterIcon" class="navFilterIcon navIcon"
icon="filter" icon="filter"
@click="showFilters = !showFilters" @click="showFilters = !showFilters"
/> />

317
src/renderer/store/modules/settings.js
View File

@ -9,30 +9,29 @@ const settingsDb = new Datastore({
const state = { const state = {
currentTheme: 'lightRed', currentTheme: 'lightRed',
barColor: false,
listType: 'grid',
invidiousInstance: 'https://invidio.us',
backendPreference: 'local',
useClickBaitRemover: true,
thumbnailPreference: '',
backendFallback: true, backendFallback: true,
videoFormatPreference: 'dash',
defaultQuality: 'Auto',
videoAutoplay: true,
playlistAutoplay: true,
playNextVideo: false,
checkForUpdates: true, checkForUpdates: true,
useTor: false, backendPreference: 'local',
history: true,
subtitles: false,
player: 'dash',
volume: 1,
rate: '1',
proxy: 'SOCKS5://127.0.0.1:9050',
proxyVideos: false,
region: 'US',
debugMode: false,
landingPage: 'subscriptions', landingPage: 'subscriptions',
region: 'US',
listType: 'grid',
thumbnailPreference: '',
invidiousInstance: 'https://invidio.us',
barColor: false,
rememberHistory: true,
autoplayVideos: true,
autoplayPlaylists: true,
playNextVideo: false,
enableSubtitles: true,
forceLocalBackendForLegacy: true,
proxyVideos: false,
defaultVolume: 1,
defaultPlayback: 1,
defaultVideoFormat: 'dash',
defaultQuality: 'auto',
useTor: false,
proxy: 'SOCKS5://127.0.0.1:9050',
debugMode: false,
disctractionFreeMode: false, disctractionFreeMode: false,
hideWatchedSubs: false, hideWatchedSubs: false,
profileList: [{ name: 'All Channels', color: '#304FFE' }], profileList: [{ name: 'All Channels', color: '#304FFE' }],
@ -76,12 +75,48 @@ const getters = {
return state.invidiousInstance return state.invidiousInstance
}, },
getVideoFormatPreference: () => { getRememberHistory: () => {
return state.videoFormatPreference return state.rememberHistory
}, },
getAutoplay: () => { getAutoplayVideos: () => {
return state.videoAutoplay return state.autoplayVideos
},
getAutoplayPlaylists: () => {
return state.autoplayPlaylists
},
getPlayNextVideo: () => {
return state.playNextVideo
},
getEnableSubtitles: () => {
return state.enableSubtitles
},
getForceLocalBackendForLegacy: () => {
return state.forceLocalBackendForLegacy
},
getProxyVideos: () => {
return state.proxyVideos
},
getDefaultVolume: () => {
return state.defaultVolume
},
getDefaultPlayback: () => {
return state.defaultPlayback
},
getDefaultVideoFormat: () => {
return state.defaultVideoFormat
},
getDefaultQuality: () => {
return state.defaultQuality
} }
} }
@ -89,6 +124,7 @@ const actions = {
grabUserSettings ({ commit }) { grabUserSettings ({ commit }) {
settingsDb.find({}, (err, results) => { settingsDb.find({}, (err, results) => {
if (!err) { if (!err) {
console.log(results)
results.forEach((result) => { results.forEach((result) => {
switch (result._id) { switch (result._id) {
case 'backendFallback': case 'backendFallback':
@ -97,9 +133,6 @@ const actions = {
case 'checkForUpdates': case 'checkForUpdates':
commit('setCheckForUpdates', result.value) commit('setCheckForUpdates', result.value)
break break
case 'barColor':
commit('setBarColor', result.value)
break
case 'backendPreference': case 'backendPreference':
commit('setBackendPreference', result.value) commit('setBackendPreference', result.value)
break break
@ -115,6 +148,43 @@ const actions = {
case 'thumbnailPreference': case 'thumbnailPreference':
commit('setThumbnailPreference', result.value) commit('setThumbnailPreference', result.value)
break break
case 'barColor':
commit('setBarColor', result.value)
break
case 'rememberHistory':
commit('setRememberHistory', result.value)
break
case 'autoplayVideos':
commit('setAutoplayVideos', result.value)
break
case 'autoplayPlaylists':
commit('setAutoplayPlaylists', result.value)
break
case 'playNextVideo':
commit('setPlayNextVideo', result.value)
break
case 'enableSubtitles':
commit('setEnableSubtitles', result.value)
break
case 'forceLocalBackendForLegacy':
commit('setForceLocalBackendForLegacy', result.value)
break
case 'proxyVideos':
commit('setProxyVideos', result.value)
break
case 'defaultVolume':
commit('setDefaultVolume', result.value)
sessionStorage.setItem('volume', result.value)
break
case 'defaultPlayback':
commit('setDefaultPlayback', result.value)
break
case 'defaultVideoFormat':
commit('setDefaultVideoFormat', result.value)
break
case 'defaultQuality':
commit('setDefaultQuality', result.value)
break
} }
}) })
} }
@ -137,14 +207,6 @@ const actions = {
}) })
}, },
updateBarColor ({ commit }, barColor) {
settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setBarColor', barColor)
}
})
},
updateBackendPreference ({ commit }, backendPreference) { updateBackendPreference ({ commit }, backendPreference) {
settingsDb.update({ _id: 'backendPreference' }, { _id: 'backendPreference', value: backendPreference }, { upsert: true }, (err, numReplaced) => { settingsDb.update({ _id: 'backendPreference' }, { _id: 'backendPreference', value: backendPreference }, { upsert: true }, (err, numReplaced) => {
if (!err) { if (!err) {
@ -185,36 +247,109 @@ const actions = {
}) })
}, },
updateBarColor ({ commit }, barColor) {
settingsDb.update({ _id: 'barColor' }, { _id: 'barColor', value: barColor }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setBarColor', barColor)
}
})
},
updateRememberHistory ({ commit }, history) {
settingsDb.update({ _id: 'rememberHistory' }, { _id: 'rememberHistory', value: history }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setRememberHistory', history)
}
})
},
updateAutoplayVideos ({ commit }, autoplayVideos) {
settingsDb.update({ _id: 'autoplayVideos' }, { _id: 'autoplayVideos', value: autoplayVideos }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setAutoplayVideos', autoplayVideos)
}
})
},
updateAutoplayPlaylists ({ commit }, autoplayPlaylists) {
settingsDb.update({ _id: 'autoplayPlaylists' }, { _id: 'autoplayPlaylists', value: autoplayPlaylists }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setAutoplayPlaylists', autoplayPlaylists)
}
})
},
updatePlayNextVideo ({ commit }, playNextVideo) {
settingsDb.update({ _id: 'playNextVideo' }, { _id: 'playNextVideo', value: playNextVideo }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setPlayNextVideo', playNextVideo)
}
})
},
updateEnableSubtitles ({ commit }, enableSubtitles) {
settingsDb.update({ _id: 'enableSubtitles' }, { _id: 'enableSubtitles', value: enableSubtitles }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setEnableSubtitles', enableSubtitles)
}
})
},
updateForceLocalBackendForLegacy ({ commit }, forceLocalBackendForLegacy) {
settingsDb.update({ _id: 'forceLocalBackendForLegacy' }, { _id: 'forceLocalBackendForLegacy', value: forceLocalBackendForLegacy }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setForceLocalBackendForLegacy', forceLocalBackendForLegacy)
}
})
},
updateProxyVideos ({ commit }, proxyVideos) {
settingsDb.update({ _id: 'proxyVideos' }, { _id: 'proxyVideos', value: proxyVideos }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setProxyVideos', proxyVideos)
}
})
},
updateDefaultVolume ({ commit }, defaultVolume) {
settingsDb.update({ _id: 'defaultVolume' }, { _id: 'defaultVolume', value: defaultVolume }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setDefaultVolume', defaultVolume)
sessionStorage.setItem('volume', defaultVolume)
}
})
},
updateDefaultPlayback ({ commit }, defaultPlayback) {
settingsDb.update({ _id: 'defaultPlayback' }, { _id: 'defaultPlayback', value: defaultPlayback }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setDefaultPlayback', defaultPlayback)
}
})
},
updateDefaultVideoFormat ({ commit }, defaultVideoFormat) {
settingsDb.update({ _id: 'defaultVideoFormat' }, { _id: 'defaultVideoFormat', value: defaultVideoFormat }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setDefaultVideoFormat', defaultVideoFormat)
}
})
},
updateDefaultQuality ({ commit }, defaultQuality) {
settingsDb.update({ _id: 'defaultQuality' }, { _id: 'defaultQuality', value: defaultQuality }, { upsert: true }, (err, numReplaced) => {
if (!err) {
commit('setDefaultQuality', defaultQuality)
}
})
},
updateUseTor ({ commit }, useTor) { updateUseTor ({ commit }, useTor) {
settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => { settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
if (!err) { if (!err) {
commit('setUseTor', useTor) commit('setUseTor', useTor)
} }
}) })
},
updateSetHistory ({ commit }, history) {
settingsDb.update({ _id: history }, { value: history }, { upsert: true }, (err, history) => {
if (!err) {
commit('setHistory', history)
}
})
},
updateAutoPlay ({ commit }, autoplay) {
settingsDb.update({ _id: autoplay }, { value: autoplay }, { upsert: true }, (err, autoplay) => {
if (!err) {
commit('setAutoplay', autoplay)
}
})
},
updateAutoPlayPlaylists ({ commit }, autoplayPlaylists) {
settingsDb.update({ _id: autoplayPlaylists }, { value: autoplayPlaylists }, { upsert: true }, (err, autoplayPlaylists) => {
if (!err) {
commit('setAutoplayPlaylists', autoplayPlaylists)
}
})
} }
} }
@ -228,9 +363,6 @@ const mutations = {
setCheckForUpdates (state, checkForUpdates) { setCheckForUpdates (state, checkForUpdates) {
state.checkForUpdates = checkForUpdates state.checkForUpdates = checkForUpdates
}, },
setBarColor (state, barColor) {
state.barColor = barColor
},
setBackendPreference (state, backendPreference) { setBackendPreference (state, backendPreference) {
state.backendPreference = backendPreference state.backendPreference = backendPreference
}, },
@ -246,14 +378,14 @@ const mutations = {
setThumbnailPreference (state, thumbnailPreference) { setThumbnailPreference (state, thumbnailPreference) {
state.thumbnailPreference = thumbnailPreference state.thumbnailPreference = thumbnailPreference
}, },
setUseTor (state, useTor) { setBarColor (state, barColor) {
state.useTor = useTor state.barColor = barColor
}, },
setHistory (state, history) { setRememberHistory (state, rememberHistory) {
state.history = history state.rememberHistory = rememberHistory
}, },
setAutoplay (state, autoplay) { setAutoplayVideos (state, autoplayVideos) {
state.autoplay = autoplay state.autoplayVideos = autoplayVideos
}, },
setAutoplayPlaylists (state, autoplayPlaylists) { setAutoplayPlaylists (state, autoplayPlaylists) {
state.autoplayPlaylists = autoplayPlaylists state.autoplayPlaylists = autoplayPlaylists
@ -261,39 +393,36 @@ const mutations = {
setPlayNextVideo (state, playNextVideo) { setPlayNextVideo (state, playNextVideo) {
state.playNextVideo = playNextVideo state.playNextVideo = playNextVideo
}, },
setSubtitles (state, subtitles) { setEnableSubtitles (state, enableSubtitles) {
state.subtitles = subtitles state.enableSubtitles = enableSubtitles
}, },
setUpdates (state, updates) { setForceLocalBackendForLegacy (state, forceLocalBackendForLegacy) {
state.updates = updates state.forceLocalBackendForLegacy = forceLocalBackendForLegacy
},
setLocalScrape (state, localScrape) {
state.localScrape = localScrape
},
setPlayer (state, player) {
state.player = player
},
setQuality (state, quality) {
state.quality = quality
},
setVolume (state, volume) {
state.volume = volume
},
setRate (state, rate) {
state.rate = rate
},
setProxy (state, proxy) {
state.proxy = proxy
}, },
setProxyVideos (state, proxyVideos) { setProxyVideos (state, proxyVideos) {
state.proxyVideos = proxyVideos state.proxyVideos = proxyVideos
}, },
setDefaultVolume (state, defaultVolume) {
state.defaultVolume = defaultVolume
},
setDefaultPlayback (state, defaultPlayback) {
state.defaultPlayback = defaultPlayback
},
setDefaultVideoFormat (state, defaultVideoFormat) {
state.defaultVideoFormat = defaultVideoFormat
},
setDefaultQuality (state, defaultQuality) {
state.defaultQuality = defaultQuality
},
setProxy (state, proxy) {
state.proxy = proxy
},
setUseTor (state, useTor) {
state.useTor = useTor
},
setDebugMode (state, debugMode) { setDebugMode (state, debugMode) {
state.debugMode = debugMode state.debugMode = debugMode
}, },
setStartScreen (state, startScreen) {
state.startScreen = startScreen
},
setDistractionFreeMode (state, disctractionFreeMode) { setDistractionFreeMode (state, disctractionFreeMode) {
state.disctractionFreeMode = disctractionFreeMode state.disctractionFreeMode = disctractionFreeMode
}, },

12
src/renderer/store/modules/utils.js
View File

@ -12,16 +12,20 @@ const state = {
} }
const getters = { const getters = {
getIsSideNavOpen () {
return state.isSideNavOpen
},
getCurrentVolume () {
return state.currentVolume
},
getSessionSearchHistory () { getSessionSearchHistory () {
return state.sessionSearchHistory return state.sessionSearchHistory
}, },
getSearchSettings () { getSearchSettings () {
return state.searchSettings return state.searchSettings
},
getIsSideNavOpen () {
return state.isSideNavOpen
} }
} }

23
src/renderer/store/modules/ytdl.js
View File

@ -2,6 +2,8 @@ import ytdl from 'ytdl-core'
import ytsr from 'ytsr' import ytsr from 'ytsr'
import ytpl from 'ytpl' import ytpl from 'ytpl'
import IsEqual from 'lodash.isequal'
const state = { const state = {
main: 0, main: 0,
isYtSearchRunning: false isYtSearchRunning: false
@ -22,8 +24,16 @@ const actions = {
resolve(false) resolve(false)
} }
const defaultFilters = {
sortBy: 'relevance',
time: '',
type: 'all',
duration: ''
}
commit('toggleIsYtSearchRunning') commit('toggleIsYtSearchRunning')
if (!IsEqual(defaultFilters, rootState.utils.searchSettings)) {
dispatch('ytSearchGetFilters', payload).then((filter) => { dispatch('ytSearchGetFilters', payload).then((filter) => {
if (typeof (payload.options.nextpageRef) === 'undefined' && filter !== payload.query) { if (typeof (payload.options.nextpageRef) === 'undefined' && filter !== payload.query) {
payload.options.nextpageRef = filter payload.options.nextpageRef = filter
@ -41,6 +51,19 @@ const actions = {
} }
}) })
}) })
} else {
ytsr(payload.query, payload.options, (err, result) => {
commit('toggleIsYtSearchRunning')
if (err) {
console.log(err)
reject(err)
} else {
console.log(result)
console.log('done')
resolve(result)
}
})
}
}) })
}, },

352
src/renderer/themes.css
View File

@ -1,8 +1,4 @@
.redLight { .light {
--primary-color: #f44336;
--primary-color-hover: #e53935;
--primary-color-active: #c62828;
--accent-color: #2196F3;
--primary-text-color: #212121; --primary-text-color: #212121;
--secondary-text-color: #424242; --secondary-text-color: #424242;
--teritary-text-color: #757575; --teritary-text-color: #757575;
@ -18,15 +14,10 @@
--search-bar-color: #f5f5f5; --search-bar-color: #f5f5f5;
--logo-icon: url("/_icons/iconColorSmall.png"); --logo-icon: url("/_icons/iconColorSmall.png");
--logo-text: url("/_icons/textColorSmall.png"); --logo-text: url("/_icons/textColorSmall.png");
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png");
} }
.redDark {
--primary-color: #f44336; .dark {
--primary-color-hover: #e53935;
--primary-color-active: #c62828;
--accent-color: #2196F3;
--primary-text-color: #EEEEEE; --primary-text-color: #EEEEEE;
--secondary-text-color: #E0E0E0; --secondary-text-color: #E0E0E0;
--teritary-text-color: #F5F5F5; --teritary-text-color: #F5F5F5;
@ -42,34 +33,331 @@
--search-bar-color: #f5f5f5; --search-bar-color: #f5f5f5;
--logo-icon: url("/_icons/iconColorSmall.png"); --logo-icon: url("/_icons/iconColorSmall.png");
--logo-text: url("/_icons/textColorSmall.png"); --logo-text: url("/_icons/textColorSmall.png");
}
.gray {
--primary-text-color: #EEEEEE;
--secondary-text-color: #E0E0E0;
--teritary-text-color: #F5F5F5;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(0, 0, 0, 0.75);
--title-color: #EEEEEE;
--bg-color: #212121;
--card-bg-color: #303030;
--secondary-card-bg-color: rgba(0, 0, 0, 0.75);
--side-nav-color: #262626;
--side-nav-hover-color: #212121;
--side-nav-active-color: #303030;
--search-bar-color: #f5f5f5;
--logo-icon: url("/_icons/iconColorSmall.png");
--logo-text: url("/_icons/textColorSmall.png");
}
.mainRed {
--primary-color: #f44336;
--primary-color-hover: #e53935;
--primary-color-active: #c62828;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainPink {
--primary-color: #E91E63;
--primary-color-hover: #D81B60;
--primary-color-active: #AD1457;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainPurple {
--primary-color: #9C27B0;
--primary-color-hover: #8E24AA;
--primary-color-active: #6A1B9A;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainDeepPurple {
--primary-color: #673AB7;
--primary-color-hover: #5E35B1;
--primary-color-active: #4527A0;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainIndigo {
--primary-color: #3F51B5;
--primary-color-hover: #3949AB;
--primary-color-active: #283593;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainBlue {
--primary-color: #2196F3;
--primary-color-hover: #1E88E5;
--primary-color-active: #1565C0;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainLightBlue {
--primary-color: #03A9F4;
--primary-color-hover: #039BE5;
--primary-color-active: #0277BD;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainCyan {
--primary-color: #00BCD4;
--primary-color-hover: #00ACC1;
--primary-color-active: #00838F;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainTeal {
--primary-color: #009688;
--primary-color-hover: #00897B;
--primary-color-active: #00695C;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainGreen {
--primary-color: #4CAF50;
--primary-color-hover: #43A047;
--primary-color-active: #2E7D32;
--text-with-main-color: #FFFFFF;
--logo-icon-bar-color: url("/_icons/iconWhite.png");
--logo-text-bar-color: url("/_icons/textWhite.png");
}
.mainLightGreen {
--primary-color: #8BC34A;
--primary-color-hover: #7CB342;
--primary-color-active: #558B2F;
--text-with-main-color: #000000;
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png"); --logo-text-bar-color: url("/_icons/textBlackSmall.png");
} }
.redGray { .mainLime {
--primary-color: #f44336; --primary-color: #CDDC39;
--primary-color-hover: #e53935; --primary-color-hover: #C0CA33;
--primary-color-active: #c62828; --primary-color-active: #9E9D24;
--accent-color: #2196F3; --text-with-main-color: #000000;
--primary-text-color: #212121;
--secondary-text-color: #424242;
--teritary-text-color: #757575;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(232, 232, 232, 1);
--title-color: #3f7ac6;
--bg-color: #f1f1f1;
--card-bg-color: #FFFFFF;
--secondary-card-bg-color: #eeeeee;
--side-nav-color: #FFFFFF;
--side-nav-hover-color: #e0e0e0;
--side-nav-active-color: #757575;
--search-bar-color: #f5f5f5;
--logo-icon: url("/_icons/iconColorSmall.png");
--logo-text: url("/_icons/textColorSmall.png");
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); --logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png"); --logo-text-bar-color: url("/_icons/textBlackSmall.png");
} }
.mainYellow {
--primary-color: #FFEB3B;
--primary-color-hover: #FDD835;
--primary-color-active: #F9A825;
--text-with-main-color: #000000;
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png");
}
.mainAmber {
--primary-color: #FFC107;
--primary-color-hover: #FFB300;
--primary-color-active: #FF8F00;
--text-with-main-color: #000000;
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png");
}
.mainOrange {
--primary-color: #FF9800;
--primary-color-hover: #FB8C00;
--primary-color-active: #EF6C00;
--text-with-main-color: #000000;
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png");
}
.mainDeepOrange {
--primary-color: #FF5722;
--primary-color-hover: #F4511E;
--primary-color-active: #D84315;
--text-with-main-color: #000000;
--logo-icon-bar-color: url("/_icons/iconBlackSmall.png");
--logo-text-bar-color: url("/_icons/textBlackSmall.png");
}
.secRed {
--accent-color: #f44336;
--accent-color-light: #ef9a9a;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(244,67,54,0.04);
--accent-color-opacity2: rgba(244,67,54,0.12);
--accent-color-opacity3: rgba(244,67,54,0.16);
--accent-color-opacity4: rgba(244,67,54,0.24);
}
.secPink {
--accent-color: #E91E63;
--accent-color-light: #F48FB1;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(233,30,99,0.04);
--accent-color-opacity2: rgba(233,30,99,0.12);
--accent-color-opacity3: rgba(233,30,99,0.16);
--accent-color-opacity4: rgba(233,30,99,0.24);
}
.secPurple {
--accent-color: #9C27B0;
--accent-color-light: #CE93D8;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(156,39,176,0.04);
--accent-color-opacity2: rgba(156,39,176,0.12);
--accent-color-opacity3: rgba(156,39,176,0.16);
--accent-color-opacity4: rgba(156,39,176,0.24);
}
.secDeepPurple {
--accent-color: #673AB7;
--accent-color-light: #B39DDB;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(103,58,183,0.04);
--accent-color-opacity2: rgba(103,58,183,0.12);
--accent-color-opacity3: rgba(103,58,183,0.16);
--accent-color-opacity4: rgba(103,58,183,0.24);
}
.secIndigo {
--accent-color: #3F51B5;
--accent-color-light: #9FA8DA;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(63,81,181,0.04);
--accent-color-opacity2: rgba(63,81,181,0.12);
--accent-color-opacity3: rgba(63,81,181,0.16);
--accent-color-opacity4: rgba(63,81,181,0.24);
}
.secBlue {
--accent-color: #2196F3;
--accent-color-light: #90CAF9;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(33,150,243,0.04);
--accent-color-opacity2: rgba(33,150,243,0.12);
--accent-color-opacity3: rgba(33,150,243,0.16);
--accent-color-opacity4: rgba(33,150,243,0.24);
}
.secLightBlue {
--accent-color: #03A9F4;
--accent-color-light: #81D4FA;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(3,169,244,0.04);
--accent-color-opacity2: rgba(3,169,244,0.12);
--accent-color-opacity3: rgba(3,169,244,0.16);
--accent-color-opacity4: rgba(3,169,244,0.24);
}
.secCyan {
--accent-color: #00BCD4;
--accent-color-light: #80DEEA;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(0,188,212,0.04);
--accent-color-opacity2: rgba(0,188,212,0.12);
--accent-color-opacity3: rgba(0,188,212,0.16);
--accent-color-opacity4: rgba(0,188,212,0.24);
}
.secTeal {
--accent-color: #009688;
--accent-color-light: #80CBC4;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(0,150,136,0.04);
--accent-color-opacity2: rgba(0,150,136,0.12);
--accent-color-opacity3: rgba(0,150,136,0.16);
--accent-color-opacity4: rgba(0,150,136,0.24);
}
.secGreen {
--accent-color: #4CAF50;
--accent-color-light: #A5D6A7;
--text-with-accent-color: #FFFFFF;
--accent-color-opacity1: rgba(76,175,80,0.04);
--accent-color-opacity2: rgba(76,175,80,0.12);
--accent-color-opacity3: rgba(76,175,80,0.16);
--accent-color-opacity4: rgba(76,175,80,0.24);
}
.secLightGreen {
--accent-color: #8BC34A;
--accent-color-light: #C5E1A5;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(139,195,74,0.04);
--accent-color-opacity2: rgba(139,195,74,0.12);
--accent-color-opacity3: rgba(139,195,74,0.16);
--accent-color-opacity4: rgba(139,195,74,0.24);
}
.secLime {
--accent-color: #CDDC39;
--accent-color-light: #E6EE9C;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(205,220,57,0.04);
--accent-color-opacity2: rgba(205,220,57,0.12);
--accent-color-opacity3: rgba(205,220,57,0.16);
--accent-color-opacity4: rgba(205,220,57,0.24);
}
.secYellow {
--accent-color: #FFEB3B;
--accent-color-light: #FFF59D;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(255,235,59,0.04);
--accent-color-opacity2: rgba(255,235,59,0.12);
--accent-color-opacity3: rgba(255,235,59,0.16);
--accent-color-opacity4: rgba(255,235,59,0.24);
}
.secAmber {
--accent-color: #FFC107;
--accent-color-light: #FFE082;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(255,193,7,0.04);
--accent-color-opacity2: rgba(255,193,7,0.12);
--accent-color-opacity3: rgba(255,193,7,0.16);
--accent-color-opacity4: rgba(255,193,7,0.24);
}
.secOrange {
--accent-color: #FF9800;
--accent-color-light: #FFCC80;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(255,152,0,0.04);
--accent-color-opacity2: rgba(255,152,0,0.12);
--accent-color-opacity3: rgba(255,152,0,0.16);
--accent-color-opacity4: rgba(255,152,0,0.24);
}
.secDeepOrange {
--accent-color: #FF5722;
--accent-color-light: #FFAB91;
--text-with-accent-color: #000000;
--accent-color-opacity1: rgba(255,87,34,0.04);
--accent-color-opacity2: rgba(255,87,34,0.12);
--accent-color-opacity3: rgba(255,87,34,0.16);
--accent-color-opacity4: rgba(255,87,34,0.24);
}
body { body {
color: var(--primary-text-color); color: var(--primary-text-color);
background-color: var(--bg-color); background-color: var(--bg-color);

19
src/renderer/videoJS.css
View File

@ -1,7 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
.vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before { .vjs-modal-dialog .vjs-modal-dialog-content, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
position: absolute; position: absolute;
top: 0; top: 3px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -982,6 +982,7 @@ body.vjs-full-window {
.video-js .vjs-volume-control.vjs-volume-horizontal { .video-js .vjs-volume-control.vjs-volume-horizontal {
width: 5em; width: 5em;
top: 3px;
} }
.video-js .vjs-volume-panel .vjs-volume-control { .video-js .vjs-volume-panel .vjs-volume-control {
@ -1204,7 +1205,7 @@ body.vjs-full-window {
.video-js .vjs-time-control { .video-js .vjs-time-control {
flex: none; flex: none;
font-size: 1em; font-size: 1em;
line-height: 3em; line-height: 4em;
min-width: 2em; min-width: 2em;
width: auto; width: auto;
padding-left: 0em; padding-left: 0em;
@ -1292,7 +1293,7 @@ video::-webkit-media-text-track-display {
.vjs-playback-rate > .vjs-menu-button, .vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value { .vjs-playback-rate .vjs-playback-rate-value {
position: absolute; position: absolute;
top: 30%; top: 16px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1802,7 +1803,7 @@ video::-webkit-media-text-track-display {
right: 0; right: 0;
width: 100%; width: 100%;
height: .4em; height: .4em;
top: -.4em top: -.1em
} }
.video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder { .video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
@ -1918,11 +1919,11 @@ video::-webkit-media-text-track-display {
} }
.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active { .video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
background-color: #cc181e background-color: var(--primary-color)
} }
.video-js .vjs-loading-spinner { .video-js .vjs-loading-spinner {
border-color: #cc181e border-color: var(--primary-color)
} }
.video-js .vjs-control-bar2 { .video-js .vjs-control-bar2 {
@ -1936,7 +1937,7 @@ video::-webkit-media-text-track-display {
} }
.video-js .vjs-play-progress,.video-js .vjs-volume-level { .video-js .vjs-play-progress,.video-js .vjs-volume-level {
background-color: #cc181e background-color: var(--primary-color)
} }
.video-js .vjs-load-progress { .video-js .vjs-load-progress {
@ -1981,3 +1982,7 @@ video::-webkit-media-text-track-display {
pointer-events: none; pointer-events: none;
box-shadow: 0 0 7px rgba(0,0,0,.6); box-shadow: 0 0 7px rgba(0,0,0,.6);
} }
.video-js .vjs-http-source-selector {
top: 4px;
}

3
src/renderer/views/Channel/Channel.vue
View File

@ -34,7 +34,8 @@
</div> </div>
<ft-button <ft-button
label="SUBSCRIBE" label="SUBSCRIBE"
background-color="#f44336" background-color="var(--primary-color)"
text-color="var(--text-with-main-color)"
class="subscribeButton" class="subscribeButton"
@click="handleSubscription" @click="handleSubscription"
/> />

2
src/renderer/views/Settings/Settings.js
View File

@ -2,6 +2,7 @@ import Vue from 'vue'
import FtCard from '../../components/ft-card/ft-card.vue' import FtCard from '../../components/ft-card/ft-card.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
import GeneralSettings from '../../components/general-settings/general-settings.vue' import GeneralSettings from '../../components/general-settings/general-settings.vue'
import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
import PlayerSettings from '../../components/player-settings/player-settings.vue' import PlayerSettings from '../../components/player-settings/player-settings.vue'
import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue' import SubscriptionSettings from '../../components/subscription-settings/subscription-settings.vue'
@ -11,6 +12,7 @@ export default Vue.extend({
'ft-card': FtCard, 'ft-card': FtCard,
'ft-element-list': FtElementList, 'ft-element-list': FtElementList,
'general-settings': GeneralSettings, 'general-settings': GeneralSettings,
'theme-settings': ThemeSettings,
'player-settings': PlayerSettings, 'player-settings': PlayerSettings,
'subscription-settings': SubscriptionSettings 'subscription-settings': SubscriptionSettings
}, },

1
src/renderer/views/Settings/Settings.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<general-settings /> <general-settings />
<theme-settings />
<player-settings /> <player-settings />
<subscription-settings /> <subscription-settings />
</div> </div>

33
src/renderer/views/Watch/Watch.js
View File

@ -65,8 +65,12 @@ export default Vue.extend({
return this.$store.getters.getInvidiousInstance return this.$store.getters.getInvidiousInstance
}, },
videoFormatPreference: function() { defaultVideoFormat: function () {
return this.$store.getters.getVideoFormatPreference return this.$store.getters.getDefaultVideoFormat
},
forceLocalBackendForLegacy: function () {
return this.$store.getters.getForceLocalBackendForLegacy
}, },
videoDashUrl: function () { videoDashUrl: function () {
@ -100,6 +104,10 @@ export default Vue.extend({
break break
case 'invidious': case 'invidious':
this.getVideoInformationInvidious(this.videoId) this.getVideoInformationInvidious(this.videoId)
if (this.forceLocalBackendForLegacy) {
this.getVideoInformationLocal(this.videoId)
}
break break
} }
}, },
@ -108,7 +116,7 @@ export default Vue.extend({
this.videoId = this.$route.params.id this.videoId = this.$route.params.id
this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90` this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`
this.activeFormat = this.videoFormatPreference this.activeFormat = this.defaultVideoFormat
if (this.proxyVideos) { if (this.proxyVideos) {
this.dashSrc = this.dashSrc + '?local=true' this.dashSrc = this.dashSrc + '?local=true'
@ -116,10 +124,10 @@ export default Vue.extend({
switch (this.backendPreference) { switch (this.backendPreference) {
case 'local': case 'local':
this.getVideoInformationLocal(this.videoId) this.getVideoInformationLocal()
break break
case 'invidious': case 'invidious':
this.getVideoInformationInvidious(this.videoId) this.getVideoInformationInvidious()
break break
} }
}, },
@ -223,7 +231,6 @@ export default Vue.extend({
this.videoPublished = result.published * 1000 this.videoPublished = result.published * 1000
this.videoDescriptionHtml = result.descriptionHtml this.videoDescriptionHtml = result.descriptionHtml
this.recommendedVideos = result.recommendedVideos this.recommendedVideos = result.recommendedVideos
this.videoSourceList = result.formatStreams.reverse()
this.captionSourceList = result.captions.map(caption => { this.captionSourceList = result.captions.map(caption => {
caption.url = this.invidiousInstance + caption.url caption.url = this.invidiousInstance + caption.url
caption.type = '' caption.type = ''
@ -231,6 +238,12 @@ export default Vue.extend({
return caption return caption
}) })
if (this.forceLocalBackendForLegacy) {
this.videoSourceList = result.formatStreams.reverse()
} else {
this.getLegacyFormats()
}
this.isLoading = false this.isLoading = false
}) })
.catch(err => { .catch(err => {
@ -247,6 +260,14 @@ export default Vue.extend({
}) })
}, },
getLegacyFormats: function () {
this.$store
.dispatch('ytGetVideoInformation', this.videoId)
.then(result => {
this.videoSourceList = result.player_response.streamingData.formats
})
},
enableDashFormat: function () { enableDashFormat: function () {
if (this.activeFormat === 'dash') { if (this.activeFormat === 'dash') {
return return