diff options
author | Andrew Dolgov <[email protected]> | 2021-02-15 14:10:46 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2021-02-15 14:10:46 +0300 |
commit | 82adb01307e108e8a2b4eeb900552160d730d0b7 (patch) | |
tree | 1048a18b3ad79a546e847ca52267249b6ab3b073 /js | |
parent | 916c21fe60490c50e9ae587b0a977302b9110800 (diff) |
render enclosures on the client
Diffstat (limited to 'js')
-rw-r--r-- | js/App.js | 18 | ||||
-rw-r--r-- | js/Article.js | 58 | ||||
-rwxr-xr-x | js/Headlines.js | 2 |
3 files changed, 66 insertions, 12 deletions
@@ -586,6 +586,10 @@ const App = { isPrefs() { return this.is_prefs; }, + audioCanPlay: function(ctype) { + const a = document.createElement('audio'); + return a.canPlayType(ctype); + }, init: function(parser, is_prefs) { this.is_prefs = is_prefs; window.onerror = this.Error.onWindowError; @@ -604,17 +608,11 @@ const App = { this.initHotkeyActions(); this.enableCsrfSupport(); - const a = document.createElement('audio'); - const hasAudio = !!a.canPlayType; - const hasSandbox = "sandbox" in document.createElement("iframe"); - const hasMp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); - const clientTzOffset = new Date().getTimezoneOffset() * 60; - const params = { - op: "rpc", method: "sanityCheck", hasAudio: hasAudio, - hasMp3: hasMp3, - clientTzOffset: clientTzOffset, - hasSandbox: hasSandbox + op: "rpc", + method: "sanityCheck", + clientTzOffset: new Date().getTimezoneOffset() * 60, + hasSandbox: "sandbox" in document.createElement("iframe") }; xhrPost("backend.php", params, (transport) => { diff --git a/js/Article.js b/js/Article.js index f8b0415b9..efe33bc99 100644 --- a/js/Article.js +++ b/js/Article.js @@ -140,6 +140,62 @@ const Article = { Headlines.toggleUnread(id, 0); }, + renderEnclosures: function (enclosures) { + + // enclosure list was handled by backend (HOOK_FORMAT_ENCLOSURES) + if (enclosures.formatted) + return enclosures.formatted; + + return ` + ${enclosures.can_inline ? + `<div class='attachments-inline'> + ${enclosures.entries.map((enc) => { + if (!enclosures.inline_text_only) { + if (enc.content_type && enc.content_type.indexOf("image/") != -1) { + return `<p> + <img loading="lazy" + width="${enc.width ? enc.width : ''}" + height="${enc.height ? enc.height : ''}" + src="${App.escapeHtml(enc.content_url)}" + title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}"/> + </p>` + } else if (enc.content_type && enc.content_type.indexOf("audio/") != -1 && App.audioCanPlay(enc.content_type)) { + return `<p class='inline-player' title="${App.escapeHtml(enc.content_url)}"> + <audio preload="none" controls="controls"> + <source type="${App.escapeHtml(enc.content_type)}" src="${App.escapeHtml(enc.content_url)}"/> + </audio> + </p> + `; + } else { + return `<p> + <a target="_blank" href="${App.escapeHtml(enc.content_url)}" + title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}" + rel="noopener noreferrer">${App.escapeHtml(enc.content_url)}</a> + </p>` + } + } else { + return `<p> + <a target="_blank" href="${App.escapeHtml(enc.content_url)}" + title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}" + rel="noopener noreferrer">${App.escapeHtml(enc.content_url)}</a> + </p>` + } + }).join("")} + </div>` : ''} + ${enclosures.entries.length > 0 ? + `<div class="attachments" dojoType="fox.form.DropDownButton"> + <span>${__('Attachments')}</span> + <div dojoType="dijit.Menu" style="display: none"> + ${enclosures.entries.map((enc) => ` + <div onclick='Article.popupOpenUrl("${App.escapeHtml(enc.content_url)}")' + title="${App.escapeHtml(enc.title ? enc.title : enc.content_url)}" dojoType="dijit.MenuItem"> + ${enc.title ? enc.title : enc.filename} + </div> + `).join("")} + </div> + </div>` : ''} + ` + }, render: function (article) { App.cleanupMemory("content-insert"); @@ -241,7 +297,7 @@ const Article = { <div id="POSTNOTE-${hl.id}">${hl.note}</div> <div class="content" lang="${hl.lang ? hl.lang : 'en'}"> ${hl.content} - ${hl.enclosures} + ${Article.renderEnclosures(hl.enclosures)} </div> </div>`; diff --git a/js/Headlines.js b/js/Headlines.js index 94541b974..dadf79c1a 100755 --- a/js/Headlines.js +++ b/js/Headlines.js @@ -488,7 +488,7 @@ const Headlines = { <img src="${App.getInitParam('icon_indicator_white')}"> </div> <div class="intermediate"> - ${hl.enclosures} + ${Article.renderEnclosures(hl.enclosures)} </div> <div class="footer" onclick="event.stopPropagation()"> |