update: modify UI styles

yohe88 · May 5, 2018 · 70049a6 · 70049a6
1 parent 3f237a3
commit 70049a6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/app/containers/ToolBar.js b/app/containers/ToolBar.js
@@ -11,7 +11,7 @@ const ToolBar = ({ onComeback, onSwitchSource, onSourceSelected, freeUrl, title
   return (
     <div style={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px' }}>
       <div type="rollback" style={{ fontSize: '18px', cursor: 'pointer' }} onClick={onComeback}>返回</div>
-      <span>{title}</span>
+      <span style={{ padding: '0 20px', color: 'darkcyan' }}>{title}</span>
       <div
         style={{ display: 'flex', alignItems: 'center' }}
       >

diff --git a/app/containers/Video.js b/app/containers/Video.js
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { webview } from 'electron';
+import { webview, ipcRenderer } from 'electron';
 
 import Channel from './Channel';
 import ToolBar from './ToolBar';
@@ -21,6 +21,7 @@ class VideoPlay extends PureComponent < Props > {
     url: 'https://v.qq.com',
     freeUrl: [],
     selectedUrl: 'http://vip.jlsprh.com/index.php?url=',
+    isFullScreen: false,
   }
   componentDidMount() {
     this.props.actions.getAllVideoSource();
@@ -39,6 +40,11 @@ class VideoPlay extends PureComponent < Props > {
         url: `${obj.url}`
       });
     });
+    ipcRenderer.on('enter-full-screen', (e, msg) => {
+      this.setState({
+        isFullScreen: msg
+      });
+    });
   }
   componentWillReceiveProps(nextProps) {
     const { source } = nextProps;
@@ -81,17 +87,18 @@ class VideoPlay extends PureComponent < Props > {
     });
   }
   render() {
-    const { channel, url, freeUrl, title } = this.state;
+    const { channel, url, freeUrl, title, isFullScreen } = this.state;
+    const isHiddenStyle = isFullScreen ? { display: 'none'} : { display: 'flex'};
     return (
       <div style={{ display: 'flex' }}>
-        <div style={{ width: '200px' }}>
+        <div style={{ minWidth: '150px', ...isHiddenStyle }}>
           <Channel
             channel={channel}
             handleSwitchChannel={this.handleSwitchChannel}
           />
         </div>
-        <div style={{ height: '100vh', width: 'calc(100vw - 200px)', display: 'flex', flexDirection: 'column' }}>
-          <div style={{ height: '60px' }}>
+        <div style={{ height: '100vh', width: isFullScreen ? '100vw' : 'calc(100vw - 150px)', display: 'flex', flexDirection: 'column' }}>
+          <div style={{ height: '60px', ...isHiddenStyle }}>
             <ToolBar
               onComeback={this.onComeback}
               onSourceSelected={this.onSourceSelected}
@@ -103,7 +110,7 @@ class VideoPlay extends PureComponent < Props > {
           <webview
             ref={ (webview) => {this.webview = webview} }
             title="腾讯视频"
-            style={{ height: 'calc(100vh - 60px)', width: '100%' }}
+            style={{ height: isFullScreen ? '100vh' : 'calc(100vh - 60px)', width: '100%' }}
             src={url}
             allowpopups="true"
           >

diff --git a/app/main.dev.js b/app/main.dev.js
@@ -10,7 +10,7 @@
  *
  * @flow
  */
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain} from 'electron';
 import MenuBuilder from './menu';
 
 let mainWindow = null;
@@ -81,6 +81,12 @@ app.on('ready', async () => {
     mainWindow = null;
   });
 
+  mainWindow.on('enter-full-screen', () => {
+    mainWindow.webContents.send('enter-full-screen', true);
+  })
+  mainWindow.on('leave-full-screen', () => {
+    mainWindow.webContents.send('enter-full-screen', false);
+  })
   const menuBuilder = new MenuBuilder(mainWindow);
   menuBuilder.buildMenu();
 });