Merge branch 'develop' of https://github.com/chiflix/splayerx into fi…

…xSubtitlePos

src/main/index.js

@@ -18,6 +18,10 @@ import {
   NOT_SUPPORTED_SUBTITLE,
   REQUEST_TIMEOUT,
   SUBTITLE_OFFLINE,
+  ONLINE_LOADING,
+  SUBTITLE_UPLOAD,
+  UPLOAD_FAILED,
+  UPLOAD_SUCCESS,
 } from '../shared/notificationcodes';
 
 /**
@@ -323,13 +327,22 @@ function registerMainWindowEvent() {
           case SUBTITLE_OFFLINE:
           case NOT_SUPPORTED_SUBTITLE:
           case REQUEST_TIMEOUT:
+          case UPLOAD_FAILED:
+          case UPLOAD_SUCCESS:
             mainWindow.webContents.send('addMessages', log.errcode);
             break;
           default:
             break;
         }
       } else if (log.code) {
-        mainWindow.webContents.send('addMessages', log.code);
+        switch (log.code) {
+          case ONLINE_LOADING:
+          case SUBTITLE_UPLOAD:
+            mainWindow.webContents.send('addMessages', log.code);
+            break;
+          default:
+            break;
+        }
       }
     }
   });

src/renderer/App.vue

@@ -20,6 +20,9 @@
     NOT_SUPPORTED_SUBTITLE,
     REQUEST_TIMEOUT,
     SUBTITLE_OFFLINE,
+    SUBTITLE_UPLOAD,
+    UPLOAD_SUCCESS,
+    UPLOAD_FAILED,
   } from '../shared/notificationcodes';
   import UpdaterProgressIndicator from './components/UpdaterView/UpdaterProgressIndicator.vue';
   import UpdaterNotification from './components/UpdaterView/UpdaterNotification.vue';
@@ -44,7 +47,7 @@
       },
     },
     mounted() {
-      this.$electron.ipcRenderer.on('addMessages', (event, code) => {
+      this.$electron.ipcRenderer.on('addMessages', (event, code) => { // eslint-disable-line complexity
         switch (code) {
           case FILE_NON_EXIST:
             this.$store.dispatch('addMessages', {
@@ -76,7 +79,7 @@
           case ONLINE_LOADING:
             this.$store.dispatch('addMessages', {
               type: 'loading',
-              title: this.$t('loading.title'),
+              title: 'Loading',
               content: this.$t('loading.content'),
             });
             break;
@@ -104,6 +107,30 @@
               dismissAfter: 5000,
             });
             break;
+          case SUBTITLE_UPLOAD:
+            this.$store.dispatch('addMessages', {
+              type: 'loading',
+              title: 'Uploading',
+              content: this.$t('uploading.content'),
+              dismissAfter: 3000,
+            });
+            break;
+          case UPLOAD_SUCCESS:
+            this.$store.dispatch('addMessages', {
+              type: 'error',
+              title: this.$t('uploadingSuccess.title'),
+              content: this.$t('uploadingSuccess.content'),
+              dismissAfter: 5000,
+            });
+            break;
+          case UPLOAD_FAILED:
+            this.$store.dispatch('addMessages', {
+              type: 'error',
+              title: this.$t('uploadingFailed.title'),
+              content: this.$t('uploadingFailed.content'),
+              dismissAfter: 5000,
+            });
+            break;
           default:
             break;
         }

src/renderer/components/NotificationBubble.vue

@@ -20,7 +20,7 @@
         :id="'item' + m.id">
         <div :class="m.type === 'error' ? 'black-gradient-error' : 'black-gradient-loading'"/>
         <div
-        :class="m.type === 'error' ? 'errorContainer' : 'loadingContainer'">
+        :class="m.type === 'error' ? 'errorContainer' : `loadingContainer ${m.title}`">
           <div class="bubbleContent">
             <div class="title" v-if="m.type === 'error'">{{ m.title }}</div>
             <div class="content">{{ m.content }}</div>
@@ -238,6 +238,34 @@ export default {
   flex-direction: column;
   align-items: flex-end;
 }
+.Uploading {
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 180px) and (max-width: 288px), screen and (min-aspect-ratio: 1/1) and (min-height: 180px) and (max-height: 288px) {
+    width: 140px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 289px) and (max-width: 480px), screen and (min-aspect-ratio: 1/1) and (min-height: 289px) and (max-height: 480px) {
+    width: 160px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 481px) and (max-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 481px) and (max-height: 1080px) {
+    width: 200px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
+    width: 280px;
+  }
+}
+.Loading {
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 180px) and (max-width: 288px), screen and (min-aspect-ratio: 1/1) and (min-height: 180px) and (max-height: 288px) {
+    width: 166px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 289px) and (max-width: 480px), screen and (min-aspect-ratio: 1/1) and (min-height: 289px) and (max-height: 480px) {
+    width: 178px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 481px) and (max-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 481px) and (max-height: 1080px) {
+    width: 218px;
+  }
+  @media screen and (max-aspect-ratio: 1/1) and (min-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
+    width: 306px;
+  }
+}
 .loadingContainer {
   position: relative;
   display: flex;
@@ -247,31 +275,27 @@ export default {
   z-index: 8;
   border: 1px solid rgba(255, 255, 255, 0.1);
   @media screen and (max-aspect-ratio: 1/1) and (min-width: 180px) and (max-width: 288px), screen and (min-aspect-ratio: 1/1) and (min-height: 180px) and (max-height: 288px) {
-    width: 166px;
     height: 32px;
     margin-left: 50px;
     margin-bottom: 8px;
     border-radius: 6px;
     clip-path: inset(0 round 6px);
   }
   @media screen and (max-aspect-ratio: 1/1) and (min-width: 289px) and (max-width: 480px), screen and (min-aspect-ratio: 1/1) and (min-height: 289px) and (max-height: 480px) {
-    width: 178px;
     height: 36px;
     margin-left: 62px;
     margin-bottom: 12px;
     border-radius: 7px;
     clip-path: inset(0 round 7px);
   }
   @media screen and (max-aspect-ratio: 1/1) and (min-width: 481px) and (max-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 481px) and (max-height: 1080px) {
-    width: 218px;
     height: 43px;
     margin-left: 70px;
     margin-bottom: 15px;
     border-radius: 8px;
     clip-path: inset(0 round 8px);
   }
   @media screen and (max-aspect-ratio: 1/1) and (min-width: 1080px), screen and (min-aspect-ratio: 1/1) and (min-height: 1080px) {
-    width: 306px;
     height: 60px;
     margin-left: 97px;
     margin-bottom: 18px;

src/renderer/components/PlayingView/SubtitleControl.vue

@@ -481,7 +481,7 @@ export default {
     this.$bus.$on('refresh-finished', (timeout) => {
       clearInterval(this.timer);
       this.count = this.rotateTime * 100;
-      this.$store.dispatch('removeMessagesByType');
+      this.$store.dispatch('removeMessagesByType', 'Loading');
       if (timeout) {
         setTimeout(() => {
           this.addLog('error', {

src/renderer/components/Subtitle/SubtitleManager.vue

@@ -14,7 +14,6 @@ import { mapGetters, mapActions, mapState } from 'vuex';
 import romanize from 'romanize';
 import { flatten, isEqual, sortBy, differenceWith, isFunction, partial, pick, values, keyBy, mergeWith, castArray } from 'lodash';
 import { codeToLanguageName } from '@/helpers/language';
-import Sagi from '@/helpers/sagi';
 import {
   searchForLocalList, fetchOnlineList, retrieveEmbeddedList,
   storeLanguagePreference,
@@ -493,6 +492,7 @@ export default {
         mediaIdentity: this.mediaHash,
         totalTime: this.duration,
         delay: this.subtitleDelay,
+        src: id,
       };
       const instance = this.subtitleInstances[id];
       if (instance) {
@@ -514,7 +514,7 @@ export default {
           case 'embedded':
           case 'local':
             result.format = format;
-            result.payload = Buffer.from(data);
+            if (data) result.payload = Buffer.from(data);
             break;
         }
       }
@@ -536,29 +536,42 @@ export default {
     });
     this.$bus.$on('change-subtitle', this.changeCurrentSubtitle);
     this.$bus.$on('off-subtitle', this.offCurrentSubtitle);
+    this.$bus.$on('upload-current-subtitle', () => {
+      this.addLog('info', {
+        message: 'Upload current subtitle .',
+        code: 'SUBTITLE_UPLOAD',
+      });
+      const qualifiedSubtitle = {
+        id: this.currentSubtitleId,
+        duration: this.$store.state.Subtitle.durations[this.currentSubtitleId],
+      };
+      if (qualifiedSubtitle) {
+        const parameter = this.makeSubtitleUploadParameter(qualifiedSubtitle);
+        transcriptQueue.add(parameter, true)
+          .then((res) => {
+            this.$store.dispatch('removeMessagesByType', 'Uploading');
+            setTimeout(() => {
+              if (res) {
+                this.addLog('error', {
+                  message: 'Upload successfully !',
+                  errcode: 'UPLOAD_SUCCESS',
+                });
+              } else {
+                this.addLog('error', {
+                  message: 'Upload failed !',
+                  errcode: 'UPLOAD_FAILED',
+                });
+              }
+            }, 200);
+            console.log(`Uploading subtitle No.${this.currentSubtitleId} ${res ? 'succeeded' : 'failed'}!`);
+          });
+      }
+    });
 
     // when set immediate on watcher, it may run before the created hook
     this.resetSubtitles();
     this.$bus.$emit('subtitle-refresh-from-src-change');
     this.updateNoSubtitle(true);
-
-    function pushCurrentSubtitle() {
-      if (this.currentSubtitleId) {
-        const currentSubtitleInfo = {
-          ...this.subtitleList
-            .find(({ id }) => id === this.currentSubtitleId),
-          duration: this.$store.state.Subtitle.durations[this.currentSubtitleId],
-        };
-        const subtitleInfo = this.makeSubtitleUploadParameter(currentSubtitleInfo);
-        console.log('Subtitle info retrieved,', subtitleInfo, 'ready to upload.');
-        Sagi.pushTranscript(subtitleInfo)
-          .then(() => console.log('Horay! Subtitle uploaded.'))
-          .catch(err => console.error('Opps, subtitle upload failed.', err));
-      } else {
-        console.error('Current subtitle not found. Do this again when you choose a subtitle.');
-      }
-    }
-    window.pushCurrentSubtitle = pushCurrentSubtitle.bind(this);
   },
 };
 </script>

src/renderer/helpers/subtitle/push.js

@@ -25,21 +25,23 @@ export class TranscriptQueue {
   }
 
   subtitleState = {};
-  async add(subtitle) {
+  async add(subtitle, isManual) {
     if (checkProperty(subtitle)) {
       const id = `${subtitle.src}-${subtitle.mediaIdentity}`;
       const options = { priority: 0 };
-      switch (this.subtitleState[id]) {
-        default:
-          this.subtitleState[id] = 'loading';
-          break;
-        case 'failed':
-          this.subtitleState[id] = 'loading';
-          options.priority = 1;
-          break;
-        case 'loading':
-        case 'successful':
-          return false;
+      if (!isManual) {
+        switch (this.subtitleState[id]) {
+          default:
+            this.subtitleState[id] = 'loading';
+            break;
+          case 'failed':
+            this.subtitleState[id] = 'loading';
+            options.priority = 1;
+            break;
+          case 'loading':
+          case 'successful':
+            return false;
+        }
       }
       return this.queue.add(() => Sagi.pushTranscript(subtitle), options)
         .then(() => {

src/renderer/locales/lang/en.js

@@ -59,8 +59,7 @@ export default {
       size2: 'Standard',
       size3: 'Large',
       size4: 'Extra Large',
-      // increaseSubtitleSize: 'Increase Subtitle Size',
-      // decreaseSubtitleSize: 'Decrease Subtitle Size',
+      uploadSelectedSubtitle: 'Upload Selected Subtitle',
       increaseSubtitleDelayS: 'Subtitle Delay +0.1s',
       decreaseSubtitleDelayS: 'Subtitle Delay -0.1s',
       // increaseSubtitleDelayL: 'Subtitle Delay +0.5s',
@@ -164,6 +163,18 @@ export default {
     title: '',
     content: 'Loading Translations ...',
   },
+  uploading: {
+    title: '',
+    content: 'Subtitle Uploading ...',
+  },
+  uploadingSuccess: {
+    title: 'Upload Successfully',
+    content: 'Subtitle has been uploaded.',
+  },
+  uploadingFailed: {
+    title: 'Upload Failed',
+    content: 'Please try later.',
+  },
   privacyBubble: {
     masVersion: {
       content: 'Smart Translation function needs your consent for uploading anonymous media info to the server  side, and you will not receive translation results if you disagree. There is no privacy information will be collected.',

src/renderer/locales/lang/ja.js

@@ -61,6 +61,7 @@ export default {
       size4: '最大',
       // increaseSubtitleSize: '增大字幕尺寸',
       // decreaseSubtitleSize: '减小字母尺寸',
+      uploadSelectedSubtitle: '字幕をアップロード',
       increaseSubtitleDelayS: '字幕ディレイ +0.1s',
       decreaseSubtitleDelayS: '字幕ディレイ -0.1s',
       increaseSubtitleDelayL: '字幕ディレイ +0.5s',
@@ -164,6 +165,18 @@ export default {
     title: '',
     content: '翻訳の読み込み ...',
   },
+  uploading: {
+    title: '',
+    content: 'アップロードしています...',
+  },
+  uploadingSuccess: {
+    title: 'アップロードに成功しました',
+    content: '字幕がアップロードされました。',
+  },
+  uploadingFailed: {
+    title: 'アップロードに失敗しました',
+    content: '後でお試しください。',
+  },
   privacyBubble: {
     masVersion: {
       content: 'Smart Translationを使用するには無記名メディア情報をアップロードし、それ以外の場合は翻訳できません。個人情報を収集することはありません。',

src/renderer/locales/lang/zhCN.js

@@ -59,8 +59,7 @@ export default {
       size2: '标准',
       size3: '大',
       size4: '超大',
-      // increaseSubtitleSize: '增大字幕尺寸',
-      // decreaseSubtitleSize: '减小字母尺寸',
+      uploadSelectedSubtitle: '上传所选字幕',
       increaseSubtitleDelayS: '字幕延时 +0.1s',
       decreaseSubtitleDelayS: '字幕延时 -0.1s',
       // increaseSubtitleDelayL: '字幕延时 +0.5s',
@@ -164,6 +163,18 @@ export default {
     title: '',
     content: '正在智能匹配翻译结果 ...',
   },
+  uploading: {
+    title: '',
+    content: '字幕正在上传中 ...',
+  },
+  uploadingSuccess: {
+    title: '上传成功',
+    content: '字幕已成功上传。',
+  },
+  uploadingFailed: {
+    title: '上传失败',
+    content: '请稍后重试。',
+  },
   privacyBubble: {
     masVersion: {
       content: '智能翻译功能需要您同意通过匿名方式上传媒体信息至服务端，否则将无法使用该功能获取翻译结果，我们不会收集关于您个人的隐私信息。',