视频预览组件完成

tywei90 · Nov 28, 2017 · 6bb7b09 · 6bb7b09
1 parent 33b92a6
commit 6bb7b09
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 2 deletions.
diff --git a/src/components/content.js b/src/components/content.js
@@ -17,6 +17,7 @@ import UnitImage from './units/image/index'
 import UnitButton from './units/button/index'
 import UnitTextBody from './units/textbody/index'
 import UnitAudio from './units/audio/index'
+import UnitVideo from './units/video/index'
 import UnitCode from './units/code/index'
 
 import Preview from './preview.js'
@@ -39,6 +40,8 @@ const renderUnits = units => {
                 return <li key={index} id={index}><UnitTextBody id={index} data={item} /></li>
             case 'AUDIO' :
                 return <li key={index} id={index}><UnitAudio id={index} data={item} /></li>
+            case 'VIDEO' :
+                return <li key={index} id={index}><UnitVideo id={index} data={item} /></li>
             case 'CODE' :
                 return <li key={index} id={index}><UnitCode id={index} data={item} /></li>
         }

diff --git a/src/components/mixin.scss b/src/components/mixin.scss
@@ -76,7 +76,7 @@
                         width: 80%;
                         height: 34px;
                         box-sizing: border-box;
-                        padding: 6px 12px;
+                        padding: 6px 25px 6px 12px;
                         font-size: 14px;
                         line-height: 1.42857143;
                         color: #555;

diff --git a/src/components/preview.js b/src/components/preview.js
@@ -11,6 +11,7 @@ import PreImg from './previewUnits/preImg';
 import PreTextBody from './previewUnits/preTextBody';
 import PreButton from './previewUnits/preButton';
 import PreAudio from './previewUnits/preAudio';
+import PreVideo from './previewUnits/preVideo';
 import PreCode from './previewUnits/preCode';
 
 import $ from 'jquery'
@@ -48,6 +49,11 @@ const renderUnits = units => {
 					<PreAudio key={index} id={index} data={item} />
 				)
 			break;
+			case 'VIDEO' :
+				return (
+					<PreVideo key={index} id={index} data={item} />
+				)
+			break;
 			case 'CODE' :
 				return (
 					<PreCode key={index} id={index} data={item} />

diff --git a/src/components/previewUnits/preVideo.js b/src/components/previewUnits/preVideo.js
@@ -0,0 +1,47 @@
+import React, { PropTypes } from 'react';
+import autoBind from 'autobind-decorator';
+import pureRender from 'pure-render-decorator';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import immutable from 'immutable';
+
+@pureRender
+class PreVideo extends React.Component {
+	static propTypes = {
+        data: ImmutablePropTypes.map,
+        id: PropTypes.number
+    };
+	constructor(props){
+		super(props);
+	}
+	render() {
+		var video;
+		var style = {};
+		const { data } = this.props;
+		let jsdata = data.toJS();
+		style = {
+			paddingTop: jsdata.padding[0],
+			paddingRight: jsdata.padding[1],
+			paddingBottom: jsdata.padding[2],
+			paddingLeft: jsdata.padding[3]
+		};
+		video = (function(){
+			if(jsdata.auto && jsdata.loop){
+				return <video src={jsdata.address} x-webkit-airplay="allow" webkit-playsinline="true" preload controls frontend width="100%" autoPlay  loop></video>
+			}else if(!jsdata.auto && jsdata.loop){
+				return <video src={jsdata.address} x-webkit-airplay="allow" webkit-playsinline="true" preload controls frontend width="100%" loop></video>
+			}else if(jsdata.auto && !jsdata.loop){
+				return <video src={jsdata.address} x-webkit-airplay="allow" webkit-playsinline="true" preload controls frontend width="100%" autoPlay></video>
+			}else{
+				return <video src={jsdata.address} x-webkit-airplay="allow" webkit-playsinline="true" preload controls frontend width="100%"></video>
+			}
+		})();
+		return (
+			!!jsdata.address?
+			<section className="m-video" style={style}>
+				{video}
+			</section>
+			: null
+		)
+	}
+}
+export default PreVideo;
diff --git a/src/components/unitsList.js b/src/components/unitsList.js
@@ -55,8 +55,8 @@ class UnitsList extends React.Component {
                     <li onClick={this.handleClick.bind(this, 'BUTTON')}><i className="iconfont icon-anniu"></i>按钮</li>
                     <li onClick={this.handleClick.bind(this, 'TEXTBODY')}><i className="iconfont icon-zhengwen"></i>正文</li>
                     <li onClick={this.handleClick.bind(this, 'AUDIO')}><i className="iconfont icon-yinpin"></i>音频</li>
+                    <li onClick={this.handleClick.bind(this, 'VIDEO')}><i className="iconfont icon-x-rmvb"></i>视频</li>
                     <li onClick={this.handleClick.bind(this, 'CODE')}><i className="iconfont icon-daima"></i>jscss</li>
-                    <li onClick={this.info}><i className="iconfont icon-x-rmvb"></i>视频</li>
                     <li onClick={this.info}><i className="iconfont icon-tongji"></i>统计</li>
                 </ul>
             </section>

diff --git a/src/reducer/unit.js b/src/reducer/unit.js
@@ -68,6 +68,14 @@ const unitsConfig = immutable.fromJS({
         loop: true,
         auto: true
     },
+    VIDEO: {
+        type: 'VIDEO',
+        name: '视频',
+        address: '',
+        loop: true,
+        auto: true,
+        padding: [0, 20, 30, 20]
+    },
     CODE: {
         type: 'CODE',
         name: 'JSCSS',