Merge pull request #1320 from ipy/airshare

Airshare
chiflix · Jul 20, 2020 · 81e21d7 · 81e21d7
2 parents 4488546 + 9b1a8dc
commit 81e21d7
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 31 deletions.
diff --git a/src/main/index.js b/src/main/index.js
@@ -806,10 +806,13 @@ function createAirSharedWindow() {
     useContentSize: true,
     frame: false,
     titleBarStyle: 'none',
+    minWidth: 300,
+    maxWidth: 300,
+    minHeight: 350,
     width: 300,
-    height: 240,
+    height: 400,
     transparent: true,
-    resizable: false,
+    resizable: true,
     show: false,
     webPreferences: {
       webSecurity: false,
@@ -1844,13 +1847,11 @@ function createMainWindow(openDialog, playlistId) {
   }
   mainWindow.webContents.userAgent = `${mainWindow.webContents.userAgent.replace(/Electron\S+/i, '')} SPlayerX@2018 Platform/${os.platform()} Release/${os.release()} Version/${app.getVersion()} EnvironmentName/${environmentName}`;
   menuService.setMainWindow(mainWindow);
-  setTimeout(() => app.emit('airShared-menu-update'), 50);
 
   mainWindow.on('closed', () => {
     ipcMain.removeAllListeners(); // FIXME: decouple mainWindow and ipcMain
     mainWindow = null;
     menuService.setMainWindow(null);
-    app.emit('airShared-menu-update');
   });
 
   mainWindow.once('ready-to-show', () => {

diff --git a/src/main/menu/MenuService.ts b/src/main/menu/MenuService.ts
@@ -1,4 +1,4 @@
-import { ipcMain } from 'electron';
+import { app, ipcMain } from 'electron';
 import { IBrowsingHistoryMenuInfo } from '@/interfaces/IBrowsingHistory';
 import Menu from './Menu';
 import { IMenuDisplayInfo } from '../../renderer/interfaces/IRecentPlay';
@@ -15,6 +15,7 @@ export default class MenuService {
     this.menu.setMainWindow(window);
     if (window) this.registeMenuActions();
     else this.menu.closedMenu();
+    setTimeout(() => app.emit('airShared-menu-update'), 50);
   }
 
   public enableMenu(enable: boolean) {
@@ -44,6 +45,7 @@ export default class MenuService {
     });
     ipcMain.on('update-locale', () => {
       this.menu.updateLocale();
+      setTimeout(() => app.emit('airShared-menu-update'), 50);
     });
     ipcMain.on('update-browisng-history', (e: Event, items: IBrowsingHistoryMenuInfo[]) => {
       this.menu.updateBrowsingHistory(items);

diff --git a/src/renderer/components/AirShared.vue b/src/renderer/components/AirShared.vue
@@ -27,32 +27,43 @@
       class="win-title-button no-drag"
       type="titleBarWinClose"
     />
-    <div class="info">
-      <div>
-        <span class="label">{{ $t('msg.file.airShared.status') }}:</span>
-        <span>{{ info.enabled ? $t('msg.file.airShared.on') : $t('msg.file.airShared.off') }}</span>
+    <div class="main">
+      <div class="file">
+        <div class="title">
+          {{ $t('msg.file.airShared.title') }}:
+        </div>
+        {{ info.filePath }}
       </div>
-      <div>
-        <span class="label">{{ $t('msg.file.airShared.host') }}:</span>
-        <span>{{ info.host }}</span>
+      <div class="info">
+        <div>
+          <span class="label">{{ $t('msg.file.airShared.status') }}:</span>
+          <span>
+            {{ info.enabled ? $t('msg.file.airShared.on') : $t('msg.file.airShared.off') }}
+          </span>
+        </div>
+        <div>
+          <span class="label">{{ $t('msg.file.airShared.host') }}:</span>
+          <span>{{ info.host }}</span>
+        </div>
+        <div>
+          <span class="label">{{ $t('msg.file.airShared.token') }}:</span>
+          <span class="special">
+            {{ token }}
+          </span>
+        </div>
       </div>
-      <div>
-        <span class="label">{{ $t('msg.file.airShared.token') }}:</span>
-        <span class="special">
-          {{ info.code.slice(0, info.code.length - 5) }}
-          {{ info.code.slice(info.code.length - 5, info.code.length) }}
-        </span>
+      <div class="tip">
+        <p>{{ $t('msg.file.airShared.tip') }}</p>
+        <p>{{ $t('msg.file.airShared.tipWnB') }}</p>
       </div>
     </div>
-    <div class="tip">
-      {{ $t('msg.file.airShared.tip') }}
-    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { ipcRenderer, remote } from 'electron';
+import path from 'path';
 import qs from 'querystring';
 import Icon from '@/components/BaseIconContainer.vue';
 
@@ -75,6 +86,19 @@ export default Vue.extend({
     isDarwin() {
       return process.platform === 'darwin';
     },
+    token() {
+      if (!this.info.code) return '';
+      const code = this.info.code.toString();
+      const res = [];
+      for (let i = 0; i < code.length; i += 1) {
+        res.push(code[i]);
+        if ((i + 1) % 4 === 0 && i < code.length - 1) res.push(' ');
+      }
+      return res.join('');
+    },
+    fileName() {
+      return this.info.filePath ? path.basename(this.info.filePath) : '';
+    },
   },
   mounted() {
     document.title = 'Air Shared';
@@ -102,6 +126,7 @@ export default Vue.extend({
     border-radius: 4px;
     display: flex;
     flex-direction: column;
+    font-family: $font-medium;
     .mac-icons {
       position: absolute;
       top: 12px;
@@ -138,14 +163,14 @@ export default Vue.extend({
       }
     }
   }
-  .info {
+  .main {
     width: 80%;
-    margin: 50px auto 0;
+    margin: 40px auto 0;
+  }
+  .info {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.7);
-    opacity: 0.7;
     line-height: 1.75em;
-    font-weight: 700;
     &>div {
       display: flex;
     }
@@ -156,12 +181,25 @@ export default Vue.extend({
       color: white;
     }
   }
+  .file {
+    .title {
+      font-size: 16px;
+      margin-bottom: 5px;
+      color: rgba(255, 255, 255, 0.7);
+    }
+    word-break: break-all;
+    margin: 10px auto;
+    font-size: 12px;
+    color: rgba(255,255,255,0.25);
+    line-height: 1.5em;
+  }
   .tip {
-    width: 80%;
+    p {
+      margin: 10px auto;
+    }
     margin: 20px auto;
-    font-size: 11px;
+    font-size: 12px;
+    color: rgba(255,255,255,0.25);
     line-height: 1.5em;
-    color: white;
-    opacity: 0.7;
   }
 </style>
diff --git a/src/renderer/components/Bubbles/ResolvedBubble.vue b/src/renderer/components/Bubbles/ResolvedBubble.vue
@@ -152,6 +152,7 @@ export default {
     }
     .content {
       white-space: pre-line;
+      word-break: break-all;
       color: rgba(255, 255, 255, 0.5);
       font-size: 11px;
       line-height: 14px;

diff --git a/src/renderer/helpers/notificationControl.js b/src/renderer/helpers/notificationControl.js
@@ -453,7 +453,7 @@ export function addBubble(code, options = {}) { // eslint-disable-line complexit
         handler: () => {
           remote.app.emit('add-window-airshared');
         },
-        dismissAfter: 10000,
+        dismissAfter: 20000,
       });
       break;
     case AIRSHARED_STOP:

diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json
@@ -118,12 +118,14 @@
         "stop": "Stop Sharing",
         "sharing": "Air Shared and Streaming:",
         "stopped": "Air Sharing Stopped",
+        "title": "Now Streaming",
         "status": "Status",
         "on": "Running",
         "off": "Stopped",
         "host": "IP Address",
         "token": "Token",
-        "tip": "Open SPlayer on your Apple TV or iPad / iPhone within the same network and tap \"DISCOVERY\" to streaming your video with the best quality"
+        "tip": "Open SPlayer on your Apple TV or iPad / iPhone within the same network and tap \"DISCOVERY\" to streaming your video with the best quality",
+        "tipWnB": "Please make sure your device is connected to Wi-Fi and Bluetooth is turned on."
       }
     },
     "account": {