From 599c7ea6dc9a231fa9d71d0ecd250a11785182a3 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Sun, 20 May 2018 11:01:49 +0800
Subject: [PATCH] feat(torrents): view original media info

---
 modules/core/client/app/trans-string-en.js    |  6 ++--
 modules/core/client/app/trans-string-zh.js    |  2 ++
 modules/core/client/less/btn-size.less        | 10 +++++++
 modules/torrents/client/less/torrents.less    |  8 +++--
 .../views/view-torrent.client.view.html       | 30 ++++++++++++-------
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/modules/core/client/app/trans-string-en.js b/modules/core/client/app/trans-string-en.js
index 2959ecff..691cb46e 100644
--- a/modules/core/client/app/trans-string-en.js
+++ b/modules/core/client/app/trans-string-en.js
@@ -382,8 +382,10 @@
     TORRENT_RATING_SUCCESSFULLY: 'Rating torrent successfully',
     TORRENT_RATING_FAILED: 'Rating torrent failed',
     EDIT_THIS_OVERVIEW: 'Edit this overview',
-    EDIT_THIS_MEDIA_INFO: 'Edit this media info',
-    SAVE_THIS_MEDIA_INFO: 'Save this media info',
+    VIEW_ORIGINAL_MEDIA_INFO: 'View original media info',
+    VIEW_FORMATTED_MEDIA_INFO: 'View formatted media info',
+    EDIT_THIS_MEDIA_INFO: 'Edit media info',
+    SAVE_THIS_MEDIA_INFO: 'Save media info',
     EDIT_TORRENT_NFO_SUCCESSFULLY: 'Torrent media info edited successfully',
     EDIT_TORRENT_NFO_FAILED: 'Torrent media info edited failed',
     IMG_PAGE_INFO: 'Current: {{index}} / {{total}}',
diff --git a/modules/core/client/app/trans-string-zh.js b/modules/core/client/app/trans-string-zh.js
index e24215c8..b0857bff 100644
--- a/modules/core/client/app/trans-string-zh.js
+++ b/modules/core/client/app/trans-string-zh.js
@@ -382,6 +382,8 @@
     TORRENT_RATING_SUCCESSFULLY: '为种子投票成功',
     TORRENT_RATING_FAILED: '为种子投票失败',
     EDIT_THIS_OVERVIEW: '编辑详情介绍',
+    VIEW_ORIGINAL_MEDIA_INFO: '查看原始的媒体信息',
+    VIEW_FORMATTED_MEDIA_INFO: '查看格式化的媒体信息',
     EDIT_THIS_MEDIA_INFO: '编辑媒体信息',
     SAVE_THIS_MEDIA_INFO: '保存媒体信息',
     EDIT_TORRENT_NFO_SUCCESSFULLY: '种子媒体信息编辑成功',
diff --git a/modules/core/client/less/btn-size.less b/modules/core/client/less/btn-size.less
index 1226af3f..d495eef3 100644
--- a/modules/core/client/less/btn-size.less
+++ b/modules/core/client/less/btn-size.less
@@ -174,9 +174,19 @@
     }
 }
 
+.btn-mt-o-default-dark {
+    color: #666;
+    border: solid 1px #666;
+    &:focus {
+        color: #666;
+        border-color: #666;
+    }
+}
+
 .btn-mt-o-success {
     color: @state-success-text;
     border: solid 1px @state-success-text;
+    &:hover,
     &:focus {
         color: @state-success-text;
         border-color: @state-success-text;
diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less
index 35132bc8..76b82e9e 100644
--- a/modules/torrents/client/less/torrents.less
+++ b/modules/torrents/client/less/torrents.less
@@ -232,15 +232,16 @@ pre.prettyprint {
     }
     .info-value {
         color: #7a7a7a;
-        font-size: 14px;
+        font-size: 12px;
     }
     .flag-group {
-        font-family: monospace, 'Courier New';
         padding: 4px 5px 2px 5px;
         border: solid 1px #ccc;
+        border-radius: 3px;
         display: inline-block;
         margin-bottom: 3px;
         margin-right: 5px;
+        background-color: #fff;
         .flag-icon {
             font-size: 18px;
             margin-right: 5px;
@@ -252,11 +253,14 @@ pre.prettyprint {
     margin-bottom: 10px;
     dt {
         color: #6A6A6A;
+        line-height: 1.6;
         @media (min-width: @screen-sm-min) {
             width: 120px;
         }
     }
     dd {
+        font-family: monospace, 'Courier New';
+        line-height: 1.6;
         @media (min-width: @screen-sm-min) {
             margin-left: 140px;
         }
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 50362096..7134c972 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -675,10 +675,22 @@
                 </dd>
 
                 <dt class="h-line margin-top-20">{{ 'VIDEO_NFO' | translate}}：</dt>
-                <dd ng-if="vm.torrentLocalInfo.torrent_nfo.length>0">
+                <dd class="margin-top-10">
                     <div class="row" ng-if="!vm.mediaInfoEditMode">
                         <div class="col-md-10">
-                            <div class="media-info-formated">
+                            <div>
+                                <button class="btn btn-xs margin-top-15" mouse-enter-toggle-class="btn-mt-o-success"
+                                        base-class="btn-mt-o-default-dark" ng-click="vm.mediaInfoViewMode=!vm.mediaInfoViewMode">
+                                    {{vm.mediaInfoViewMode ? ('VIEW_FORMATTED_MEDIA_INFO' | translate) : ('VIEW_ORIGINAL_MEDIA_INFO' | translate)}}
+                                </button>
+                                <button class="btn btn-xs margin-top-15" mouse-enter-toggle-class="btn-mt-o-success"
+                                        base-class="btn-mt-o-default-dark"
+                                        ng-if="vm.isOwner(vm.torrentLocalInfo) || vm.user.isOper"
+                                        ng-click="vm.doEditMediaInfo()">
+                                    {{'EDIT_THIS_MEDIA_INFO' | translate}}
+                                </button>
+                            </div>
+                            <div class="media-info-formated" ng-if="!vm.mediaInfoViewMode">
                                 <legend ng-repeat-start="(key, value)  in vm.torrentLocalInfo.torrent_media_info track by $index">
                                     {{'MEDIAINFO.'+key.toUpperCase()+'.SELF' | translate}}
                                 </legend>
@@ -716,13 +728,9 @@
                                     </dl>
                                 </div>
                             </div>
-                            <div>
-                                <button class="btn btn-xs btn-mt-o margin-top-15" mouse-enter-toggle-class="btn-success"
-                                        base-class="btn-mt-o-success"
-                                        ng-if="vm.isOwner(vm.torrentLocalInfo) || vm.user.isOper"
-                                        ng-click="vm.doEditMediaInfo()">
-                                    {{'EDIT_THIS_MEDIA_INFO' | translate}}
-                                </button>
+                            <div ng-if="vm.mediaInfoViewMode">
+                                <textarea class="form-control video-nfo margin-top-10" rows="15" ng-model="vm.torrentLocalInfo.torrent_nfo"
+                                      readonly></textarea>
                             </div>
                         </div>
                     </div>
@@ -730,8 +738,8 @@
                         <div class="col-md-10">
                             <textarea class="form-control video-nfo margin-top-10" rows="15" ng-model="vm.torrentLocalInfo.torrent_nfo"></textarea>
                             <div>
-                                <button class="btn btn-xs btn-mt-o margin-top-15" mouse-enter-toggle-class="btn-success"
-                                        base-class="btn-mt-o-success"
+                                <button class="btn btn-xs margin-top-15" mouse-enter-toggle-class="btn-mt-o-success"
+                                        base-class="btn-mt-o-default-dark"
                                         ng-if="vm.isOwner(vm.torrentLocalInfo) || vm.user.isOper"
                                         ng-click="vm.updateTorrentNfo()">
                                     {{'SAVE_THIS_MEDIA_INFO' | translate}}