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

Move colours from the store to the utils helper (#2710) 

* Move colours from the store to the utils helper

* Use a single array for colours
This commit is contained in:
absidue 2022-10-12 08:49:12 +02:00 committed by GitHub
parent f12b9e1dc8
commit bc8261d970
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 86 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/components/data-settings/data-settings.js
View File

@ -11,7 +11,7 @@ import { MAIN_PROFILE_ID } from '../../../constants'
import fs from 'fs'
import { opmlToJSON } from 'opml-to-json'
import ytch from 'yt-channel-info'
import { calculateColorLuminance } from '../../helpers/utils'
import { calculateColorLuminance, getRandomColor } from '../../helpers/utils'
// FIXME: Missing web logic branching
@ -129,7 +129,7 @@ export default Vue.extend({
})
},
importFreeTubeSubscriptions: async function (textDecode) {
importFreeTubeSubscriptions: function (textDecode) {
textDecode = textDecode.split('\n')
textDecode.pop()
textDecode = textDecode.map(data => JSON.parse(data))
@ -137,7 +137,7 @@ export default Vue.extend({
const firstEntry = textDecode[0]
if (firstEntry.channelId && firstEntry.channelName && firstEntry.channelThumbnail && firstEntry._id && firstEntry.profile) {
// Old FreeTube subscriptions format detected, so convert it to the new one:
textDecode = await this.convertOldFreeTubeFormatToNew(textDecode)
textDecode = this.convertOldFreeTubeFormatToNew(textDecode)
}
textDecode.forEach((profileData) => {
@ -1085,14 +1085,14 @@ export default Vue.extend({
})
},
async convertOldFreeTubeFormatToNew(oldData) {
convertOldFreeTubeFormatToNew(oldData) {
const convertedData = []
for (const channel of oldData) {
const listOfProfilesAlreadyAdded = []
for (const profile of channel.profile) {
let index = convertedData.findIndex(p => p.name === profile.value)
if (index === -1) { // profile doesn't exist yet
const randomBgColor = await this.getRandomColor()
const randomBgColor = getRandomColor()
const contrastyTextColor = calculateColorLuminance(randomBgColor)
convertedData.push({
name: profile.value,
@ -1241,7 +1241,6 @@ export default Vue.extend({
'updateHistory',
'compactHistory',
'showToast',
'getRandomColor',
'showOpenDialog',
'readFileFromDialog',
'showSaveDialog',

4
src/renderer/components/ft-profile-edit/ft-profile-edit.js
View File

@ -6,7 +6,7 @@ import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
import FtInput from '../../components/ft-input/ft-input.vue'
import FtButton from '../../components/ft-button/ft-button.vue'
import { MAIN_PROFILE_ID } from '../../../constants'
import { calculateColorLuminance } from '../../helpers/utils'
import { calculateColorLuminance, colors } from '../../helpers/utils'
export default Vue.extend({
name: 'FtProfileEdit',
@ -46,7 +46,7 @@ export default Vue.extend({
return this.profileId === MAIN_PROFILE_ID
},
colorValues: function () {
return this.$store.getters.getColorValues
return colors.map(color => color.value)
},
profileInitial: function () {
return this?.profileName?.length > 0 ? Array.from(this.profileName)[0].toUpperCase() : ''

3
src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue'
import { mapActions } from 'vuex'
import { colors } from '../../helpers/utils'
import FtSelect from '../ft-select/ft-select.vue'
export default Vue.extend({
@ -27,7 +28,7 @@ export default Vue.extend({
},
computed: {
colorValues: function () {
return this.$store.getters.getColorNames
return colors.map(color => color.name)
},
colorNames: function () {

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

@ -14,7 +14,7 @@ import 'videojs-http-source-selector'
import { IpcChannels } from '../../../constants'
import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock'
import { calculateColorLuminance } from '../../helpers/utils'
import { calculateColorLuminance, colors } from '../../helpers/utils'
export default Vue.extend({
name: 'FtVideoPlayer',
@ -1181,14 +1181,10 @@ export default Vue.extend({
if (!this.player.loop()) {
const currentTheme = this.$store.state.settings.mainColor
const colorNames = this.$store.state.utils.colorNames
const colorValues = this.$store.state.utils.colorValues
const nameIndex = colorNames.findIndex((color) => {
return color === currentTheme
})
const colorValue = colors.find(color => color.name === currentTheme).value
const themeTextColor = calculateColorLuminance(colorValues[nameIndex])
const themeTextColor = calculateColorLuminance(colorValue)
loopButton.classList.add('vjs-icon-loop-active')

3
src/renderer/components/theme-settings/theme-settings.js
View File

@ -7,6 +7,7 @@ import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
import FtSlider from '../ft-slider/ft-slider.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
import FtPrompt from '../ft-prompt/ft-prompt.vue'
import { colors } from '../../helpers/utils'
export default Vue.extend({
name: 'ThemeSettings',
@ -100,7 +101,7 @@ export default Vue.extend({
},
colorValues: function () {
return this.$store.getters.getColorNames
return colors.map(color => color.name)
},
colorNames: function () {

38
src/renderer/components/watch-video-live-chat/watch-video-live-chat.js
View File

@ -1,5 +1,4 @@
import Vue from 'vue'
import { mapActions } from 'vuex'
import FtLoader from '../ft-loader/ft-loader.vue'
import FtCard from '../ft-card/ft-card.vue'
import FtButton from '../ft-button/ft-button.vue'
@ -7,6 +6,7 @@ import FtListVideo from '../ft-list-video/ft-list-video.vue'
import autolinker from 'autolinker'
import { LiveChat } from '@freetube/youtube-chat'
import { getRandomColorClass } from '../../helpers/utils'
export default Vue.extend({
name: 'WatchVideoLiveChat',
@ -178,30 +178,26 @@ export default Vue.extend({
this.comments.push(comment)
if (typeof (comment.superchat) !== 'undefined') {
this.getRandomColorClass().then((data) => {
comment.superchat.colorClass = data
comment.superchat.colorClass = getRandomColorClass()
this.superChatComments.unshift(comment)
this.superChatComments.unshift(comment)
setTimeout(() => {
this.removeFromSuperChat(comment.id)
}, 120000)
})
setTimeout(() => {
this.removeFromSuperChat(comment.id)
}, 120000)
}
if (comment.author.name[0] === 'Ge' || comment.author.name[0] === 'Ne') {
this.getRandomColorClass().then((data) => {
comment.superChat = {
amount: '$5.00',
colorClass: data
}
comment.superChat = {
amount: '$5.00',
colorClass: getRandomColorClass()
}
this.superChatComments.unshift(comment)
this.superChatComments.unshift(comment)
setTimeout(() => {
this.removeFromSuperChat(comment.id)
}, 120000)
})
setTimeout(() => {
this.removeFromSuperChat(comment.id)
}, 120000)
}
if (this.stayAtBottom) {
@ -260,10 +256,6 @@ export default Vue.extend({
preventDefault: function (event) {
event.stopPropagation()
event.preventDefault()
},
...mapActions([
'getRandomColorClass'
])
}
}
})

50
src/renderer/helpers/utils.js
View File

@ -1,3 +1,53 @@
export const colors = [
{ name: 'Red', value: '#d50000' },
{ name: 'Pink', value: '#C51162' },
{ name: 'Purple', value: '#AA00FF' },
{ name: 'DeepPurple', value: '#6200EA' },
{ name: 'Indigo', value: '#304FFE' },
{ name: 'Blue', value: '#2962FF' },
{ name: 'LightBlue', value: '#0091EA' },
{ name: 'Cyan', value: '#00B8D4' },
{ name: 'Teal', value: '#00BFA5' },
{ name: 'Green', value: '#00C853' },
{ name: 'LightGreen', value: '#64DD17' },
{ name: 'Lime', value: '#AEEA00' },
{ name: 'Yellow', value: '#FFD600' },
{ name: 'Amber', value: '#FFAB00' },
{ name: 'Orange', value: '#FF6D00' },
{ name: 'DeepOrange', value: '#DD2C00' },
{ name: 'DraculaCyan', value: '#8BE9FD' },
{ name: 'DraculaGreen', value: '#50FA7B' },
{ name: 'DraculaOrange', value: '#FFB86C' },
{ name: 'DraculaPink', value: '#FF79C6' },
{ name: 'DraculaPurple', value: '#BD93F9' },
{ name: 'DraculaRed', value: '#FF5555' },
{ name: 'DraculaYellow', value: '#F1FA8C' },
{ name: 'CatppuccinMochaRosewater', value: '#F5E0DC' },
{ name: 'CatppuccinMochaFlamingo', value: '#F2CDCD' },
{ name: 'CatppuccinMochaPink', value: '#F5C2E7' },
{ name: 'CatppuccinMochaMauve', value: '#CBA6F7' },
{ name: 'CatppuccinMochaRed', value: '#F38BA8' },
{ name: 'CatppuccinMochaMaroon', value: '#EBA0AC' },
{ name: 'CatppuccinMochaPeach', value: '#FAB387' },
{ name: 'CatppuccinMochaYellow', value: '#F9E2AF' },
{ name: 'CatppuccinMochaGreen', value: '#A6E3A1' },
{ name: 'CatppuccinMochaTeal', value: '#94E2D5' },
{ name: 'CatppuccinMochaSky', value: '#89DCEB' },
{ name: 'CatppuccinMochaSapphire', value: '#74C7EC' },
{ name: 'CatppuccinMochaBlue', value: '#89B4FA' },
{ name: 'CatppuccinMochaLavender', value: '#B4BEFE' }
]
export function getRandomColorClass() {
const randomInt = Math.floor(Math.random() * colors.length)
return 'main' + colors[randomInt].name
}
export function getRandomColor() {
const randomInt = Math.floor(Math.random() * colors.length)
return colors[randomInt].value
}
export function calculateColorLuminance(colorValue) {
const cutHex = colorValue.substring(1, 7)
const colorValueR = parseInt(cutHex.substring(0, 2), 16)

6
src/renderer/store/modules/profiles.js
View File

@ -1,6 +1,6 @@
import { MAIN_PROFILE_ID } from '../../../constants'
import { DBProfileHandlers } from '../../../datastores/handlers/index'
import { calculateColorLuminance } from '../../helpers/utils'
import { calculateColorLuminance, getRandomColor } from '../../helpers/utils'
const state = {
profileList: [{
@ -40,7 +40,7 @@ function profileSort(a, b) {
}
const actions = {
async grabAllProfiles({ rootState, dispatch, commit }, defaultName = null) {
async grabAllProfiles({ rootState, commit }, defaultName = null) {
let profiles
try {
profiles = await DBProfileHandlers.find()
@ -53,7 +53,7 @@ const actions = {
if (profiles.length === 0) {
// Create a default profile and persist it
const randomColor = await dispatch('getRandomColor')
const randomColor = getRandomColor()
const textColor = calculateColorLuminance(randomColor)
const defaultProfile = {
_id: MAIN_PROFILE_ID,

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

@ -27,85 +27,6 @@ const state = {
type: 'all',
duration: ''
},
colorNames: [
'Red',
'Pink',
'Purple',
'DeepPurple',
'Indigo',
'Blue',
'LightBlue',
'Cyan',
'Teal',
'Green',
'LightGreen',
'Lime',
'Yellow',
'Amber',
'Orange',
'DeepOrange',
'DraculaCyan',
'DraculaGreen',
'DraculaOrange',
'DraculaPink',
'DraculaPurple',
'DraculaRed',
'DraculaYellow',
'CatppuccinMochaRosewater',
'CatppuccinMochaFlamingo',
'CatppuccinMochaPink',
'CatppuccinMochaMauve',
'CatppuccinMochaRed',
'CatppuccinMochaMaroon',
'CatppuccinMochaPeach',
'CatppuccinMochaYellow',
'CatppuccinMochaGreen',
'CatppuccinMochaTeal',
'CatppuccinMochaSky',
'CatppuccinMochaSapphire',
'CatppuccinMochaBlue',
'CatppuccinMochaLavender'
],
colorValues: [
'#d50000',
'#C51162',
'#AA00FF',
'#6200EA',
'#304FFE',
'#2962FF',
'#0091EA',
'#00B8D4',
'#00BFA5',
'#00C853',
'#64DD17',
'#AEEA00',
'#FFD600',
'#FFAB00',
'#FF6D00',
'#DD2C00',
'#8BE9FD',
'#50FA7B',
'#FFB86C',
'#FF79C6',
'#BD93F9',
'#FF5555',
'#F1FA8C',
'#F5E0DC',
'#F2CDCD',
'#F5C2E7',
'#CBA6F7',
'#F38BA8',
'#EBA0AC',
'#FAB387',
'#F9E2AF',
'#A6E3A1',
'#94E2D5',
'#89DCEB',
'#74C7EC',
'#89B4FA',
'#B4BEFE'
],
externalPlayerNames: [],
externalPlayerNameTranslationKeys: [],
externalPlayerValues: [],
@ -137,14 +58,6 @@ const getters = {
return state.searchSettings
},
getColorNames () {
return state.colorNames
},
getColorValues () {
return state.colorValues
},
getShowProgressBar () {
return state.showProgressBar
},
@ -534,16 +447,6 @@ const actions = {
commit('setShowProgressBar', value)
},
getRandomColorClass () {
const randomInt = Math.floor(Math.random() * state.colorNames.length)
return 'main' + state.colorNames[randomInt]
},
getRandomColor () {
const randomInt = Math.floor(Math.random() * state.colorValues.length)
return state.colorValues[randomInt]
},
getRegionData ({ commit }, payload) {
let fileData
/* eslint-disable-next-line */

9
src/renderer/views/ProfileEdit/ProfileEdit.js
View File

@ -5,7 +5,7 @@ import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
import { MAIN_PROFILE_ID } from '../../../constants'
import { calculateColorLuminance } from '../../helpers/utils'
import { calculateColorLuminance, getRandomColor } from '../../helpers/utils'
export default Vue.extend({
name: 'ProfileEdit',
@ -53,14 +53,14 @@ export default Vue.extend({
deep: true
}
},
mounted: async function () {
mounted: function () {
const profileType = this.$route.name
this.deletePromptLabel = `${this.$t('Profile.Are you sure you want to delete this profile?')} ${this.$t('Profile["All subscriptions will also be deleted."]')}`
if (profileType === 'newProfile') {
this.isNew = true
const bgColor = await this.getRandomColor()
const bgColor = getRandomColor()
const textColor = calculateColorLuminance(bgColor)
this.profile = {
name: '',
@ -88,8 +88,7 @@ export default Vue.extend({
},
methods: {
...mapActions([
'showToast',
'getRandomColor'
'showToast'
])
}
})