Moved privacy/visibility labels out of Form.vue to use the ones in

mixins/Translations.vue

changes/changelog.d/748.enhancement

+Labels for privacy levels are now consistently grabbed from a common source instead of being hardcoded everytime they are needed.

front/src/components/mixins/Translations.vue

@@ -10,6 +10,7 @@ export default {
             choices: {
               me: this.$pgettext('Content/Settings/Dropdown', 'Nobody except me'),
               instance: this.$pgettext('Content/Settings/Dropdown', 'Everyone on this instance'),
+              everyone: this.$pgettext('Content/Settings/Dropdown', 'Everyone, across all instances'),
             }
           }
         },

front/src/components/playlists/Form.vue

@@ -42,10 +42,12 @@
 <script>
 import $ from 'jquery'
 import axios from 'axios'
+import TranslationsMixin from "@/components/mixins/Translations"
 
 import logger from '@/logging'
 
 export default {
+  mixins: [TranslationsMixin],
   props: {
     title: {type: Boolean, default: true},
     playlist: {type: Object, default: null}
@@ -78,15 +80,15 @@ export default {
       return [
         {
           value: 'me',
-          label: this.$pgettext('Content/Playlist/Dropdown', 'Nobody except me')
+          label: this.sharedLabels.fields.privacy_level.choices['me']
         },
         {
           value: 'instance',
-          label: this.$pgettext('Content/Playlist/Dropdown', 'Everyone on this instance')
+          label: this.sharedLabels.fields.privacy_level.choices['instance']
         },
         {
           value: 'everyone',
-          label: this.$pgettext('Content/Playlist/Dropdown', 'Everyone')
+          label: this.sharedLabels.fields.privacy_level.choices['everyone']
         }
       ]
     }

front/src/views/content/libraries/Card.vue

@@ -6,19 +6,19 @@
         <span
           v-if="library.privacy_level === 'me'"
           class="right floated"
-          :data-tooltip="labels.tooltips.me">
+          :data-tooltip="privacy_tooltips('me')">
           <i class="small lock icon"></i>
         </span>
         <span
           v-else-if="library.privacy_level === 'instance'"
           class="right floated"
-          :data-tooltip="labels.tooltips.instance">
+          :data-tooltip="privacy_tooltips('instance')">
           <i class="small circle outline icon"></i>
         </span>
         <span
           v-else-if="library.privacy_level === 'everyone'"
           class="right floated"
-          :data-tooltip="labels.tooltips.everyone">
+          :data-tooltip="privacy_tooltips('everyone')">
           <i class="small globe icon"></i>
         </span>
       </div>
@@ -32,7 +32,7 @@
         <div class="ui hidden divider"></div>
       </div>
       <div class="content">
-        <span v-if="library.size" class="right floated" :data-tooltip="labels.tooltips.size">
+        <span v-if="library.size" class="right floated" :data-tooltip="size_label">
           <i class="database icon"></i>
           {{ library.size | humanSize }}
         </span>
@@ -50,25 +50,22 @@
     </div>
   </div>
 </template>
+
 <script>
+import TranslationsMixin from '@/components/mixins/Translations'
+
 export default {
+  mixins: [TranslationsMixin],
   props: ['library'],
+  methods: {
+    privacy_tooltips (level) {
+      return 'Visibility: ' + this.sharedLabels.fields.privacy_level.choices[level].toLowerCase()
+    },
+  },
   computed: {
-    labels () {
-      let me = this.$pgettext('Content/Library/Card.Help text', 'Visibility: nobody except me')
-      let instance = this.$pgettext('Content/Library/Card.Help text', 'Visibility: everyone on this instance')
-      let everyone = this.$pgettext('Content/Library/Card.Help text', 'Visibility: everyone, including other instances')
-      let size = this.$pgettext('Content/Library/Card.Help text', 'Total size of the files in this library')
-
-      return {
-        tooltips: {
-          me,
-          instance,
-          everyone,
-          size
-        }
-      }
-    }
+    size_label () {
+      return this.$pgettext('Content/Library/Card.Help text', 'Total size of the files in this library')
+    },
   }
 }
 </script>

front/src/views/content/libraries/Form.vue

@@ -19,7 +19,7 @@
       <label><translate translate-context="Content/Library/Dropdown.Label">Visibility</translate></label>
       <p><translate translate-context="Content/Library/Paragraph">You are able to share your library with other people, regardless of its visibility.</translate></p>
       <select class="ui dropdown" v-model="currentVisibilityLevel">
-        <option :value="c" v-for="c in ['me', 'instance', 'everyone']">{{ labels.visibility[c] }}</option>
+        <option :value="c" v-for="c in ['me', 'instance', 'everyone']">{{ sharedLabels.fields.privacy_level.choices[c] }}</option>
       </select>
     </div>
     <button class="ui submit button" type="submit">
@@ -45,8 +45,10 @@
 
 <script>
 import axios from 'axios'
+import MixinsTranslation from '@/components/mixins/Translations.vue'
 
 export default {
+  mixins: [MixinsTranslation],
   props: ['library'],
   data () {
     let d = {
@@ -69,17 +71,9 @@ export default {
     labels () {
       let namePlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'My awesome library')
       let descriptionPlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'This library contains my personal music, I hope you like it.')
-      let me = this.$pgettext('Content/Library/Dropdown', 'Nobody except me')
-      let instance = this.$pgettext('Content/Library/Dropdown', 'Everyone on this instance')
-      let everyone = this.$pgettext('Content/Library/Dropdown', 'Everyone, across all instances')
       return {
         namePlaceholder,
         descriptionPlaceholder,
-        visibility: {
-          me,
-          instance,
-          everyone
-        }
       }
     }
   },