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

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',

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() : ''

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 () {

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) => {
+        const colorValue = colors.find(color => color.name === currentTheme).value
-          return color === currentTheme
-        })
 
-        const themeTextColor = calculateColorLuminance(colorValues[nameIndex])
+        const themeTextColor = calculateColorLuminance(colorValue)
 
         loopButton.classList.add('vjs-icon-loop-active')
 

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 () {

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,22 +178,19 @@ export default Vue.extend({
       this.comments.push(comment)
 
       if (typeof (comment.superchat) !== 'undefined') {
-        this.getRandomColorClass().then((data) => {
+        comment.superchat.colorClass = getRandomColorClass()
-          comment.superchat.colorClass = data
 
         this.superChatComments.unshift(comment)
 
         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
+          colorClass: getRandomColorClass()
         }
 
         this.superChatComments.unshift(comment)
@@ -201,7 +198,6 @@ export default Vue.extend({
         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'
-    ])
   }
 })

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)

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,

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 */

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',
+      'showToast'
-      'getRandomColor'
     ])
   }
 })