Feat: show pictures in filesystem browse card #200

jcorporation · Oct 27, 2020 · 1b8fb82 · 1b8fb82
1 parent 02e94e9
commit 1b8fb82
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 7 deletions.
diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css
@@ -10,7 +10,7 @@
 
 :root {
   --mympd-coverimagesize: 250px;
-  --mympd-coverimagesizesmall: 200px;
+  --mympd-coverimagesizesmall: 175px;
   --mympd-highlightcolor: #28a745;
 }
 
@@ -889,8 +889,26 @@ div.BrowseDatabaseCardsContainer .col {
 }
 
 div#modalPictureImg {
-  width: 100%;
+  background-position: center center;
+  background-size: cover;
   padding-top: 100%;
+  width: 100%;
+}
+
+div#BrowseFilesystemImages {
+  height: calc(var(--mympd-coverimagesizesmall, 150px) + 1rem);
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+
+div#BrowseFilesystemImages > div {
+  height: var(--mympd-coverimagesizesmall, 175px);
+  width: var(--mympd-coverimagesizesmall, 175px);
   background-position: center center;
-  background-size: cover; 
+  background-size: cover;
+  display: inline-block;
+  margin-right: 1rem;
+  cursor: pointer;
 }
diff --git a/htdocs/index.html b/htdocs/index.html
@@ -563,6 +563,7 @@ <h2 class="dropdown-header text-light" data-phrase="Add smart playlist"></h2>
           </div>
         </div>
         <ol id="BrowseBreadcrumb" class="breadcrumb"></ol>
+        <div id="BrowseFilesystemImages" class="featBrowse not-clickable" data-href='{"cmd": "zoomPicture", "options": []}'></div>
         <div class="table-responsive-md">
           <table id="BrowseFilesystemList" class="table table-hover table-sm">
             <thead>
@@ -2138,7 +2139,11 @@ <h5 class="modal-title"><span class="material-icons title-icon">volume_up</span>
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
         <div class="modal-body">
-          <div id="modalPictureImg" class="coverimage-loading" data-dismiss="modal"></div>
+          <div id="modalPictureImg" class="coverimage-loading"></div>
+        </div>
+        <div class="modal-footer justify-content-between">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal" data-phrase="Close"></button>
+          <button data-href='{"cmd":"zoomZoomPicture","options":[]}' type="button" class="btn btn-success" data-phrase="Zoom"></button>
         </div>
       </div>
     </div>

diff --git a/htdocs/js/browse.js b/htdocs/js/browse.js
@@ -53,9 +53,23 @@ function parseFilesystem(obj) {
         tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
                           '<td colspan="' + colspan + '">' + t(obj.error.message) + '</td></tr>';
         document.getElementById(app.current.app + (app.current.tab === undefined ? '' : app.current.tab) + 'List').classList.remove('opacity05');
-        document.getElementById('cardFooterBrowse').innerText = '';
+        //document.getElementById('cardFooterBrowse').innerText = '';
         return;
     }
+
+    const imageList = document.getElementById('BrowseFilesystemImages');
+    imageList.innerHTML = '';
+    if (obj.result.images.length === 0) {
+        imageList.classList.add('hide');
+    }
+    else {
+        imageList.classList.remove('hide');
+    }
+    for (let i = 0; i < obj.result.images.length; i++) {
+        let img = document.createElement('div');
+        img.style.backgroundImage = 'url("' + subdir + '/browse/music/' + obj.result.images[i] + '"),url("assets/coverimage-loading.svg")';
+        imageList.appendChild(img);
+    }
 
     let nrItems = obj.result.returnedEntities;
     let tr = tbody.getElementsByTagName('tr');

diff --git a/htdocs/js/misc.js b/htdocs/js/misc.js
@@ -171,6 +171,12 @@ function _updateDBfinished(idleEvent) {
 }
 
 function zoomPicture(el) {
-    modalPicture.show();
-    document.getElementById('modalPictureImg').style.backgroundImage = el.style.backgroundImage;
+    if (el.style.backgroundImage !== '') {
+        modalPicture.show();
+        document.getElementById('modalPictureImg').style.backgroundImage = el.style.backgroundImage;
+    }
 }
+
+function zoomZoomPicture() {
+    window.open(document.getElementById('modalPictureImg').style.backgroundImage.match(/^url\(["']?([^"']*)["']?\)/)[1]);
+}