test: 演示页界面设计变更

goblin-laboratory · Jul 18, 2019 · a63aa8e · a63aa8e
1 parent 7c9056b
commit a63aa8e
Show file tree

Hide file tree

Showing 12 changed files with 454 additions and 68 deletions.
diff --git a/Notes.md b/Notes.md
@@ -8,6 +8,9 @@
 - chimee: https://github.com/Chimeejs/chimee
 - TCPlayerLite : https://cloud.tencent.com/document/product/454/7503
 
+## 测试源
+- https://bitmovin.com/mpeg-dash-hls-examples-sample-streams/
+
 ## 参考资料
 
 - React: https://react.docschina.org/docs/events.html#media-events

diff --git a/TODO b/TODO
@@ -51,11 +51,14 @@
   ✔ videoProps 支持 @done(19-07-15 11:16)
   ✔ playerProps 支持 @done(19-07-15 11:15)
   ✔ className @done(19-07-15 11:15)
+  ☐ IE 11 全屏/退出全屏
+  ☐ PC 版微信 全屏/退出全屏
   example 配套修改:
     ☐ ref Methods 测试
     ✔ onFullscreenChange @done(19-07-15 18:39)
     ✔ 同层播放 @done(19-07-15 18:39)
     ✔ videoProps( playsInline, objectPosition, x5-playsinline ... ) @done(19-07-15 18:39)
+    ✔ 布局调整：电脑端上左右，手机端上中下布局 @done(19-07-18 17:22)
 
 0.6.x:
   ☐ 使用 gloabl 样式，支持使用者覆盖默认样式

diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/example/package.json b/example/package.json
@@ -8,6 +8,7 @@
     "hls.js": "^0.12.4",
     "numeral": "^2.0.6",
     "react": "link:../node_modules/react",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "3.0.1",
     "react-swf": "^1.0.7",

diff --git a/example/src/App.css b/example/src/App.css
@@ -1,39 +1,63 @@
 /* @import '~antd/dist/antd.css'; */
 
-.body {
-  display: flex;
+/* .selector {
+  overflow: hidden;
+  background: #fff;
+} */
+
+.container {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr 350px;
+  grid-template-columns: 1fr 350px;
+  -ms-grid-rows: 50px 1fr 50px;
+  grid-template-rows: 50px 1fr 62px;
   width: 100%;
   height: 100%;
-  flex-direction: column;
-  overflow-y: hidden;
+  background: #f0f2f5;
 }
 
-.selector {
-  min-height: 90px;
-  overflow: hidden;
+.header {
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 1;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 2;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  grid-column-start: 1;
+  grid-column-end: 3;
   background: #fff;
+  position: relative;
+  line-height: 50px;
+  overflow: hidden;
 }
 
 .form {
   width: 100%;
-  padding: 1em;
+  padding: 5px 1em;
 }
 
 .form .ant-form-item {
   margin-bottom: 0;
 }
 
-.protocolSelector {
-  min-width: 200px;
+.type {
+  width: 25%;
 }
 
-.player {
-  flex: 1;
-  position: relative;
+.type .ant-col {
   width: 100%;
 }
 
-.x5videofullscreen .selector {
+.src {
+  width: 40%;
+}
+
+.src .ant-col {
+  width: 100%;
+}
+
+.x5videofullscreen .header {
   position: relative;
   z-index: 1;
 }
@@ -42,16 +66,205 @@
   position: absolute;
 }
 
-.fullscreen .selector {
+.fullscreen .header {
   display: none;
 }
 
 /* TODO: 同层播放时 player position 设置为 relative form 不会显示  */
-.x5videofullscreen .player {
+.x5videofullscreen .main {
   position: static;
   /* z-index: -1; */
 }
 
 .src {
   white-space: nowrap;
 }
+
+.main {
+  -ms-grid-row: 2;
+  -ms-grid-row-span: 1;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
+  grid-row-start: 2;
+  grid-row-end: 3;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  background: #000;
+  margin: 12px 12px 0 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.blankImg {
+  display: none;
+  opacity: 0;
+  width: 100%;
+  visibility: hidden;
+  height: 0;
+}
+
+.footer {
+  -ms-grid-row: 3;
+  -ms-grid-row-span: 1;
+  -ms-grid-column: 1;
+  -ms-grid-column-span: 1;
+  grid-row-start: 3;
+  grid-row-end: 4;
+  grid-column-start: 1;
+  grid-column-end: 2;
+  background: #333;
+  color: #fff;
+  margin: 0 12px 12px 12px;
+  line-height: 50px;
+}
+
+.aside {
+  -ms-grid-row: 2;
+  -ms-grid-row-span: 2;
+  -ms-grid-column: 2;
+  -ms-grid-column-span: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  grid-column-start: 2;
+  grid-column-end: 3;
+  background: #fff;
+  margin: 12px 12px 12px 0;
+  position: relative;
+  overflow-y: auto;
+}
+
+@supports (not (display: grid)) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    height: 50px;
+    box-shadow: none;
+  }
+
+  .main {
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    box-shadow: none;
+    height: 60%;
+  }
+
+  .aside {
+    flex: 1;
+    order: 1;
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .footer {
+    margin: 0;
+    background: #333;
+    color: #fff;
+  }
+}
+
+@media screen and (orientation: portrait) and (max-width: 991px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    height: 50px;
+  }
+
+  .main {
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    box-shadow: none;
+  }
+  .blankImg {
+    display: block;
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+    height: auto;
+  }
+
+  .aside {
+    flex: 1;
+    order: 1;
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .footer {
+    margin: 0;
+    background: #333;
+    color: #fff;
+  }
+}
+
+.asideContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.asideTabs {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.asideTabs .ant-tabs-content {
+  height: 100%;
+}
+
+.asideTabs .ant-tabs-tabpane {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.infoTabPane {
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-bottom: 50px;
+}
+
+.asideFooter {
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+
+.srcValue {
+  word-break: break-all;
+}
+
+.testTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.testTable,
+.testTable th,
+.testTable td {
+  border: 1px solid #e8e8e8;
+  padding: 4px;
+}
+
+.testActionTitle{
+  text-align: center;
+  width: 4em;
+}
+
+.testAction{
+  text-align: center;
+  color: #1890ff;
+  cursor: pointer;
+}