Support audio file previews

This commit is contained in:
Max Leiter 2017-12-06 14:27:35 -08:00
parent f9be519c2f
commit ad1114ccfe
4 changed files with 40 additions and 10 deletions

View File

@ -1235,6 +1235,11 @@ kbd {
display: inline-flex !important; display: inline-flex !important;
} }
#chat audio {
width: 600px;
max-width: 100%;
}
/* Do not display an empty div when there are no previews. Useful for example in /* Do not display an empty div when there are no previews. Useful for example in
part/quit messages where we don't load previews (adds a blank line otherwise) */ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .preview:empty { #chat .preview:empty {

View File

@ -23,7 +23,7 @@ const options = {
showSeconds: false, showSeconds: false,
statusMessages: "condensed", statusMessages: "condensed",
theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration
thumbnails: true, media: true,
userStyles: userStyles.text(), userStyles: userStyles.text(),
}; };
let userOptions = JSON.parse(storage.get("settings")) || {}; let userOptions = JSON.parse(storage.get("settings")) || {};
@ -44,7 +44,7 @@ userOptions = null;
module.exports = options; module.exports = options;
module.exports.shouldOpenMessagePreview = function(type) { module.exports.shouldOpenMessagePreview = function(type) {
return (options.links && type === "link") || (options.thumbnails && type === "image"); return (options.links && type === "link") || (options.media && (type === "image" || type === "audio"));
}; };
module.exports.initialize = () => { module.exports.initialize = () => {

View File

@ -4,6 +4,12 @@
<a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener"> <a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener">
<img src="{{thumb}}"> <img src="{{thumb}}">
</a> </a>
{{else}}
{{#equal type "audio"}}
<audio controls preload="metadata">
<source src="{{link}}" type="{{res}}">
Your browser does not support the audio element.
</audio>
{{else}} {{else}}
{{#if thumb}} {{#if thumb}}
<a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener"> <a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener">
@ -15,5 +21,6 @@
<div class="body" title="{{body}}">{{body}}</div> <div class="body" title="{{body}}">{{body}}</div>
</a> </a>
{{/equal}} {{/equal}}
{{/equal}}
</div> </div>
{{/preview}} {{/preview}}

View File

@ -106,6 +106,22 @@ function parse(msg, preview, res, client) {
break; break;
case "audio/midi":
case "audio/mpeg":
case "audio/mpeg3":
case "audio/ogg":
case "audio/wav":
case "audio/x-mid":
case "audio/x-midi":
case "audio/x-mpeg":
case "audio/x-mpeg-3":
if (!preview.link.startsWith("https://")) {
break;
}
preview.type = "audio";
preview.res = res.type;
break;
default: default:
return; return;
} }
@ -170,6 +186,8 @@ function fetch(uri, cb) {
if (contentLength > limit) { if (contentLength > limit) {
req.abort(); req.abort();
} }
} else if (/^audio\/.+/.test(res.headers["content-type"])) {
req.abort(); // ensure server doesn't download the audio file
} else { } else {
// if not image, limit download to 50kb, since we need only meta tags // if not image, limit download to 50kb, since we need only meta tags
// twitter.com sends opengraph meta tags within ~20kb of data for individual tweets // twitter.com sends opengraph meta tags within ~20kb of data for individual tweets