diff --git a/modules/core/client/directives/torrent-image-list.client.directive.js b/modules/core/client/directives/torrent-image-list.client.directive.js
index 15215366..890fa78b 100644
--- a/modules/core/client/directives/torrent-image-list.client.directive.js
+++ b/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('
{{}}
');
+ var imgList = angular.element('');
+
+ angular.forEach(imgs, function (i) {
+ var item = angular.element(i);
+ item.addClass('img-item');
+ imgList.append(item);
+ });
+
+ element.after(imgList);
+ }
}
});
}
diff --git a/modules/torrents/client/img/film-strip-black.png b/modules/torrents/client/img/film-strip-black.png
new file mode 100644
index 00000000..bd4e701e
Binary files /dev/null and b/modules/torrents/client/img/film-strip-black.png differ
diff --git a/modules/torrents/client/img/film-strip.png b/modules/torrents/client/img/film-strip.png
new file mode 100644
index 00000000..a058511c
Binary files /dev/null and b/modules/torrents/client/img/film-strip.png differ
diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less
index 7a0c0bd0..321c060f 100644
--- a/modules/torrents/client/less/torrents.less
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 67f1c42f..ab4f389e 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -2,7 +2,7 @@