diff --git a/CHANGELOG.md b/CHANGELOG.md index 17bf3044..1f76bed4 100644 --- a/CHANGELOG.md +++ b/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**: diff --git a/conversejs/custom/livechat-external-login-content.js b/conversejs/custom/livechat-external-login-content.js index 0072ec8c..3db208ce 100644 --- a/conversejs/custom/livechat-external-login-content.js +++ b/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 = '' } } diff --git a/conversejs/custom/templates/livechat-external-login-modal.js b/conversejs/custom/templates/livechat-external-login-modal.js index 6f8730ad..93a2e3bb 100644 --- a/conversejs/custom/templates/livechat-external-login-modal.js +++ b/conversejs/custom/templates/livechat-external-login-modal.js @@ -165,7 +165,16 @@ export const tplExternalLoginModal = (el, o) => { } ${!o.remote_peertube_alert_message ? '' - : html`
${o.remote_peertube_alert_message}
` + : html`
+ ${o.remote_peertube_alert_message} + ${ + !o.remote_peertube_open_failed_url + ? '' + : html` + ${o.remote_peertube_open_failed_url} + ` + } +
` } ${!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) } - diff --git a/conversejs/loc.keys.js b/conversejs/loc.keys.js index 1eb159e1..0c7f25d8 100644 --- a/conversejs/loc.keys.js +++ b/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' ] diff --git a/languages/en.yml b/languages/en.yml index aa9582ff..5f731be6 100644 --- a/languages/en.yml +++ b/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"