From bc8261d970bf62aaaddb662055269bb8d472956e Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Wed, 12 Oct 2022 08:49:12 +0200 Subject: [PATCH] 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 --- .../components/data-settings/data-settings.js | 11 +-- .../ft-profile-edit/ft-profile-edit.js | 4 +- .../ft-sponsor-block-category.js | 3 +- .../ft-video-player/ft-video-player.js | 10 +- .../theme-settings/theme-settings.js | 3 +- .../watch-video-live-chat.js | 38 +++----- src/renderer/helpers/utils.js | 50 ++++++++++ src/renderer/store/modules/profiles.js | 6 +- src/renderer/store/modules/utils.js | 97 ------------------- src/renderer/views/ProfileEdit/ProfileEdit.js | 9 +- 10 files changed, 86 insertions(+), 145 deletions(-) diff --git a/src/renderer/components/data-settings/data-settings.js b/src/renderer/components/data-settings/data-settings.js index c64c4b5c..14201469 100644 --- a/src/renderer/components/data-settings/data-settings.js +++ b/src/renderer/components/data-settings/data-settings.js @@ -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', diff --git a/src/renderer/components/ft-profile-edit/ft-profile-edit.js b/src/renderer/components/ft-profile-edit/ft-profile-edit.js index a2c02d0a..85a808e9 100644 --- a/src/renderer/components/ft-profile-edit/ft-profile-edit.js +++ b/src/renderer/components/ft-profile-edit/ft-profile-edit.js @@ -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() : '' diff --git a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js index f74378ff..4cc6aafc 100644 --- a/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js +++ b/src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js @@ -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 () { diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index e889964a..1a1b2836 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -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') diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 8098ae2f..7a962b7a 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -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 () { diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js index 5c1e219a..3c9c63ae 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.js @@ -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' - ]) + } } }) diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js index 46fb3567..201bcb6d 100644 --- a/src/renderer/helpers/utils.js +++ b/src/renderer/helpers/utils.js @@ -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) diff --git a/src/renderer/store/modules/profiles.js b/src/renderer/store/modules/profiles.js index 7c189f55..78f9590c 100644 --- a/src/renderer/store/modules/profiles.js +++ b/src/renderer/store/modules/profiles.js @@ -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, diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index 9e85e33d..0bf26dc0 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -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 */ diff --git a/src/renderer/views/ProfileEdit/ProfileEdit.js b/src/renderer/views/ProfileEdit/ProfileEdit.js index 6034fd1b..93790025 100644 --- a/src/renderer/views/ProfileEdit/ProfileEdit.js +++ b/src/renderer/views/ProfileEdit/ProfileEdit.js @@ -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' ]) } })