From 1a1adc4fe94a3535f0d69745d7a82ca97a0b669b Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Wed, 16 Mar 2016 17:46:35 +0800
Subject: [PATCH] site: support video in Markdown

---
 docs/spec/transition.md                 | 34 +++++--------------------
 package.json                            |  3 ++-
 site/common/styles/preview-img.less     | 10 ++++++++
 site/component/Article/ImagePreview.jsx |  5 ++--
 site/component/Article/VideoPlayer.jsx  | 24 +++++++++++++++++
 site/component/Article/index.jsx        | 18 ++++++++++++-
 site/component/Motion/transition.js     | 21 ---------------
 7 files changed, 62 insertions(+), 53 deletions(-)
 create mode 100644 site/component/Article/VideoPlayer.jsx
 delete mode 100644 site/component/Motion/transition.js

diff --git a/docs/spec/transition.md b/docs/spec/transition.md
index 693c1d82ee..21c979495d 100644
--- a/docs/spec/transition.md
+++ b/docs/spec/transition.md
@@ -14,21 +14,19 @@
 
 ## 在视图变化时保持上下文
 
-<div class="video-player video-player-right"></div>
+<video class="transition-video-player" alt="滑入与滑出示例" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" />
 
 滑入与滑出：可以有效构建虚拟空间。
 
 <br>
 
-<div class="video-player video-player-right"></div>
-
+<video class="transition-video-player" alt="传送带示例" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" />
 
 传送带：可极大地扩展虚拟空间。
 
 <br>
 
-<div class="video-player video-player-right"></div>
-
+<video class="transition-video-player" alt="折叠窗口示例" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" />
 
 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
 
@@ -42,27 +40,25 @@
 
 ## 解释刚刚发生了什么
 
-
-<div class="video-player video-player-right"></div>
-
+<video class="transition-video-player" alt="对象增加示例" description="新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。" src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />
 
 对象增加：在列表/表格中，新增了一个对象。
 
 <br>
 
-<div class="video-player video-player-right"></div>
+<video class="transition-video-player" alt="对象删除示例" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" />
 
 对象删除：在列表/表格中，删除了一个对象。
 
 <br>
 
-<div class="video-player video-player-right"></div>
+<video class="transition-video-player" alt="对象更改示例" description="状态一：用户更改了『详情』中的值；<br>状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；<br>状态三：底色持续几秒后，恢复正常。" src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />
 
 对象更改：在列表/表格中，更改了一个对象。
 
 <br>
 
-<div class="video-player video-player-right"></div>
+<video class="transition-video-player" alt="对象呼出示例" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" />
 
 对象呼出：点击页面中元素，呼出一个新对象。
 
@@ -76,19 +72,3 @@
 
 
 <span class="waiting">图片（敬请期待）</span>
-
-
-```__react
-import scripts from '../../site/component/Motion/transition';
-class ExecuteJS extends React.Component {
-  componentDidMount() {
-    scripts();
-  }
-  
-  render() {
-    return null;
-  }
-}
-
-ReactDOM.render(<ExecuteJS key="execute" />, mountNode);
-```
diff --git a/package.json b/package.json
index 3f88df4f85..81a0b23fea 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "warning": "~2.1.0"
   },
   "devDependencies": {
-    "antd-md-loader": "0.1.0-beta.9",
+    "antd-md-loader": "0.1.0-beta.10",
     "atool-build": "^0.5.0",
     "autoprefixer": "^6.3.3",
     "babel-cli": "^6.2.0",
@@ -126,6 +126,7 @@
     "react-github-button": "^0.1.1",
     "react-router": "^2.0.0",
     "react-stateless-wrapper": "~1.0.2",
+    "react-sublime-video": "0.1.0-beta",
     "recast": "^0.11.2",
     "reqwest": "~2.0.5",
     "semver": "^5.1.0",
diff --git a/site/common/styles/preview-img.less b/site/common/styles/preview-img.less
index 4de07f18a6..df21ef89ba 100644
--- a/site/common/styles/preview-img.less
+++ b/site/common/styles/preview-img.less
@@ -105,4 +105,14 @@
 
 .no-padding {
   padding: 0!important;
+}
+
+.transition-video-player {
+  float: right;
+  padding: 0;
+  width: 600px;
+
+  .preview-image-wrapper {
+    padding: 0;
+  }
 }
\ No newline at end of file
diff --git a/site/component/Article/ImagePreview.jsx b/site/component/Article/ImagePreview.jsx
index 50b92a20a4..7269a6773b 100644
--- a/site/component/Article/ImagePreview.jsx
+++ b/site/component/Article/ImagePreview.jsx
@@ -18,9 +18,8 @@ function PreviewImageBox({ cover, coverMeta, imgs, style, previewVisible,
         <img className={coverMeta.className} src={coverMeta.src} alt="Sample Picture" />
       </div>
       <div className="preview-image-title">{coverMeta.alt}</div>
-      <div className="preview-image-description">
-        {coverMeta.description}
-      </div>
+      <div className="preview-image-description"
+        dangerouslySetInnerHTML={{ __html: coverMeta.description }} />
 
       <Modal className="image-modal" visible={previewVisible} title={null} footer={null}
         onCancel={onCancel}>
diff --git a/site/component/Article/VideoPlayer.jsx b/site/component/Article/VideoPlayer.jsx
new file mode 100644
index 0000000000..8d5e2776db
--- /dev/null
+++ b/site/component/Article/VideoPlayer.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import SublimeVideo from 'react-sublime-video';
+
+export default class VideoPlayer extends React.Component {
+  render() {
+    const video = this.props.video;
+    const span = document.createElement('span');
+    span.innerHTML = video;
+    const attributes = span.children[0].attributes;
+    const { alt, description, src } = attributes;
+    const videoClassName = attributes.class.nodeValue;
+
+    return (
+      <div className={`preview-image-box ${videoClassName}`}>
+        <div className={'preview-image-wrapper'}>
+          <SublimeVideo src={src && src.nodeValue} type="video/mp4" />
+        </div>
+        <div className="preview-image-title">{alt && alt.nodeValue}</div>
+        <div className="preview-image-description"
+          dangerouslySetInnerHTML={{ __html: description && description.nodeValue }} />
+      </div>
+    );
+  }
+}
diff --git a/site/component/Article/index.jsx b/site/component/Article/index.jsx
index eb145d1fb2..db8f771c92 100644
--- a/site/component/Article/index.jsx
+++ b/site/component/Article/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import ImagePreview from './ImagePreview';
+import VideoPlayer from './VideoPlayer';
 import * as utils from '../utils';
 
 export default class Article extends React.Component {
@@ -9,6 +10,7 @@ export default class Article extends React.Component {
     super(props);
 
     this.imgToPreview = this.imgToPreview.bind(this);
+    this.enhanceVideo = this.enhanceVideo.bind(this);
   }
 
   isPreviewImg(string) {
@@ -30,6 +32,18 @@ export default class Article extends React.Component {
     return <ImagePreview className={previewClassName} imgs={imgs} />;
   }
 
+  isVideo(string) {
+    return /^<video\s/i.test(string);
+  }
+
+  enhanceVideo(node) {
+    if (!this.isVideo(node.children)) {
+      return node;
+    }
+
+    return <VideoPlayer video={node.children} />;
+  }
+
   render() {
     const { content, location } = this.props;
     const jumper = content.description.filter((node) => {
@@ -43,7 +57,9 @@ export default class Article extends React.Component {
       );
     });
 
-    content.description = content.description.map(this.imgToPreview);
+    content.description = content.description
+      .map(this.imgToPreview)
+      .map(this.enhanceVideo);
 
     return (
       <article className="markdown">
diff --git a/site/component/Motion/transition.js b/site/component/Motion/transition.js
deleted file mode 100644
index 0db522e092..0000000000
--- a/site/component/Motion/transition.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Motion from './motion';
-
-module.exports = function () {
-  Motion.motionVideo.init([
-    'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4',
-    'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4',
-    'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4',
-    'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4',
-    'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4',
-    'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4',
-    'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4',
-  ], [
-    'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4',
-    'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4',
-    'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4',
-    'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4',
-    'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4',
-    'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4',
-    'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4',
-  ]);
-};