Merge branch 'frontend-fixes-2' into 'develop'

Frontend fixes 2

See merge request funkwhale/funkwhale!1039

front/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

front/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "core-js": "^3.6.4",
     "diff": "^4.0.1",
     "django-channels": "^1.1.6",
     "fomantic-ui-css": "^2.8.3",
@@ -40,22 +41,25 @@
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0",
+    "@vue/cli-plugin-babel": "~4.2.2",
-    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-plugin-eslint": "~4.2.2",
-    "@vue/cli-plugin-pwa": "^4.1.2",
+    "@vue/cli-plugin-pwa": "~4.2.2",
-    "@vue/cli-plugin-unit-mocha": "^3.0.0",
+    "@vue/cli-plugin-unit-mocha": "~4.2.2",
-    "@vue/cli-service": "^3.0.0",
+    "@vue/cli-service": "~4.2.2",
     "@vue/test-utils": "^1.0.0-beta.20",
+    "babel-eslint": "^10.0.3",
     "chai": "^4.1.2",
     "easygettext": "^2.6.3",
+    "eslint": "^5.16.0",
     "eslint-plugin-html": "^4.0.5",
+    "eslint-plugin-vue": "^6.1.2",
     "glob-all": "^3.1.0",
     "mocha": "^5.2.0",
     "moxios": "^0.4.0",
     "node-sass": "^4.9.3",
     "preload-webpack-plugin": "^3.0.0-beta.4",
     "purgecss-webpack-plugin": "^1.6.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^8.0.2",
     "sinon": "^6.1.5",
     "vue-template-compiler": "^2.5.17",
     "webpack-bundle-size-analyzer": "^3.0.0"

front/src/App.vue

@@ -11,16 +11,7 @@
     <template>
       <sidebar></sidebar>
       <set-instance-modal @update:show="showSetInstanceModal = $event" :show="showSetInstanceModal"></set-instance-modal>
-      <service-messages>
+      <service-messages></service-messages>
-        <message key="refreshApp" class="large info" v-if="serviceWorker.updateAvailable">
-          <p>
-            <translate translate-context="App/Message/Paragraph">A new version of the app is available.</translate>
-          </p>
-          <button class="ui basic button" @click.stop="updateApp">
-            <translate translate-context="App/Message/Button">Update</translate>
-          </button>
-        </message>
-      </service-messages>
       <transition name="queue">
         <queue @touch-progress="$refs.player.setCurrentTime($event)" v-if="$store.state.ui.queueFocused"></queue>
       </transition>
@@ -263,6 +254,7 @@ export default {
       parts.push(this.$store.state.instance.settings.instance.name.value || 'Funkwhale')
       document.title = parts.join(' – ')
     },
+
     updateApp () {
       this.$store.commit('ui/serviceWorker', {updateAvailable: false})
       if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return; }
@@ -343,6 +335,11 @@ export default {
       immediate: true,
       handler(newValue) {
         let self = this
+        if (newValue === 'en_US') {
+          self.$language.current = 'noop'
+          self.$language.current = newValue
+          return self.$store.commit('ui/momentLocale', 'en')
+        }
         import(/* webpackChunkName: "locale-[request]" */ `./translations/${newValue}.json`).then((response) =>{
           Vue.$translations[newValue] = response.default[newValue]
         }).finally(() => {
@@ -351,9 +348,6 @@ export default {
           self.$language.current = 'noop'
           self.$language.current = newValue
         })
-        if (newValue === 'en_US') {
-          return self.$store.commit('ui/momentLocale', 'en')
-        }
         let momentLocale = newValue.replace('_', '-').toLowerCase()
         import(/* webpackChunkName: "moment-locale-[request]" */ `moment/locale/${momentLocale}.js`).then(() => {
           self.$store.commit('ui/momentLocale', momentLocale)
@@ -380,6 +374,35 @@ export default {
         this.updateDocumentTitle()
       },
     },
+    'serviceWorker.updateAvailable': {
+      handler (v) {
+        if (!v) {
+          return
+        }
+        let self = this
+        this.$store.commit('ui/addMessage', {
+          content: this.$pgettext("App/Message/Paragraph", "A new version of the app is available."),
+          date: new Date(),
+          key: 'refreshApp',
+          displayTime: 0,
+          classActions: 'bottom attached',
+          actions: [
+            {
+              text: this.$pgettext("App/Message/Paragraph", "Update"),
+              class: "primary",
+              click: function () {
+                self.updateApp()
+              },
+            },
+            {
+              text: this.$pgettext("App/Message/Paragraph", "Later"),
+              class: "basic",
+            }
+          ]
+        })
+      },
+      immediate: true,
+    }
   }
 }
 </script>

front/src/components/playlists/Widget.vue

@@ -6,7 +6,6 @@
     <div v-if="isLoading" class="ui inverted active dimmer">
       <div class="ui loader"></div>
     </div>
-    <div class="ui hidden divider"></div>
     <div v-if="playlistsExist" class="ui cards app-cards">
       <playlist-card v-for="playlist in objects" :key="playlist.id" :playlist="playlist"></playlist-card>
     </div>

front/src/router/index.js

@@ -33,7 +33,7 @@ export default new Router({
       path: "/front",
       name: "front",
       redirect: to => {
-        const { hash, params, query } = to
+        const { hash, query } = to
         return { name: 'index', hash, query }
       }
     },

front/src/store/ui.js

@@ -190,6 +190,10 @@ export default {
         key: String(new Date()),
         ...message,
       }
+      let key = finalMessage.key
+      state.messages = state.messages.filter((m) => {
+        return m.key != key
+      })
       state.messages.push(finalMessage)
       if (state.messages.length > state.maxMessages) {
         state.messages.shift()

front/src/style/_main.scss

@@ -504,7 +504,7 @@ input + .help {
         position: relative;
         margin-bottom: -1px;
         .button {
-          position: absolute;
+          position: absolute !important;
           bottom: 0.5em;
           right: 0.5em;
         }

front/tests/unit/specs/store/auth.spec.js

@@ -159,7 +159,7 @@ describe('store/auth', () => {
         payload: {credentials: credentials, onError: spy}
       }, () => {
         expect(spy.calledOnce).to.equal(true)
-        done()
+        done() // eslint-disable-line no-undef
       })
     })
     it('fetchProfile', () => {

front/vue.config.js

@@ -26,12 +26,12 @@ plugins.push(
       path.join(__dirname, './src/**/*.js')
     ]),
     whitelist: ['scale'],
-    whitelistPatterns:[/plyr/],
+    whitelistPatterns: [/plyr/, /toast/],
-    whitelistPatternsChildren:[/plyr/,/dropdown/,/upward/]
+    whitelistPatternsChildren: [/plyr/, /dropdown/, /upward/]
   }),
 )
 module.exports = {
-  baseUrl: baseUrl,
+  publicPath: baseUrl,
   productionSourceMap: false,
   // Add settings for manifest file
   pwa: {
@@ -94,10 +94,15 @@ module.exports = {
     }
   },
   chainWebpack: config => {
-    config.plugins.delete('prefetch-embed')
+    // config.plugins.delete('prefetch-embed')
-    config.plugins.delete('preload-embed')
+    // config.plugins.delete('preload-embed')
-    config.plugins.delete('prefetch-index')
+    // config.plugins.delete('prefetch-index')
-
+    // TODO: Remove this workaround once https://github.com/vuejs/vue-cli/issues/2463 is fixed
+    // Remove preload plugins for multi-page build to prevent infinite recursion
+    ['embed', 'index'].forEach(page => {
+      config.plugins.delete(`preload-${page}`)
+      config.plugins.delete(`prefetch-${page}`)
+    })
     // needed to avoid having big dependedncies included in our lightweight
     // embed.html, cf https://github.com/vuejs/vue-cli/issues/2381
     const options = module.exports