feat(torrents): reorganize torrents images

modules/core/client/directives/torrent-image-list.client.directive.js

@@ -17,7 +17,7 @@
 
     function link(scope, element, attrs) {
       scope.$watch(attrs.torrentImageList, function (til) {
-        hideImage();
+        organizeImage();
 
         var targetNode = document.getElementById(attrs.torrentImageList);
 
@@ -26,7 +26,7 @@
         var callback = function (mutationsList) {
           for (var mutation of mutationsList) {
             if (mutation.type === 'childList') {
-              hideImage();
+              organizeImage();
             }
           }
         };
@@ -36,9 +36,14 @@
 
         //observer.disconnect();
 
-        function hideImage() {
+        /**
+         * organizeImage
+         */
+        function organizeImage() {
           var imgs = element[0].querySelectorAll('img:not(.emoji)');
           console.log(imgs);
+
+          //remove
           angular.forEach(imgs, function (i) {
             if (i.previousSibling && i.previousSibling.tagName.toUpperCase() === 'BR') {
               i.previousSibling.remove();
@@ -49,6 +54,22 @@
               angular.element(i).remove();
             }
           });
+          //reorganize
+          if (imgs.length > 0) {
+            var imgDiv = angular.element('.torrent-img-list');
+            imgDiv.remove();
+
+            var imgCap = angular.element('<div class="list-caption">{{}}</div>');
+            var imgList = angular.element('<div class="torrent-img-list film-strip"></div>');
+
+            angular.forEach(imgs, function (i) {
+              var item = angular.element(i);
+              item.addClass('img-item');
+              imgList.append(item);
+            });
+
+            element.after(imgList);
+          }
         }
       });
     }

modules/torrents/client/less/torrents.less

@@ -45,4 +45,52 @@
     border-radius: 5px;
     border: solid 1px #efefef;
     padding: 10px;
+}
+
+.torrent-img-list {
+    margin-top: 30px;
+    overflow-x: auto;
+    height: auto;
+    display: inline-flex;
+    width: 100% !important;
+    .img-item {
+        max-height: 160px;
+        cursor: pointer;
+        opacity: 0.8;
+        margin-left: 8px !important;
+        width: auto !important;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.film-strip {
+    border-top: solid 26px;
+    border-bottom: solid 26px;
+    border-left: none;
+    border-right: none;
+    border-image: url("../img/film-strip-black.png") 42 30;
+    border-image-repeat: repeat;
+    background-color: #2a2a2a;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding-bottom: 1px;
+    &:hover {
+        &::-webkit-scrollbar-track {
+            background-color: darken(@brand-primary, 30%);
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: @brand-primary;
+        }
+    }
+    &::-webkit-scrollbar {
+        height: 5px;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: #333;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #444;
+    }
 }

modules/torrents/client/views/view-torrent.client.view.html

@@ -2,7 +2,7 @@
     <div class="backdrop" ng-show="vm.torrentLocalInfo">
         <div class="filter">
             <div class="container">
-                <div class="topone">
+                <div class="topone row">
                     <div class="col-md-3 text-center">
                         <div class="topone-logo" ng-class="{'img-thumbnail center-block torrent-logo': vm.torrentLocalInfo.torrent_type!='music'}">
                             <img torrent-logo="vm.torrentLocalInfo"