Nemcio/meanTorrent
1
0
Fork 0
mirror of https://github.com/taobataoma/meanTorrent.git synced 2026-05-07 11:47:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(torrents): new logic for show resource screenshots image on torrent detail page

Browse Source
This commit is contained in:
OldHawk
2018-05-30 23:41:15 +08:00
parent b7b295b2db
commit cbe02f1c7d
12 changed files with 172 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/env/torrents.js vendored
View File

@@ -1284,7 +1284,7 @@ module.exports = {
* @resourcesLanguage: settings for language of dropdown resource info
*/
tmdbConfig: {
key: '7888f0042a366f63289ff571b68b7ce0',
key: 'this is access key from tmdb',
tmdbHome: 'https://www.themoviedb.org',
tmdbMovieLinkUrl: 'https://www.themoviedb.org/movie/',
tmdbTvserialLinkUrl: 'https://www.themoviedb.org/tv/',

2
modules/core/client/app/trans-string-en.js
View File

@@ -1270,7 +1270,7 @@
BACKDROP_PATH: 'backdrop path',
POSTER_PATH: 'poster path',
CAST: 'cast：',
IMAGE_OVERVIEW: 'image overview：',
IMAGE_OVERVIEW: 'screenshots overview：',
DIRECTOR: 'Director',
ORIGINAL_NAME: 'original name',

4
modules/core/client/app/trans-string-zh-tw.js
View File

@@ -558,7 +558,7 @@
TMDB_IS_LOADING: '正在檢索視訊資訊，請稍候...',
SELECT_SE: '• 請選擇電視劇季數並輸入本資源為本劇第幾集',
SELECT_TAGS: '• 請為資源選擇合適的標籤',
SELECT_SCREEN_SHOTS: '• 請為資源選擇播放效果截圖',
SELECT_SCREEN_SHOTS: '• 請上傳資源預覽截圖',
ENTER_VIDEO_NFO: '• 請輸入視訊和音訊的NFO資訊',
SELECT_MAKER_GROUP: '• 請選擇您上傳時使用的資源小組',
MAKER_NULL: '無',
@@ -1270,7 +1270,7 @@
BACKDROP_PATH: '背景海報',
POSTER_PATH: '海報',
CAST: '主演：',
IMAGE_OVERVIEW: '圖片預覽：',
IMAGE_OVERVIEW: '截圖預覽：',
DIRECTOR: '導演',
ORIGINAL_NAME: '原劇名',

4
modules/core/client/app/trans-string-zh.js
View File

@@ -558,7 +558,7 @@
TMDB_IS_LOADING: '正在检索视频信息，请稍候...',
SELECT_SE: '• 请选择电视剧季数并输入本资源为本剧第几集',
SELECT_TAGS: '• 请为资源选择合适的标签',
SELECT_SCREEN_SHOTS: '• 请为资源选择播放效果截图',
SELECT_SCREEN_SHOTS: '• 请上传资源预览截图',
ENTER_VIDEO_NFO: '• 请输入视频和音频的NFO信息',
SELECT_MAKER_GROUP: '• 请选择您上传时使用的资源小组',
MAKER_NULL: '无',
@@ -1270,7 +1270,7 @@
BACKDROP_PATH: '背景海报',
POSTER_PATH: '海报',
CAST: '主演：',
IMAGE_OVERVIEW: '图片预览：',
IMAGE_OVERVIEW: '截图预览：',
DIRECTOR: '导演',
ORIGINAL_NAME: '原剧名',

100
modules/core/client/directives/torrent-image-list-from-overview.client.directive.js Normal file
View File

@@ -0,0 +1,100 @@
(function () {
'use strict';
angular.module('core')
.directive('torrentImageListFromOverview', torrentImageListFromOverview);
torrentImageListFromOverview.$inject = ['$sce', '$parse', '$compile', '$timeout'];
function torrentImageListFromOverview($sce, $parse, $compile, $timeout) {
var directive = {
restrict: 'A',
priority: 10,
link: link
};
return directive;
function link(scope, element, attrs) {
attrs.$observe('torrentImageListFromOverview', function (til) {
var targetNode = element[0];
var config = {childList: true};
var callback = function (mutationsList) {
angular.forEach(mutationsList, function (mutation) {
if (mutation.type === 'childList') {
organizeImage();
}
});
};
if (til) {
organizeImage();
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
//observer.disconnect();
}
/**
* organizeImage
*/
function organizeImage() {
var imgs = targetNode.querySelectorAll('img:not(.emoji)');
//remove
angular.forEach(imgs, function (i) {
if (i.parentElement.childElementCount === 1) {
angular.element(i.parentElement).remove();
} else {
if (i.previousSibling && i.previousSibling.tagName.toUpperCase() === 'BR') {
angular.element(i.previousSibling).remove();
}
angular.element(i).remove();
}
});
//reorganize
if (imgs.length > 0) {
var container = targetNode.parentNode;
if (attrs.hasOwnProperty('imgContainer')) {
container = document.getElementById(attrs.imgContainer);
}
var imgDiv = container.querySelectorAll('.torrent-img-list');
if (imgDiv) {
angular.element(imgDiv).remove();
}
var imgList = angular.element('<div class="torrent-img-list film-strip"></div>');
angular.forEach(imgs, function (i, idx) {
var item = angular.element(i);
var src = item.attr('src');
var nsrc = src.substr(0, src.lastIndexOf('/') + 1) + 'crop/' + src.substr(src.lastIndexOf('/') + 1);
item.attr('on-error-src', item.attr('src'));
item.attr('src', nsrc);
item.addClass('img-item');
item.on('click', function (evt) {
if (attrs.imgClickEvent) {
scope.$eval(attrs.imgClickEvent, {event: {event: evt, imgs: imgs, index: idx}});
}
});
imgList.append(item);
});
angular.element(container).append(imgList);
angular.element(container).css('display', 'block');
$compile(imgList.contents())(scope);
//change overview height
var overviewDiv = targetNode.parentNode.querySelectorAll('.torrent-overview');
if (overviewDiv) {
angular.element(overviewDiv).css('max-height', '200px');
}
}
}
});
}
}
}());

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

@@ -10,6 +10,9 @@
var directive = {
restrict: 'A',
priority: 10,
scope: {
imgs: '='
},
link: link
};
@@ -17,81 +20,55 @@
function link(scope, element, attrs) {
attrs.$observe('torrentImageList', function (til) {
var targetNode = element[0];
var config = {childList: true};
var callback = function (mutationsList) {
angular.forEach(mutationsList, function (mutation) {
if (mutation.type === 'childList') {
organizeImage();
if (til) {
if (!attrs.hasOwnProperty('imgs')) {
return console.error('no imgs attr is set in directive torrentImageList');
}
scope.$watch('imgs', function (newVal) {
if (newVal) {
organizeImage(newVal);
}
});
};
if (til) {
organizeImage();
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
//observer.disconnect();
}
/**
* organizeImage
*/
function organizeImage() {
var imgs = targetNode.querySelectorAll('img:not(.emoji)');
//remove
angular.forEach(imgs, function (i) {
if (i.parentElement.childElementCount === 1) {
angular.element(i.parentElement).remove();
} else {
if (i.previousSibling && i.previousSibling.tagName.toUpperCase() === 'BR') {
angular.element(i.previousSibling).remove();
}
angular.element(i).remove();
}
});
function organizeImage(imgs) {
//reorganize
if (imgs.length > 0) {
var container = targetNode.parentNode;
if (attrs.hasOwnProperty('imgContainer')) {
container = document.getElementById(attrs.imgContainer);
}
var imgDiv = container.querySelectorAll('.torrent-img-list');
if (imgs && imgs.length > 0) {
var imgDiv = angular.element('.torrent-img-list');
if (imgDiv) {
angular.element(imgDiv).remove();
imgDiv.remove();
}
var imgEleList = [];
var imgList = angular.element('<div class="torrent-img-list film-strip"></div>');
angular.forEach(imgs, function (i, idx) {
var item = angular.element(i);
var src = item.attr('src');
var nsrc = src.substr(0, src.lastIndexOf('/') + 1) + 'crop/' + src.substr(src.lastIndexOf('/') + 1);
angular.forEach(imgs, function (img, idx) {
var item = angular.element('<img>');
var nsrc = img.substr(0, img.lastIndexOf('/') + 1) + 'crop/' + img.substr(img.lastIndexOf('/') + 1);
item.attr('on-error-src', item.attr('src'));
item.attr('on-error-src', img);
item.attr('id', img);
item.attr('src', nsrc);
item.addClass('img-item');
item.on('click', function (evt) {
imgEleList.push(item);
});
angular.forEach(imgEleList, function (item, idx) {
item.bind('click', function (evt) {
if (attrs.imgClickEvent) {
scope.$eval(attrs.imgClickEvent, {event: {event: evt, imgs: imgs, index: idx}});
scope.$parent.$eval(attrs.imgClickEvent, {event: {event: evt, imgs: imgEleList, index: idx}});
}
});
imgList.append(item);
});
angular.element(container).append(imgList);
angular.element(container).css('display', 'block');
element.append(imgList);
$compile(imgList.contents())(scope);
//change overview height
var overviewDiv = targetNode.parentNode.querySelectorAll('.torrent-overview');
if (overviewDiv) {
angular.element(overviewDiv).css('max-height', '200px');
}
}
}
});

2
modules/torrents/client/controllers/torrent-info.client.controller.js
View File

@@ -1317,7 +1317,7 @@
* @returns {*}
*/
vm.getOverviewMarkedContent = function (c) {
return marked(c, {sanitize: false});
return marked(c, {sanitize: true});
};
/**

1
modules/torrents/client/controllers/uploads.client.controller.js
View File

@@ -733,6 +733,7 @@
reqId: $state.params.reqId || undefined,
resource_detail_info: detail_info,
screenshots_image: vm.resourceImagesList,
_uImage: uimg
});

3
modules/torrents/client/less/torrents.less
View File

@@ -111,7 +111,6 @@
}
.img-container {
display: none;
margin-top: 10px;
@media (min-width: @screen-md) {
margin-left: 60px;
@@ -149,7 +148,7 @@
}
.upload-image-list {
color: #666;
background-color: #f5f5f5;
background-color: #fafafa;
border-top: 1px dashed #ddd;
overflow-x: scroll;
.image-item {

7
modules/torrents/client/services/torrent-get-info.client.service.js
View File

@@ -307,13 +307,6 @@
if (item && item.resource_detail_info) {
result = item.resource_detail_info.overview || item.resource_detail_info.detail || null;
if (item.screenshots_image && item.screenshots_image.length > 0) {
angular.forEach(item.screenshots_image, function (si) {
var str = '<br/>![' + si + '](' + si + ')';
result += str;
});
}
}
return result;
}

38
modules/torrents/client/views/uploads-torrents.client.view.html
View File

@@ -312,8 +312,8 @@
<div class="row margin-bottom-40" ng-show="vm.showResourceScreenShots">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_SCREEN_SHOTS"></legend>
<div class="resourceScreenshots" id="resourceScreenshots" name="resourceScreenshots"
mt-images-uploader="resourceScreenshots" ng-model="vm.resourceImagesList"
<div class="resourceScreenshots" id="movieScreenshots" name="movieScreenshots"
mt-images-uploader="movieScreenshots" ng-model="vm.resourceImagesList"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-method="vm.uploadTorrentScreenshotsImage(ufile, progressback, callback, errback);"></div>
</div>
@@ -546,8 +546,8 @@
<div class="row margin-bottom-40" ng-show="vm.showResourceScreenShots">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_SCREEN_SHOTS"></legend>
<div class="resourceScreenshots" id="resourceScreenshots" name="resourceScreenshots"
mt-images-uploader="resourceScreenshots" ng-model="vm.resourceImagesList"
<div class="resourceScreenshots" id="tvScreenshots" name="tvScreenshots"
mt-images-uploader="tvScreenshots" ng-model="vm.resourceImagesList"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-method="vm.uploadTorrentScreenshotsImage(ufile, progressback, callback, errback);"></div>
</div>
@@ -666,15 +666,22 @@
<legend class="small-legend" translate="ENTER_MUSIC_DETAIL_INFO"></legend>
<div class="col-xs-12">
<textarea id="musicDetail" name="musicDetail" ng-model="vm.customTorrent.detail"
mt-markdown-editor="musicDetail"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-only-image="true"
upload-method="vm.uploadTorrentImage(editor, ufile, progressback, callback, errback);"></textarea>
mt-markdown-editor="musicDetail"></textarea>
</div>
</div>
</div>
<div class="row margin-bottom-40" ng-show="vm.customTorrent.detail">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_SCREEN_SHOTS"></legend>
<div class="resourceScreenshots" id="musicScreenshots" name="musicScreenshots"
mt-images-uploader="musicScreenshots" ng-model="vm.resourceImagesList"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-method="vm.uploadTorrentScreenshotsImage(ufile, progressback, callback, errback);"></div>
</div>
</div>
<div class="row margin-bottom-40" ng-show="vm.customTorrent.detail">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_TAGS"></legend>
@@ -784,15 +791,22 @@
<legend class="small-legend" translate="ENTER_RESOURCE_DETAIL_INFO"></legend>
<div class="col-xs-12">
<textarea id="defaultDetail" name="defaultDetail" ng-model="vm.customTorrent.detail"
mt-markdown-editor="defaultDetail"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-only-image="true"
upload-method="vm.uploadTorrentImage(editor, ufile, progressback, callback, errback);"></textarea>
mt-markdown-editor="defaultDetail"></textarea>
</div>
</div>
</div>
<div class="row margin-bottom-40" ng-show="vm.customTorrent.detail">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_SCREEN_SHOTS"></legend>
<div class="resourceScreenshots" id="defaultScreenshots" name="defaultScreenshots"
mt-images-uploader="defaultScreenshots" ng-model="vm.resourceImagesList"
upload-dir="/modules/torrents/client/uploads/temp/"
upload-method="vm.uploadTorrentScreenshotsImage(ufile, progressback, callback, errback);"></div>
</div>
</div>
<div class="row margin-bottom-40" ng-show="vm.customTorrent.detail">
<div class="col-md-12 col-sm-12 col-xs-12">
<legend class="small-legend" translate="SELECT_TAGS"></legend>

19
modules/torrents/client/views/view-torrent.client.view.html
View File

@@ -178,16 +178,12 @@
<div id="top_of_overview" ng-if="vm.TGI.getTorrentOverview(vm.torrentLocalInfo)">
<dt class="h-line">{{ 'TMDB_FIELDS.OVERVIEW' | translate}}：</dt>
<dd class="h-line">
<!--<div ng-if="vm.torrentLocalInfo.torrent_type=='movie' || vm.torrentLocalInfo.torrent_type=='tvserial'">-->
<!--{{vm.TGI.getTorrentOverview(vm.torrentLocalInfo)}}-->
<!--</div>-->
<div>
<div torrent-image-list="true"
img-container="img_container_{{vm.torrentLocalInfo._id}}"
img-click-event="vm.onImageClick(event)">
<div id="{{vm.torrentLocalInfo._id}}" class="torrent-long-overview" data-provide="markdown"
ng-bind-html="vm.getOverviewMarkedContent(vm.TGI.getTorrentOverview(vm.torrentLocalInfo))">
</div>
<div ng-if="vm.torrentLocalInfo.torrent_type=='movie' || vm.torrentLocalInfo.torrent_type=='tvserial'">
{{vm.TGI.getTorrentOverview(vm.torrentLocalInfo)}}
</div>
<div ng-if="vm.torrentLocalInfo.torrent_type!='movie' && vm.torrentLocalInfo.torrent_type!='tvserial'">
<div id="{{vm.torrentLocalInfo._id}}" class="torrent-long-overview" data-provide="markdown"
ng-bind-html="vm.getOverviewMarkedContent(vm.TGI.getTorrentOverview(vm.torrentLocalInfo))">
</div>
<button class="btn btn-xs btn-mt-o margin-top-15" mouse-enter-toggle-class="btn-mt-o-light"
@@ -219,7 +215,8 @@
</div>
</div>
<div id="img_container_{{vm.torrentLocalInfo._id}}" class="img-container">
<div torrent-image-list="true" id="img_container_{{vm.torrentLocalInfo._id}}" class="img-container"
img-click-event="vm.onImageClick(event)" imgs="vm.torrentLocalInfo.screenshots_image">
<legend class="xsmall-legend strong-legend" translate="TMDB_FIELDS.IMAGE_OVERVIEW"></legend>
</div>
</div>