Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## ??? (Not Released Yet)
+
+### Minor changes and fixes
+
+* Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe.
+
 ## 9.0.0
 
 **Breaking changes**:

conversejs/custom/livechat-external-login-content.js

@@ -9,7 +9,8 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
       external_auth_oidc_alert_message: { type: String, attribute: false },
       remote_peertube_state: { type: String, attribute: false },
       remote_peertube_alert_message: { type: String, attribute: false },
-      remote_peertube_try_anyway_url: { type: String, attribute: false }
+      remote_peertube_try_anyway_url: { type: String, attribute: false },
+      remote_peertube_open_failed_url: { type: String, attribute: false }
     }
   }
 
@@ -23,7 +24,8 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
       external_auth_oidc_alert_message: this.external_auth_oidc_alert_message,
       remote_peertube_state: this.remote_peertube_state,
       remote_peertube_alert_message: this.remote_peertube_alert_message,
-      remote_peertube_try_anyway_url: this.remote_peertube_try_anyway_url
+      remote_peertube_try_anyway_url: this.remote_peertube_try_anyway_url,
+      remote_peertube_open_failed_url: this.remote_peertube_open_failed_url
     })
   }
 
@@ -82,13 +84,14 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
           searchAPIUrl.searchParams.append('count', 1)
           searchAPIUrl.searchParams.append('search', search)
           searchAPIUrl.searchParams.append('searchTarget', searchTarget)
-          const videos = await (await fetch(searchAPIUrl.toString())).json()
+          const videos = null // await (await fetch(searchAPIUrl.toString())).json()
           if (videos && Array.isArray(videos.data) && videos.data.length > 0 && videos.data[0].uuid) {
             console.log('Video found, opening on remote instance')
             this.remote_peertube_state = 'ok'
-            window.location.href = new URL(
+            const url = new URL(
               '/videos/watch/' + encodeURIComponent(videos.data[0].uuid), remotePeertubeUrl
             ).toString()
+            this.openUrlTargetTop(url)
             return
           }
         }
@@ -110,10 +113,28 @@ export default class LivechatExternalLoginContentElement extends CustomElement {
     }
   }
 
+  openUrlTargetTop (url) {
+    try {
+      // window.open can fail when in an iframe that restricts some operations
+      // (when embeding the chat in a website).
+      // So, we must try/catch, and propose an alternative open method.
+      window.open(url, '_top')
+    } catch (e) {
+      console.log(e)
+      this.remote_peertube_state = 'error'
+      // eslint-disable-next-line no-undef
+      this.remote_peertube_alert_message = __(LOC_login_remote_peertube_video_open_failed)
+      this.remote_peertube_open_failed_url = url
+
+      this.remote_peertube_try_anyway_url = ''
+    }
+  }
+
   clearAlert () {
     this.external_auth_oidc_alert_message = ''
     this.remote_peertube_alert_message = ''
     this.remote_peertube_try_anyway_url = ''
+    this.remote_peertube_open_failed_url = ''
   }
 }
 

conversejs/custom/templates/livechat-external-login-modal.js

@@ -165,7 +165,16 @@ export const tplExternalLoginModal = (el, o) => {
       }
       ${!o.remote_peertube_alert_message
         ? ''
-        : html`<div class="invalid-feedback d-block">${o.remote_peertube_alert_message}</div>`
+        : html`<div class="invalid-feedback d-block">
+          ${o.remote_peertube_alert_message}
+          ${
+            !o.remote_peertube_open_failed_url
+              ? ''
+              : html`<a href="${o.remote_peertube_open_failed_url}" target="_top">
+                ${o.remote_peertube_open_failed_url}
+              </a>`
+          }
+        </div>`
       }
       ${!o.remote_peertube_try_anyway_url
         ? ''
@@ -174,7 +183,7 @@ export const tplExternalLoginModal = (el, o) => {
             // eslint-disable-next-line no-undef
             __(LOC_login_remote_peertube_video_not_found_try_anyway)
           }
-          <button class="btn btn-primary" onclick="window.location.href='${o.remote_peertube_try_anyway_url}'">${
+          <button class="btn btn-primary" @click=${() => el.openUrlTargetTop(o.remote_peertube_try_anyway_url)}>${
             // eslint-disable-next-line no-undef
             __(LOC_login_remote_peertube_video_not_found_try_anyway_button)
           }</button>

conversejs/loc.keys.js

@@ -14,6 +14,7 @@ const locKeys = [
   'login_remote_peertube_video_not_found',
   'login_remote_peertube_video_not_found_try_anyway',
   'login_remote_peertube_video_not_found_try_anyway_button',
+  'login_remote_peertube_video_open_failed',
   'login_external_auth_alert_message'
 ]
 

languages/en.yml

@@ -432,4 +432,5 @@ login_remote_peertube_no_livechat: "The livechat plugin is not installed on this
 login_remote_peertube_video_not_found: "This video is not available on this Peertube instance."
 login_remote_peertube_video_not_found_try_anyway: "In some cases, the video can still be retrieved if you connect to the remote instance."
 login_remote_peertube_video_not_found_try_anyway_button: "Try anyway to open the video on the Peertube instance"
+login_remote_peertube_video_open_failed: "Your browser has blocked the opening on the remote instance, please try to open manually this link:"
 login_external_auth_alert_message: "Authentication failed"