Providers by language

src/components/AnimeSettings.vue

@@ -57,9 +57,9 @@ export default {
     },
   },
   methods: {
-    ...mapMutations('store', ['setProvider', 'setAlternativeTitle']),
+    ...mapMutations('store', ['setProviderByTitle', 'setAlternativeTitle']),
     updateProvider(provider) {
-      this.setProvider({
+      this.setProviderByTitle({
         title: this.title,
         provider,
       });

src/layouts/MainLayout.vue

@@ -13,7 +13,14 @@
           <div class="col-auto text-h4">My Anime</div>
         </div>
         <div v-else class="col row justify-end items-center no-wrap" @mousedown.prevent>
-          <provider-select ref="providerSelect" v-model="provider" dark icon class="col-auto q-mx-auto gt-xsm" />
+          <provider-select
+            ref="providerSelect"
+            :value="provider"
+            dark
+            icon
+            class="col-auto q-mx-auto gt-xsm"
+            @input="setProvider"
+          />
           <div class="col-auto q-gutter-x-lg q-mr-auto row justify-between gt-md">
             <status-select
               v-model="airingStatusFilter"
@@ -76,7 +83,7 @@
             </q-item-section>
             <q-item-section class="q-pt-sm">
               <q-item-label v-t="'selectProvider'" header class="q-px-sm" />
-              <provider-select v-model="provider" dark icon class="q-pr-xs" />
+              <provider-select :value="provider" dark icon class="q-pr-xs" @input="setProvider" />
             </q-item-section>
             <q-item-section class="q-pt-lg">
               <q-item-label v-t="'animeStatus'" header class="q-px-sm" />
@@ -165,7 +172,7 @@ export default {
   },
   computed: {
     ...mapState('store', ['api', 'userFetched']),
-    ...mapGetters('store', ['isLoading', 'isFetched', 'hasUsername']),
+    ...mapGetters('store', ['provider', 'isLoading', 'isFetched', 'hasUsername']),
     hiddenIfSettings() {
       return this.settings ? 'display: none' : undefined;
     },
@@ -185,7 +192,7 @@ export default {
     this.info = !this.isRecurringUser;
   },
   methods: {
-    ...mapMutations('store', ['loading', 'updateFetched']),
+    ...mapMutations('store', ['setProvider', 'updateFetched']),
     ...mapActions('store', ['fetchAnimes']),
     overlappingFooter(offset) {
       const footerHeight = '41px';

src/mixins/configuration.js

@@ -132,7 +132,10 @@ export const defaults = {
   language: i18n.locale,
   username: '',
   status: 'watching',
-  provider: providers[0],
+  providersByLanguage: {
+    es: providers[0],
+    en: providers[0],
+  },
   providersByAnimeTitle: {},
   genreFilter: [],
   airingStatusFilter: defaultConfig.airingStatuses.map((status) => status.value),
@@ -157,19 +160,15 @@ export default {
     if (!this.isRecurrentUser) {
       Object.keys(defaults).forEach((key) => {
         if (this.$q.localStorage.has(key)) {
-          let value = this.$q.localStorage.getItem(key);
+          const value = this.$q.localStorage.getItem(key);
 
           const getProvider = (label) => providers.find((provider) => provider.label === label) || providers[0];
 
           // convert provider labels to provider objects
-          if (key === 'provider') {
-            value = getProvider(value);
-          } else if (key === 'providersByAnimeTitle') {
-            const providersByAnimeTitle = {};
-            Object.entries(value).forEach(([title, providerLabel]) => {
-              providersByAnimeTitle[title] = getProvider(providerLabel);
+          if (['providersByLanguage', 'providersByAnimeTitle'].includes(key)) {
+            Object.entries(value).forEach(([providerKey, providerLabel]) => {
+              value[providerKey] = getProvider(providerLabel);
             });
-            value = providersByAnimeTitle;
           }
 
           if (value !== undefined && value !== null) {
@@ -180,25 +179,26 @@ export default {
     }
 
     // add watchers to save configuration
-    Object.keys(defaults)
-      .filter((key) => key !== 'provider' && key !== 'providersByAnimeTitle') // avoid saving entire objects
-      .forEach((key) => this.$watch(key, (value) => this.$q.localStorage.set(key, value), { deep: true }));
+    Object.keys(defaults).forEach((key) => {
+      if (['providersByLanguage', 'providersByAnimeTitle'].includes(key)) {
+        // save provider label only
+        this.$watch(
+          key,
+          (value) => {
+            const providerLabels = {};
+            Object.entries(value).forEach(([providerKey, provider]) => {
+              providerLabels[providerKey] = provider.label;
+            });
+            this.$q.localStorage.set(key, providerLabels);
+          },
+          { deep: true }
+        );
+      } else {
+        this.$watch(key, (value) => this.$q.localStorage.set(key, value), { deep: true });
+      }
+    });
   },
   watch: {
-    // save provider label only
-    provider(provider) {
-      this.$q.localStorage.set('provider', provider.label);
-    },
-    providersByAnimeTitle: {
-      handler(providersByAnimeTitle) {
-        const saveProviders = {};
-        Object.entries(providersByAnimeTitle).forEach(([title, provider]) => {
-          saveProviders[title] = provider.label;
-        });
-        this.$q.localStorage.set('providersByAnimeTitle', saveProviders);
-      },
-      deep: true,
-    },
     language(locale) {
       if (i18n.locale !== locale) {
         i18n.locale = locale;

src/model/providers/Provider.js

@@ -25,9 +25,9 @@ export default class Provider {
     let encoded = encodeURIComponent(
       s
         .toLowerCase()
-        .replace(/[^- a-z0-9]+/, '')
+        .replace(/[^- a-z0-9]+/g, '')
         .replace(/\s+/g, sep)
-        .replace(new RegExp(`(${sep}){2,}`), sep)
+        .replace(new RegExp(`(${sep}){2,}`, 'g'), sep)
     );
     if (encoded[encoded.length - 1] === sep) {
       encoded = encoded.substring(0, encoded.length - 1);

src/store/store/getters.js

@@ -16,14 +16,17 @@ export default {
   hasUsername({ username }) {
     return !isBlank(username);
   },
-  providerByAnimeTitle({ provider, providersByAnimeTitle }) {
-    return (title) => providersByAnimeTitle[title] || provider;
+  providerByAnimeTitle({ providersByAnimeTitle }, getters) {
+    return (title) => providersByAnimeTitle[title] || getters.provider;
   },
   providers({ language }) {
     return Object.freeze(
       providers.filter((provider) => !provider.value.languages || provider.value.languages.includes(language))
     );
   },
+  provider({ providersByLanguage, language }) {
+    return providersByLanguage[language];
+  },
   titleByAnimeId({ api, titlesByAnimeId }) {
     return (id) => titlesByAnimeId[api.name][id];
   },

src/store/store/mutations.js

@@ -66,8 +66,11 @@ export default {
       anime.status = 'watching';
     }
   },
-  setProvider(state, { title, provider }) {
-    if (provider === state.provider) {
+  setProvider(state, provider) {
+    state.providersByLanguage[state.language] = provider;
+  },
+  setProviderByTitle(state, { title, provider }) {
+    if (provider === state.providersByLanguage[state.language]) {
       Vue.delete(state.providersByAnimeTitle, title);
     } else {
       Vue.set(state.providersByAnimeTitle, title, provider);

src/store/store/state.js

@@ -13,9 +13,9 @@ export function newState() {
     language: defaults.language,
     username: defaults.username,
     status: defaults.status,
-    provider: defaults.provider,
-    titlesByAnimeId: defaults.titlesByAnimeId,
+    providersByLanguage: defaults.providersByLanguage,
     providersByAnimeTitle: defaults.providersByAnimeTitle,
+    titlesByAnimeId: defaults.titlesByAnimeId,
     airingStatusFilter: defaults.airingStatusFilter,
     typeFilter: defaults.typeFilter,
     genreFilter: defaults.genreFilter,