From 618f528344642d682c5ed2f35bfede1b179e0459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Jim=C3=A9nez=20Moreno?= <ferjmoreno@gmail.com>
Date: Mon, 13 May 2019 16:19:36 +0200
Subject: [PATCH] Render audio controls

---
 resources/media_controls.css |  2 ++
 resources/media_controls.js  | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/resources/media_controls.css b/resources/media_controls.css
index 8869aa169fd..cbea462157c 100644
--- a/resources/media_controls.css
+++ b/resources/media_controls.css
@@ -15,6 +15,8 @@ button {
 .root {
   display: block;
   position: relative;
+  min-height: 40px;
+  min-width: 200px;
 }
 
 .controls {
diff --git a/resources/media_controls.js b/resources/media_controls.js
index d00a9319e32..dc73d9ea6d3 100644
--- a/resources/media_controls.js
+++ b/resources/media_controls.js
@@ -212,9 +212,14 @@
     }
 
     render(from = this.state) {
-      // XXX This should use clientHeight/clientWidth
-      this.root.style.height = this.media.videoHeight;
-      this.root.style.width = this.media.videoWidth;
+      const isAudioOnly = this.media.localName == "audio";
+      if (!isAudioOnly) {
+        // XXX This should ideally use clientHeight/clientWidth,
+        //     but for some reason I couldn't figure out yet,
+        //     using it breaks layout.
+        this.root.style.height = this.media.videoHeight;
+        this.root.style.width = this.media.videoWidth;
+      }
 
       // Error
       if (this.state == ERRORED) {