Merge pull request #881 from YuRiJinX/touchbar

feat: Touchbar

src/renderer/components/BrowsingView.vue

@@ -114,6 +114,11 @@ export default {
       acceleratorAvailable: true,
       oldDisplayId: 0,
       backToLandingView: false,
+      sidebarButton: null,
+      backwardButton: null,
+      forwardButton: null,
+      refreshButton: null,
+      pipButton: null,
     };
   },
   computed: {
@@ -170,6 +175,7 @@ export default {
       }
     },
     isPip(val: boolean) {
+      if (this.pipButton) this.pipButton.icon = this.createIcon(`touchBar/${val ? 'pop' : 'pip'}.png`);
       this.menuService.updateMenuItemLabel(
         'browsing.window.pip',
         this.isPip ? 'msg.window.exitPip' : 'msg.window.enterPip',
@@ -224,6 +230,7 @@ export default {
       if (val) {
         this.hasVideo = false;
         this.menuService.updateMenuItemEnabled('browsing.window.pip', false);
+        this.createTouchBar(false);
         this.$refs.browsingHeader.updateWebInfo({
           hasVideo: this.hasVideo,
           url: loadUrl,
@@ -238,6 +245,7 @@ export default {
         this.$refs.webView.executeJavaScript(this.calculateVideoNum, (r: number) => {
           this.hasVideo = recordIndex === 0 && !getVideoId(loadUrl).id ? false : !!r;
           this.menuService.updateMenuItemEnabled('browsing.window.pip', this.hasVideo);
+          this.createTouchBar(this.hasVideo);
           this.$refs.browsingHeader.updateWebInfo({
             hasVideo: this.hasVideo,
             url: loadUrl,
@@ -458,6 +466,53 @@ export default {
       updateBarrageOpen: browsingActions.UPDATE_BARRAGE_OPEN,
       updateIsPip: browsingActions.UPDATE_IS_PIP,
     }),
+    createTouchBar(enablePip: boolean) {
+      const { TouchBar } = this.$electron.remote;
+      const {
+        TouchBarLabel, TouchBarButton,
+        TouchBarSpacer,
+      } = TouchBar;
+
+      this.sidebarButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/sidebar.png'),
+        click: () => {},
+      });
+      this.backwardButton = new TouchBarButton({
+        icon: this.createIcon(`touchBar/${this.$refs.webView.canGoBack() ? 'backward' : 'backward-disabled'}.png`),
+        click: () => {
+          this.$bus.$emit('toggle-back');
+        },
+      });
+      this.forwardButton = new TouchBarButton({
+        icon: this.createIcon(`touchBar/${this.$refs.webView.canGoForward() ? 'forward' : 'forward-disabled'}.png`),
+        click: () => {
+          this.$bus.$emit('toggle-forward');
+        },
+      });
+      this.refreshButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/refresh.png'),
+        click: () => {
+          this.$bus.$emit('toggle-reload');
+        },
+      });
+      this.pipButton = enablePip ? new TouchBarButton({
+        icon: this.createIcon('touchBar/pip.png'),
+        click: () => {
+          this.$bus.$emit('toggle-pip');
+        },
+      }) : null;
+      const touchbarItems = [
+        this.sidebarButton,
+        new TouchBarSpacer({ size: 'large' }),
+        this.backwardButton,
+        this.forwardButton,
+        this.refreshButton,
+        new TouchBarSpacer({ size: 'large' }),
+      ];
+      if (enablePip) touchbarItems.push(this.pipButton);
+      this.touchBar = new TouchBar({ items: touchbarItems });
+      this.$electron.remote.getCurrentWindow().setTouchBar(this.touchBar);
+    },
     handleOpenUrl({ url }: { url: string }) {
       if (!url || url === 'about:blank') return;
       if (this.isPip) {

src/renderer/containers/LandingView.vue

@@ -297,6 +297,7 @@ export default {
   },
   /* eslint-disable @typescript-eslint/no-explicit-any */
   created() {
+    this.createTouchBar();
     window.addEventListener('mousemove', this.globalMoveHandler);
     // Get all data and show
     if (!this.incognitoMode) {
@@ -372,6 +373,34 @@ export default {
     ...mapActions({
       updateInitialUrl: browsingActions.UPDATE_INITIAL_URL,
     }),
+    createTouchBar() {
+      const { TouchBar } = this.$electron.remote;
+      const {
+        TouchBarLabel, TouchBarButton,
+        TouchBarSpacer,
+      } = TouchBar;
+
+      this.sidebarButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/sidebar.png'),
+        click: () => {
+          this.$event.emit('side-bar-mouseup');
+        },
+      });
+      this.openFileButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/addVideo.png'),
+        click: () => {
+          this.open();
+        },
+      });
+      this.touchBar = new TouchBar({
+        items: [
+          this.sidebarButton,
+          new TouchBarSpacer({ size: 'large' }),
+          this.openFileButton,
+        ],
+      });
+      this.$electron.remote.getCurrentWindow().setTouchBar(this.touchBar);
+    },
     move(steps: number) {
       return steps * (this.thumbnailWidth + this.marginRight);
     },

src/renderer/containers/TheVideoController.vue

@@ -507,13 +507,6 @@ export default {
       updateHideModalCallback: atActions.AUDIO_TRANSLATE_MODAL_HIDE_CALLBACK,
       updateHideBubbleCallback: atActions.AUDIO_TRANSLATE_BUBBLE_CANCEL_CALLBACK,
     }),
-    createIcon(iconPath: string) {
-      const { nativeImage } = this.$electron.remote;
-      // @ts-ignore
-      return nativeImage.createFromPath(path.join(__static, iconPath)).resize({
-        width: 20,
-      });
-    },
     createTouchBar() {
       const { TouchBar } = this.$electron.remote;
       const {
@@ -523,12 +516,30 @@ export default {
 
       this.timeLabel = new TouchBarLabel();
 
+      this.previousButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/lastVideo.png'),
+        click: () => {
+          this.$bus.$emit('previous-video');
+        },
+      });
+      this.restartButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/restart.png'),
+        click: () => {
+          this.$bus.$emit('seek', 0);
+        },
+      });
       this.playButton = new TouchBarButton({
         icon: this.createIcon('touchBar/pause.png'),
         click: () => {
           this.$bus.$emit('toggle-playback');
         },
       });
+      this.nextButton = new TouchBarButton({
+        icon: this.createIcon('touchBar/nextVideo.png'),
+        click: () => {
+          this.$bus.$emit('next-video');
+        },
+      });
       this.fullScreenBar = new TouchBarButton({
         icon: this.createIcon('touchBar/fullscreen.png'),
         click: () => {
@@ -538,7 +549,11 @@ export default {
       this.touchBar = new TouchBar({
         items: [
           this.fullScreenBar,
+          new TouchBarSpacer({ size: 'large' }),
+          this.previousButton,
           this.playButton,
+          this.nextButton,
+          this.restartButton,
           new TouchBarSpacer({ size: 'large' }),
           this.timeLabel,
           new TouchBarSpacer({ size: 'large' }),

src/renderer/helpers/index.js

@@ -541,6 +541,12 @@ export default {
       }
       return false;
     },
+    createIcon(iconPath) {
+      const { nativeImage } = this.$electron.remote;
+      return nativeImage.createFromPath(path.join(__static, iconPath)).resize({
+        width: 25,
+      });
+    },
     openFileByPlayingView(url) {
       const protocol = urlParseLax(url).protocol;
       return !['https:', 'http:'].includes(protocol) || document.createElement('video').canPlayType(`video/${url.slice(url.lastIndexOf('.') + 1, url.length)}`);