Merge branch 'broken-embed' into 'develop'

Fix #875 Broken embed (develop)

Closes #875

See merge request funkwhale/funkwhale!825

changes/changelog.d/875.bugfix

@@ -0,0 +1 @@
+Fixed broken embedded player layout after dependency update (#875)

front/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:9
+FROM node:11
 
 # needed to compile translations
 RUN curl -L -o /usr/local/bin/jq https://github.com/stedolan/jq/releases/download/jq-1.5/jq-linux64 && chmod +x /usr/local/bin/jq

front/src/EmbedFrame.vue

@@ -374,6 +374,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~plyr/src/sass/plyr.scss";
+
 html,
 body,
 main {

front/src/components/audio/EmbedWizard.vue

@@ -58,9 +58,19 @@ export default {
   },
   computed: {
     iframeSrc () {
-      return this.$store.getters['instance/absoluteUrl'](
-        `/front/embed.html?&type=${this.type}&id=${this.id}`
-      )
+      let base = process.env.BASE_URL
+      if (base.startsWith('/')) {
+        // include hostname/protocol too so that the iframe link is absolute
+        base = `${window.location.protocol}//${window.location.host}${base}`
+      }
+      let instanceUrl = this.$store.state.instance.instanceUrl
+      let b = ''
+      if (!window.location.href.startsWith(instanceUrl)) {
+        // the frontend is running on a separate domain, so we need to provide
+        // the b= parameter in the iframe
+        b = `&b=${instanceUrl}`
+      }
+      return `${base}embed.html?&type=${this.type}&id=${this.id}${b}`
     },
     frameWidth () {
       if (this.width) {