From 1a205c0e02397f8111f581379ea5cd9b0ca14b74 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 10 Jul 2019 19:34:52 +0200
Subject: [PATCH] Fix #875 Broken embed (develop)

---
 changes/changelog.d/875.bugfix             |  1 +
 front/Dockerfile                           |  2 +-
 front/src/EmbedFrame.vue                   |  2 ++
 front/src/components/audio/EmbedWizard.vue | 16 +++++++++++++---
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 changes/changelog.d/875.bugfix

diff --git a/changes/changelog.d/875.bugfix b/changes/changelog.d/875.bugfix
new file mode 100644
index 000000000..609d83f6c
--- /dev/null
+++ b/changes/changelog.d/875.bugfix
@@ -0,0 +1 @@
+Fixed broken embedded player layout after dependency update (#875)
diff --git a/front/Dockerfile b/front/Dockerfile
index 43c968012..6acd9d9db 100644
--- a/front/Dockerfile
+++ b/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
diff --git a/front/src/EmbedFrame.vue b/front/src/EmbedFrame.vue
index 9c677e56e..991d9802b 100644
--- a/front/src/EmbedFrame.vue
+++ b/front/src/EmbedFrame.vue
@@ -374,6 +374,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~plyr/src/sass/plyr.scss";
+
 html,
 body,
 main {
diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue
index e4412937e..13d9ffd65 100644
--- a/front/src/components/audio/EmbedWizard.vue
+++ b/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) {