Merge pull request #1806 from MaxLeiter/sound

Support audio file previews

client/css/style.css

@@ -1240,6 +1240,11 @@ kbd {
 	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
 part/quit messages where we don't load previews (adds a blank line otherwise) */
 #chat .preview:empty {

client/js/options.js

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

client/views/msg_preview.tpl

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

src/plugins/irc-events/link.js

@@ -106,6 +106,22 @@ function parse(msg, preview, res, client) {
 
 		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:
 		return;
 	}
@@ -170,6 +186,8 @@ function fetch(uri, cb) {
 				if (contentLength > limit) {
 					req.abort();
 				}
+			} else if (/^audio\/.+/.test(res.headers["content-type"])) {
+				req.abort(); // ensure server doesn't download the audio file
 			} else {
 				// 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