From 57674206b27f8be2a153b73a4976dfbabf43cda4 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sun, 20 Jun 2021 17:23:39 -0700 Subject: [PATCH] Fix + update external modal (#1106) * Update external action modal. Uses Micromodal. Closes #1020 * refactor modal handling to isolate loading in modal component * modal style cleanup * Remove log Co-authored-by: Ginger Wong --- build/javascript/package-lock.json | 5 + build/javascript/package.json | 4 +- webroot/index.html | 194 +++++++++--------- webroot/js/app.js | 58 +++--- .../js/components/external-action-modal.js | 125 +++++------ .../dist/videojs-http-streaming.min.js | 8 +- webroot/js/web_modules/import-map.json | 1 + .../micromodal/dist/micromodal.min.js | 7 + webroot/styles/app.css | 133 ++++++++++++ 9 files changed, 341 insertions(+), 194 deletions(-) create mode 100644 webroot/js/web_modules/micromodal/dist/micromodal.min.js diff --git a/build/javascript/package-lock.json b/build/javascript/package-lock.json index c4e93b809..fef580ce1 100644 --- a/build/javascript/package-lock.json +++ b/build/javascript/package-lock.json @@ -1240,6 +1240,11 @@ "picomatch": "^2.0.5" } }, + "micromodal": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.6.tgz", + "integrity": "sha512-2VDso2a22jWPpqwuWT/4RomVpoU3Bl9qF9D01xzwlNp5UVsImeA0gY4nSpF44vqcQtQOtkiMUV9EZkAJSRxBsg==" + }, "min-document": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", diff --git a/build/javascript/package.json b/build/javascript/package.json index 5e15cf57c..6bf1e9dbd 100644 --- a/build/javascript/package.json +++ b/build/javascript/package.json @@ -9,6 +9,7 @@ "@videojs/themes": "^1.0.1", "htm": "^3.0.4", "mark.js": "^8.11.1", + "micromodal": "^0.4.6", "preact": "10.5.10", "tailwindcss": "^1.9.6", "video.js": "7.12.3" @@ -28,7 +29,8 @@ "htm", "preact", "mark.js/dist/mark.es6.min.js", - "tailwindcss/dist/tailwind.min.css" + "tailwindcss/dist/tailwind.min.css", + "micromodal/dist/micromodal.min.js" ], "alias": { "video.js": "video.js/core.js" diff --git a/webroot/index.html b/webroot/index.html index af0015382..52ee5941a 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -1,115 +1,123 @@ - - Owncast - - - - - - - - - - - - - - - - + + Owncast + + - - - + + + + + + + + + + + + + + - + + + - - + - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - -
-
- -
+ +
+
+
+
- + import App from './js/app.js'; + render(html`<${App} />`, document.getElementById("app"), document.getElementById("loading-logo-container")); + - - - + .noscript a { + display: inline; + color: blue; + text-decoration: underline; + } + +
+ +
+

+ This Owncast stream requires + Javascript to play. +

+
+ + + + \ No newline at end of file diff --git a/webroot/js/app.js b/webroot/js/app.js index a082b5bd2..93f49dad5 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -424,9 +424,7 @@ export default class App extends Component { } handleKeyPressed(e) { - if (e.code === 'Escape' && this.state.externalAction !== null) { - this.closeExternalActionModal(); - } else if ( + if ( e.target !== document.getElementById('message-input') && e.target !== document.getElementById('username-change-input') && e.target !== document.getElementsByClassName('emoji-picker__search')[0] && @@ -456,9 +454,8 @@ export default class App extends Component { } } - displayExternalAction(index) { - const { configData, username } = this.state; - const action = configData.externalActions[index]; + displayExternalAction(action) { + const { username } = this.state; if (!action) { return; } @@ -475,13 +472,13 @@ export default class App extends Component { win.focus(); return; } - - action.url = fullUrl; this.setState({ - externalAction: action, + externalAction: { + ...action, + url: fullUrl, + }, }); } - closeExternalActionModal() { this.setState({ externalAction: null, @@ -558,32 +555,25 @@ export default class App extends Component { ? null : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `; + // modal buttons const externalActionButtons = - externalActions && externalActions.length > 0 - ? html`
- ${externalActions.map( - function (action, index) { - return html`<${ExternalActionButton} - onClick=${this.displayExternalAction} - action=${action} - index=${index} - />`; - }.bind(this) - )} -
` - : null; + externalActions && + html`
+ ${externalActions.map( + function (action) { + return html`<${ExternalActionButton} + onClick=${this.displayExternalAction} + action=${action} + />`; + }.bind(this) + )} +
`; - const externalActionModal = externalAction - ? html`<${ExternalActionModal} - title=${this.state.externalAction.description || - this.state.externalAction.title} - url=${this.state.externalAction.url} - onClose=${this.closeExternalActionModal} - />` - : null; + // modal component + const externalActionModal = externalAction && html`<${ExternalActionModal} action=${externalAction} onClose=${this.closeExternalActionModal} />`; return html`
-
- + setIframeLoaded() { + this.setState({ + iframeLoaded: true, + }); + } - - -