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; - - const externalActionModal = externalAction - ? html`<${ExternalActionModal} - title=${this.state.externalAction.description || - this.state.externalAction.title} - url=${this.state.externalAction.url} - onClose=${this.closeExternalActionModal} - />` - : null; + externalActions && + html`
+ ${externalActions.map( + function (action) { + return html`<${ExternalActionButton} + onClick=${this.displayExternalAction} + action=${action} + />`; + }.bind(this) + )} +
`; + + // modal component + const externalActionModal = externalAction && html`<${ExternalActionModal} action=${externalAction} onClose=${this.closeExternalActionModal} />`; return html`
-
- + setIframeLoaded() { + this.setState({ + iframeLoaded: true, + }); + } - - -