From 27cfeed687de8f67f1b15d764981be614510d310 Mon Sep 17 00:00:00 2001
From: sergiotarxz <sergio.iglesias7890@gmail.com>
Date: Fri, 22 Jan 2021 01:19:18 +0100
Subject: [PATCH] feat: Improving the support of the format list.

---
 themes/default/public/dist/css/index.css      |   2 +-
 .../public/dist/css/index.css                 | 100 ++++++++++++++----
 .../public/dist/img/audio_muted.svg           |  18 ++++
 .../new_look_default/public/dist/index.html   |   6 +-
 .../public/src/view/format_selector.js        |  59 ++++++++---
 5 files changed, 145 insertions(+), 40 deletions(-)
 create mode 100644 themes/new_look_default/public/dist/img/audio_muted.svg

diff --git a/themes/default/public/dist/css/index.css b/themes/default/public/dist/css/index.css
index 87c0190..d36581e 100644
--- a/themes/default/public/dist/css/index.css
+++ b/themes/default/public/dist/css/index.css
@@ -44,7 +44,7 @@ a:hover,a:focus {
     border: 1px solid black;
 }
 
-#close-and-reset-video-container:hover,#close-and-reset-video-container:focus {
+#close-and-reset-video-container:hover:#close-and-reset-video-container:focus {
     background: black;
     color: white;
 }
diff --git a/themes/new_look_default/public/dist/css/index.css b/themes/new_look_default/public/dist/css/index.css
index 2ddd890..40ef2fe 100644
--- a/themes/new_look_default/public/dist/css/index.css
+++ b/themes/new_look_default/public/dist/css/index.css
@@ -74,15 +74,6 @@ body {
     display: flex;
 }
 
-#poping-notice {
-    position: absolute;
-    display: none;
-    padding: 3rem;
-    border-radius: 0.3rem;
-    background-color: #374151;
-    color: white;
-}
-
 #poping-notice-content a {
     text-decoration: none;
     color: #10b981;
@@ -110,17 +101,29 @@ body {
     background-color: #059;
 }
 
-#modal-video-container {
-  position: absolute;
-  display: none;
+.modal {
+    position: absolute;
+    display: none;
+    color: white;
+}
 
-  height: 100vh;
-  width: 100%;
+#poping-notice {
+    padding: 3rem;
+    border-radius: 0.3rem;
+    background-color: #374151;
+    color: white;
+	overflow-y: scroll;
+    width: 94%;
+}
 
-  flex-flow: column;
-  align-items: center;
+#modal-video-container,#modal-format-selector {
+    height: 100%;
+    width: 100%;
 
-  background-color: #111827;
+    flex-flow: column;
+    align-items: center;
+
+    background-color: #111827;
 }
 
 .video-container-bar {
@@ -192,24 +195,23 @@ body {
     align-items: center;
 }
 
-#modal-loading,
-#modal-format-selector {
-  display: none;
+#modal-loading {
+    display: none;
 }
 
-#poping-notice.active,
-#modal-video-container.active {
+.modal {
   --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  overflow-y: scroll;
 }
 
 #poping-notice.active {
   display: block;
 }
 
-#modal-video-container.active {
+.modal.active {
   display: flex;
 }
 
@@ -245,6 +247,58 @@ body {
     justify-content: center;
 }
 
+.format-list > div {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    grid-template-areas: "a";
+    grid-auto-columns: 99%;
+    margin: 1rem;
+}
+
+.format-list > div > a {
+    border: 1px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    padding-right: 5%;
+    padding-left: 5%;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    background-color: #059669;
+    overflow-wrap: anywhere;
+}
+
+.format-list > div > a:focus,.format-list > div > a:hover {
+    background-color: #059;
+}
+
+.format-list > div > a:after {
+    padding-bottom: 100%;
+    display: block;
+    content: "";
+}
+
+.scale {
+    height: 1em;
+    width; 1em;
+}
+
+@media (min-width: 600px) {
+    .format-list > div {
+        grid-template-areas: "a a";
+        grid-auto-columns: 49.75%;
+    }
+}
+
+@media (min-width: 805px) {
+    .format-list > div {
+        grid-template-areas: "a a a";
+        grid-auto-columns: 33%;
+    }
+}
+
 @media (min-width: 812px) {
   #poping-notice {
       width: 40%;
diff --git a/themes/new_look_default/public/dist/img/audio_muted.svg b/themes/new_look_default/public/dist/img/audio_muted.svg
new file mode 100644
index 0000000..119d23f
--- /dev/null
+++ b/themes/new_look_default/public/dist/img/audio_muted.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g transform="matrix(.13811 0 0 .13811 4.964 5.832)" fill-opacity=".8">
+        <g transform="matrix(6.5167 0 0 6.5167-28.01-34.23)">
+            <g transform="matrix(1.17633 0 0 1.17633 1 1.589)" stroke-opacity=".85" fill="#000" stroke="none" fill-opacity="0" stroke-width=".73">
+                <path d="m11.243 12.993c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.061 2.047-2.047 2.047-5.378 0-7.425-.293-.293-.293-.768 0-1.061.293-.293.768-.293 1.061 0 1.275 1.275 1.977 2.97 1.977 4.773 0 1.803-.702 3.498-1.977 4.773-.146.146-.338.22-.53.22z"/>
+                <path d="m8.578 11.578c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.061 1.267-1.267 1.267-3.329 0-4.596-.293-.293-.293-.768 0-1.061.293-.293.768-.293 1.061 0 1.852 1.852 1.852 4.865 0 6.718-.146.146-.338.22-.53.22z"/>
+            </g>
+            <g transform="translate(16 4)">
+                <g fill="#f2f2f2" fill-opacity="0">
+                    <path d="m-1.773 12.874c-.226 0-.452-.086-.623-.259-.345-.345-.345-.903 0-1.248 2.408-2.408 2.408-6.326 0-8.734-.345-.345-.345-.903 0-1.248.345-.345.903-.345 1.248 0 1.5 1.5 2.326 3.494 2.326 5.615 0 2.121-.826 4.115-2.326 5.615-.172.172-.398.259-.623.259z"/>
+                    <path d="m-4.908 11.209c-.226 0-.452-.086-.623-.259-.345-.345-.345-.903 0-1.248 1.49-1.49 1.49-3.916 0-5.406-.345-.345-.345-.903 0-1.248.345-.345.903-.345 1.248 0 2.179 2.179 2.179 5.723 0 7.903-.172.172-.398.259-.623.259z"/>
+                </g>
+                <path d="m-7.353 15.235c-.153 0-.303-.06-.416-.172l-4.534-4.534h-2.109c-.325 0-.588-.263-.588-.588v-5.882c0-.325.263-.588.588-.588h2.109l4.534-4.534c.168-.168.421-.219.641-.127.22.092.363.306.363.543v15.292c0 .238-.144.453-.363.543-.073.031-.149.045-.225.045" fill="#4d4d4d" fill-opacity="1"/>
+            </g>
+        </g>
+        <path d="m14.75 9.674v1.326h-1.326l-1.674-1.674-1.674 1.674h-1.326v-1.326l1.674-1.674-1.674-1.674v-1.326h1.326l1.674 1.674 1.674-1.674h1.326v1.326l-1.674 1.674 1.674 1.674" fill="#4d4d4d" fill-opacity="1" transform="matrix(8.22579 0 0 8.22579-32.543-28.351)"/>
+    </g>
+</svg>
diff --git a/themes/new_look_default/public/dist/index.html b/themes/new_look_default/public/dist/index.html
index 1c8cd43..70834ed 100644
--- a/themes/new_look_default/public/dist/index.html
+++ b/themes/new_look_default/public/dist/index.html
@@ -20,7 +20,7 @@
             <button class="block" id="download-form-button" >Fetch from api</button>
         </form>
     </div>
-    <div id="modal-format-selector">
+    <div id="modal-format-selector" class="modal">
         <div class="video-container-bar">
             <a id="close-modal-format-selector">x</a>
         </div>
@@ -38,7 +38,7 @@
     <div id="modal-loading">
         <embed src="img/spinner.svg"/>
     </div>
-    <div id="modal-video-container">
+    <div id="modal-video-container" class="modal">
         <div class="video-container-bar">
             <a id="close-and-reset-video-container">x</a>
         </div>
@@ -53,7 +53,7 @@
             </div>
         </div>
     </div>
-    <div id="poping-notice">
+    <div id="poping-notice" class="modal">
         <div id="poping-notice-content">
             <p>This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty,
             you can find the source code at <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl">my gitea</a> with docs to setup your own 
diff --git a/themes/new_look_default/public/src/view/format_selector.js b/themes/new_look_default/public/src/view/format_selector.js
index c9e9665..fb51107 100644
--- a/themes/new_look_default/public/src/view/format_selector.js
+++ b/themes/new_look_default/public/src/view/format_selector.js
@@ -8,25 +8,58 @@ class FormatSelector {
 
     appendFormat(container, object, is_video, callback) {
         let a = document.createElement('a');
+        let br = function() { return document.createElement('br') };
+        let inner_text = [];
+        let muted_video = false;
         if ( is_video ) {
-            a.innerText = 'Id: ' + object.id + "\n"
-                + 'Format: ' + object.mimeType + "\n"
-                + 'QualityLabel: ' + object.qualityLabel + "p\n"
-                + 'Bitrate: ' + object.bitrate + "\n"
-                + (
-                    ( object.audioSampleRate !== undefined ) ?
-                        'AudioSampleRate: ' + object.audioSampleRate + ".\n" :
-                        "No audio."
-                );
+            if ( object.audioSampleRate === undefined ) {
+                muted_video = true;
+            }
+            inner_text.push('Id: ' + object.id);
+            inner_text.push(br());
+            inner_text.push('Format: ' + object.mimeType);
+            inner_text.push(br());
+            inner_text.push('QualityLabel: ' + object.qualityLabel + "p");
+            inner_text.push(br());
+            inner_text.push('Bitrate: ' + object.bitrate); 
+            inner_text.push(br());
+            inner_text.push( ( muted_video) ?  
+                "No audio. " :
+                'AudioSampleRate: ' + object.audioSampleRate 
+            );
         } else {
-            a.innerText = 'Id: ' + object.id + "\n"
-                + 'Format: ' + object.mimeType + "\n"
-                + 'AudioSampleRate: ' + object.audioSampleRate + "\n"
-                + 'Bitrate: ' + object.bitrate + ".\n";
+            inner_text.push('Id: ' + object.id + "\n");
+            inner_text.push(br());
+            inner_text.push('Format: ' + object.mimeType);
+            inner_text.push(br());
+            inner_text.push('AudioSampleRate: ' + object.audioSampleRate);
+            inner_text.push(br());
+            inner_text.push('Bitrate: ' + object.bitrate);
         }
+
         a.addEventListener( 'click', (event) => {
             callback(object.id);
         });
+        if (muted_video) {
+            let img_muted_video = document.createElement('img');
+            img_muted_video.classList.add('mute_img');
+            img_muted_video.classList.add('scale');
+            img_muted_video.src = 'img/audio_muted.svg';
+            inner_text.push(img_muted_video);
+        }
+
+        for (let text of inner_text) {
+            if (typeof text === "string" 
+              || text instanceof String) {
+                text = document.createTextNode(text);
+                a.appendChild(text);
+            } else if ( text instanceof Node) {
+                a.appendChild(text);
+            } else {
+                throw ('Text is not a instance of Node nor a String');
+            }
+        }
+ 
         container.appendChild(a);
     }