@x-edu/live-player 0.0.21 → 0.0.23

package/src/detail/LiveStatus/index.module.less

@@ -1,193 +1,193 @@
-@import '@/component/mixin.less';
-
-.live-status-wrapper {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 80;
-}
-
-.live-status {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-
-  .primary-btn {
-    height: 48px;
-    line-height: 48px;
-    padding: 0 28px;
-    margin: 48px 0 0;
-    font-size: 20px;
-    font-weight: 400;
-    border-radius: 36px;
-    text-align: center;
-    color: #ffffff;
-    background: #1e62ec;
-    box-shadow: 0px 6px 10px 0px rgba(30, 98, 236, 0.2);
-    cursor: pointer;
-    border: 0;
-    outline: 0;
-  }
-
-  .status-living-loading {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      font-size: 50px;
-      color: #fff;
-      margin-bottom: 16px;
-    }
-  }
-
-  .status-living {
-    display: flex;
-    align-items: flex-end;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      height: 42px;
-      margin-right: 12px;
-      padding-bottom: 4px;
-
-      &:after {
-        content: '';
-        display: inline-block;
-        width: 1px;
-        height: 100%;
-        vertical-align: bottom;
-      }
-
-      div {
-        display: inline-block;
-        width: 7px;
-        height: 100%;
-        margin-right: 7px;
-        border-radius: 3px;
-        background: #fff;
-        animation: load 1.04s ease infinite;
-        vertical-align: bottom;
-      }
-      div:last-child {
-        margin-right: 0px;
-      }
-      div:nth-child(1) {
-        animation-delay: 0.13s;
-      }
-      div:nth-child(2) {
-        animation-delay: 0.24s;
-      }
-      div:nth-child(3) {
-        animation-delay: 0.42s;
-      }
-      @keyframes load{
-        0%, 100%{
-            height: 6px;
-        }
-        50%{
-            height: 32px;
-        }
-      }
-    }
-  }
-
-  .status-exception {
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-
-    .icon {
-      width: 72px;
-      height: 72px;
-      background-image: url('../img/icon_coffee.png');
-      background-size: 100% 100%;
-      margin: 0 auto 16px;
-    }
-  }
-
-  .status-completed {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-      margin: 10px 0;
-    }
-    
-    .icon {
-      display: block;
-      width: 54px;
-      height: 54px;
-      background-image: url('../img/icon_completed.png');
-      background-size: 100% 100%;
-    }
-  }
-
-  .status-offline,
-  .status-load-error {
-    display: flex;
-    align-items: center;
-
-    .text {
-      font-size: 28px;
-      font-weight: bold;
-      color: #fff;
-    }
-    
-    .icon {
-      display: inline-block;
-      font-size: 48px;
-      margin-right: 24px;
-      color: #fff;
-    }
-  }
-}
-
-.video-poster {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-color: #000;
-}
-
-.replay-encoding {
-  height: 48px;
-  line-height: 48px;
-  padding: 0 28px;
-  margin: 48px 0 0;
-  font-size: 20px;
-  font-weight: 400;
-  border-radius: 36px;
-  text-align: center;
-  color: #ffffff;
-  cursor: pointer;
-  outline: 0;
+@import '@/component/mixin.less';
+
+.live-status-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 80;
+}
+
+.live-status {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+
+  .primary-btn {
+    height: 48px;
+    line-height: 48px;
+    padding: 0 28px;
+    margin: 48px 0 0;
+    font-size: 20px;
+    font-weight: 400;
+    border-radius: 36px;
+    text-align: center;
+    color: #ffffff;
+    background: #1e62ec;
+    box-shadow: 0px 6px 10px 0px rgba(30, 98, 236, 0.2);
+    cursor: pointer;
+    border: 0;
+    outline: 0;
+  }
+
+  .status-living-loading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .text {
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .icon {
+      font-size: 50px;
+      color: #fff;
+      margin-bottom: 16px;
+    }
+  }
+
+  .status-living {
+    display: flex;
+    align-items: flex-end;
+
+    .text {
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .icon {
+      height: 42px;
+      margin-right: 12px;
+      padding-bottom: 4px;
+
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 100%;
+        vertical-align: bottom;
+      }
+
+      div {
+        display: inline-block;
+        width: 7px;
+        height: 100%;
+        margin-right: 7px;
+        border-radius: 3px;
+        background: #fff;
+        animation: load 1.04s ease infinite;
+        vertical-align: bottom;
+      }
+      div:last-child {
+        margin-right: 0px;
+      }
+      div:nth-child(1) {
+        animation-delay: 0.13s;
+      }
+      div:nth-child(2) {
+        animation-delay: 0.24s;
+      }
+      div:nth-child(3) {
+        animation-delay: 0.42s;
+      }
+      @keyframes load{
+        0%, 100%{
+            height: 6px;
+        }
+        50%{
+            height: 32px;
+        }
+      }
+    }
+  }
+
+  .status-exception {
+    .text {
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+    }
+
+    .icon {
+      width: 72px;
+      height: 72px;
+      background-image: url('../img/icon_coffee.png');
+      background-size: 100% 100%;
+      margin: 0 auto 16px;
+    }
+  }
+
+  .status-completed {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .text {
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+      margin: 10px 0;
+    }
+    
+    .icon {
+      display: block;
+      width: 54px;
+      height: 54px;
+      background-image: url('../img/icon_completed.png');
+      background-size: 100% 100%;
+    }
+  }
+
+  .status-offline,
+  .status-load-error {
+    display: flex;
+    align-items: center;
+
+    .text {
+      font-size: 28px;
+      font-weight: bold;
+      color: #fff;
+    }
+    
+    .icon {
+      display: inline-block;
+      font-size: 48px;
+      margin-right: 24px;
+      color: #fff;
+    }
+  }
+}
+
+.video-poster {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #000;
+}
+
+.replay-encoding {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 28px;
+  margin: 48px 0 0;
+  font-size: 20px;
+  font-weight: 400;
+  border-radius: 36px;
+  text-align: center;
+  color: #ffffff;
+  cursor: pointer;
+  outline: 0;
 }

package/src/detail/LiveVideo/config.js

@@ -1,37 +1,37 @@
-export const skinLayout = [
-  {
-    name: 'bigPlayButton',
-    align: 'cc',
-    x: 30,
-    y: 80
-  },
-  {
-    name: 'infoDisplay'
-  },
-  {
-    name: 'controlBar',
-    align: 'blabs',
-    x: 0,
-    y: 0,
-    children: [
-      {
-        name: 'liveDisplay',
-        align: 'tlabs',
-        x: 15,
-        y: 6
-      },
-      {
-        name: 'fullScreenButton',
-        align: 'tr',
-        x: 10,
-        y: 13
-      },
-      {
-        name: 'volume',
-        align: 'tr',
-        x: 5,
-        y: 11
-      }
-    ]
-  }
-]
+export const skinLayout = [
+  {
+    name: 'bigPlayButton',
+    align: 'cc',
+    x: 30,
+    y: 80
+  },
+  {
+    name: 'infoDisplay'
+  },
+  {
+    name: 'controlBar',
+    align: 'blabs',
+    x: 0,
+    y: 0,
+    children: [
+      {
+        name: 'liveDisplay',
+        align: 'tlabs',
+        x: 15,
+        y: 6
+      },
+      {
+        name: 'fullScreenButton',
+        align: 'tr',
+        x: 10,
+        y: 13
+      },
+      {
+        name: 'volume',
+        align: 'tr',
+        x: 5,
+        y: 11
+      }
+    ]
+  }
+]