Merge pull request #514 from Pat1enceLos/fixSubtitlePos

feat(thevideocontroller): lift progress bar when fullscreen
chiflix · Mar 8, 2019 · aefd331 · aefd331
2 parents 2553760 + 4889d0d
commit aefd331
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 27 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -329,7 +329,6 @@ function registerMainWindowEvent() {
           case NOT_SUPPORTED_SUBTITLE:
           case REQUEST_TIMEOUT:
           case UPLOAD_FAILED:
-          case UPLOAD_SUCCESS:
             mainWindow.webContents.send('addMessages', log.errcode);
             break;
           default:
@@ -339,6 +338,7 @@ function registerMainWindowEvent() {
         switch (log.code) {
           case ONLINE_LOADING:
           case SUBTITLE_UPLOAD:
+          case UPLOAD_SUCCESS:
             mainWindow.webContents.send('addMessages', log.code);
             break;
           default:

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -51,7 +51,7 @@
         switch (code) {
           case FILE_NON_EXIST:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.fileNonExist.title'),
               content: this.$t('errorFile.fileNonExist.content'),
               dismissAfter: 5000,
@@ -62,71 +62,71 @@
             break;
           case EMPTY_FOLDER:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.emptyFolder.title'),
               content: this.$t('errorFile.emptyFolder.content'),
               dismissAfter: 5000,
             });
             break;
           case OPEN_FAILED:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.default.title'),
               content: this.$t('errorFile.default.content'),
               dismissAfter: 5000,
             });
             break;
           case ONLINE_LOADING:
             this.$store.dispatch('addMessages', {
-              type: 'loading',
+              type: 'state',
               title: '',
               content: this.$t('loading.content'),
               dismissAfter: 2000,
             });
             break;
           case SUBTITLE_OFFLINE:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.offLine.title'),
               content: this.$t('errorFile.offLine.content'),
               dismissAfter: 5000,
             });
             break;
           case NOT_SUPPORTED_SUBTITLE:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.loadFailed.title'),
               content: this.$t('errorFile.loadFailed.content'),
               dismissAfter: 5000,
             });
             break;
           case REQUEST_TIMEOUT:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('errorFile.timeout.title'),
               content: this.$t('errorFile.timeout.content'),
               dismissAfter: 5000,
             });
             break;
           case SUBTITLE_UPLOAD:
             this.$store.dispatch('addMessages', {
-              type: 'loading',
+              type: 'state',
               title: '',
               content: this.$t('uploading.content'),
               dismissAfter: 2000,
             });
             break;
           case UPLOAD_SUCCESS:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('uploadingSuccess.title'),
               content: this.$t('uploadingSuccess.content'),
               dismissAfter: 5000,
             });
             break;
           case UPLOAD_FAILED:
             this.$store.dispatch('addMessages', {
-              type: 'error',
+              type: 'result',
               title: this.$t('uploadingFailed.title'),
               content: this.$t('uploadingFailed.content'),
               dismissAfter: 5000,

diff --git a/src/renderer/components/NotificationBubble.vue b/src/renderer/components/NotificationBubble.vue
@@ -17,13 +17,13 @@
       <div v-for="m in messages" :key="m.id"
         class="messageContainer"
         :id="'item' + m.id">
-        <div :class="m.type === 'error' ? 'black-gradient-error' : 'black-gradient-loading'"/>
-        <div :class="m.type === 'error' ? 'errorContainer' : `loadingContainer`">
+        <div :class="m.type === 'result' ? 'black-gradient-result' : 'black-gradient-state'"/>
+        <div :class="m.type === 'result' ? 'resultContainer' : `stateContainer`">
           <div class="bubbleContent">
-            <div class="title" v-if="m.type === 'error'">{{ m.title }}</div>
+            <div class="title" v-if="m.type === 'result'">{{ m.title }}</div>
             <div class="content">{{ m.content }}</div>
           </div>
-          <Icon v-if="m.type === 'error'" type="close" class="bubbleClose" @click.native.left="closeMessage(m.id, m.title)"></Icon>
+          <Icon v-if="m.type === 'result'" type="close" class="bubbleClose" @click.native.left="closeMessage(m.id, m.title)"></Icon>
         </div>
       </div>
     </transition-group>
@@ -237,7 +237,7 @@ export default {
   flex-direction: column;
   align-items: flex-end;
 }
-.loadingContainer {
+.stateContainer {
   display: flex;
   justify-content: flex-start;
   background-color: rgba(0, 0, 0, 0.1);
@@ -332,7 +332,7 @@ export default {
     margin-bottom: 18px;
   }
 }
-.black-gradient-error {
+.black-gradient-result {
   position: absolute;
   width: 100%;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.30);
@@ -357,7 +357,7 @@ export default {
     clip-path: inset(0 round 11px);
   }
 }
-.black-gradient-loading {
+.black-gradient-state {
   position: absolute;
   width: 100%;
   box-shadow: 0 0 2px 0 rgba(0,0,0,0.30);
@@ -383,7 +383,7 @@ export default {
   }
 }
 
-.errorContainer {
+.resultContainer {
   display: flex;
   background-color: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8px);

diff --git a/src/renderer/components/PlayingView/TheVideoController.vue b/src/renderer/components/PlayingView/TheVideoController.vue
@@ -32,7 +32,7 @@
       :attachedShown="attachedShown"
       :mousedownOnPlayButton="mousedownOnPlayButton"
       :showAllWidgets="showAllWidgets"/>
-    <div class="control-buttons" v-fade-in="showAllWidgets">
+    <div class="control-buttons" v-fade-in="showAllWidgets" :style="{ marginBottom: preFullScreen ? '10px' : '0' }">
       <playlist-control class="button playlist" v-fade-in="displayState['playlist-control']" v-bind.sync="widgetsStatus['playlist-control']"/>
       <subtitle-control class="button subtitle" v-fade-in="displayState['subtitle-control']"
       v-bind.sync="widgetsStatus['subtitle-control']" :lastDragging.sync="lastDragging"
@@ -41,8 +41,8 @@
       v-bind.sync="widgetsStatus['advance-control']" :lastDragging.sync="lastDragging"
       @conflict-resolve="conflictResolve"/>
     </div>
-    <the-time-codes ref="theTimeCodes" :showAllWidgets="showAllWidgets" />
-    <the-progress-bar ref="progressbar" :showAllWidgets="showAllWidgets" />
+    <the-time-codes ref="theTimeCodes" :showAllWidgets="showAllWidgets" :style="{ marginBottom: preFullScreen ? '10px' : '0' }"/>
+    <the-progress-bar ref="progressbar" :showAllWidgets="showAllWidgets" :style="{ marginBottom: preFullScreen ? '10px' : '0' }"/>
   </div>
 </template>
 <script>
@@ -113,6 +113,7 @@ export default {
       lastMousedownVolume: false,
       mousedownOnPlayButton: false,
       mousedownOnVolume: false,
+      preFullScreen: false,
     };
   },
   computed: {
@@ -123,7 +124,7 @@ export default {
       mousemovePosition: state => state.Input.mousemoveClientPosition,
       wheelTime: state => state.Input.wheelTimestamp,
     }),
-    ...mapGetters(['paused', 'duration', 'isFullScreen', 'leftMousedown', 'ratio', 'playingList', 'originSrc', 'isFocused', 'isMinimized']),
+    ...mapGetters(['paused', 'duration', 'isFullScreen', 'leftMousedown', 'ratio', 'playingList', 'originSrc', 'isFocused', 'isMinimized', 'isFullScreen', 'intrinsicWidth', 'intrinsicHeight']),
     onlyOneVideo() {
       return this.playingList.length === 1;
     },
@@ -214,6 +215,7 @@ export default {
     },
   },
   mounted() {
+    this.preFullScreen = this.isFullScreen;
     this.createTouchBar();
     this.UIElements = this.getAllUIComponents(this.$refs.controller);
     this.UIElements.forEach((value) => {
@@ -227,7 +229,24 @@ export default {
         hovering: false,
       };
     });
-
+    this.$bus.$on('to-fullscreen', () => {
+      if (process.platform === 'darwin' &&
+        this.intrinsicWidth / this.intrinsicHeight > window.screen.width / window.screen.height) {
+        this.preFullScreen = true;
+      }
+    });
+    this.$bus.$on('toggle-fullscreen', () => {
+      if (process.platform === 'darwin' &&
+        this.intrinsicWidth / this.intrinsicHeight > window.screen.width / window.screen.height) {
+        this.preFullScreen = !this.preFullScreen;
+      }
+    });
+    this.$bus.$on('off-fullscreen', () => {
+      if (process.platform === 'darwin' &&
+        this.intrinsicWidth / this.intrinsicHeight > window.screen.width / window.screen.height) {
+        this.preFullScreen = false;
+      }
+    });
     document.addEventListener('keydown', this.handleKeydown);
     document.addEventListener('keyup', this.handleKeyup);
     document.addEventListener('wheel', this.handleWheel);

diff --git a/src/renderer/components/Subtitle/SubtitleManager.vue b/src/renderer/components/Subtitle/SubtitleManager.vue
@@ -567,9 +567,9 @@ export default {
         transcriptQueue.add(parameter, true)
           .then((res) => {
             if (res) {
-              this.addLog('error', {
+              this.addLog('success', {
                 message: 'Upload successfully !',
-                errcode: 'UPLOAD_SUCCESS',
+                code: 'UPLOAD_SUCCESS',
               });
             } else {
               this.addLog('error', {

diff --git a/src/renderer/components/Titlebar.vue b/src/renderer/components/Titlebar.vue
@@ -28,7 +28,7 @@
         type="titleBarWinClose">
       </Icon>
     </div>
-    <div class="mac-icons" 
+    <div class="mac-icons"
       v-if="isDarwin"
       v-fade-in="showTitleBar"
       @mouseover="handleMouseOver"
@@ -156,11 +156,13 @@ export default {
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');
     },
     handleFullscreenExit() {
+      this.$bus.$emit('off-fullscreen');
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [false]);
     },
     // OS-specific methods
     handleMacFull() {
       if (this.itemType === this.itemTypeEnum.FULLSCREEN) {
+        this.$bus.$emit('to-fullscreen');
         this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [true]);
       } else if (this.isMaximized) {
         this.$electron.ipcRenderer.send('callMainWindowMethod', 'unmaximize');