From 0ff7efb7baafb574fbda07a8fb36fdc91c70be7c Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Tue, 10 Oct 2023 19:54:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=A7=86=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VideoElement/VideoPlayer/index.vue        | 334 +++++++++++++++++-
 .../VideoElement/VideoPlayer/style.scss       | 333 -----------------
 2 files changed, 333 insertions(+), 334 deletions(-)
 delete mode 100644 src/views/components/element/VideoElement/VideoPlayer/style.scss

diff --git a/src/views/components/element/VideoElement/VideoPlayer/index.vue b/src/views/components/element/VideoElement/VideoPlayer/index.vue
index 75e3955a..5588d5e7 100644
--- a/src/views/components/element/VideoElement/VideoPlayer/index.vue
+++ b/src/views/components/element/VideoElement/VideoPlayer/index.vue
@@ -354,5 +354,337 @@ useMSE(props.src, videoRef)
 </script>
 
 <style scoped lang="scss">
-@import url(./style.scss);
+.video-player {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  line-height: 1;
+  transform-origin: 0 0;
+
+  &.hide-controller {
+    cursor: none;
+
+    .controller-mask {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    .controller {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+}
+
+.video-wrap {
+  position: relative;
+  background: #000;
+  font-size: 0;
+  width: 100%;
+  height: 100%;
+
+  .video {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.controller-mask {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
+  height: 98px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  transition: all 0.3s ease;
+}
+.controller {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 41px;
+  padding: 0 20px;
+  user-select: none;
+  transition: all 0.3s ease;
+
+  .bar-wrap {
+    padding: 5px 0;
+    cursor: pointer;
+    position: absolute;
+    bottom: 33px;
+    width: calc(100% - 40px);
+    height: 3px;
+
+    &:hover .bar .played .thumb {
+      transform: scale(1);
+    }
+
+    .bar-time {
+      position: absolute;
+      left: 0;
+      top: -20px;
+      border-radius: 4px;
+      padding: 5px 7px;
+      background-color: rgba(0, 0, 0, 0.62);
+      color: #fff;
+      font-size: 12px;
+      text-align: center;
+      opacity: 1;
+      transition: opacity 0.1s ease-in-out;
+      word-wrap: normal;
+      word-break: normal;
+      z-index: 2;
+      pointer-events: none;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+    .bar {
+      position: relative;
+      height: 3px;
+      width: 100%;
+      background: rgba(255, 255, 255, 0.2);
+      cursor: pointer;
+
+      .loaded {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(255, 255, 255, 0.4);
+        height: 3px;
+        transition: all 0.5s ease;
+        will-change: width;
+      }
+      .played {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 3px;
+        will-change: width;
+        background-color: #fff;
+
+        .thumb {
+          position: absolute;
+          top: 0;
+          right: 5px;
+          margin-top: -4px;
+          margin-right: -10px;
+          height: 11px;
+          width: 11px;
+          border-radius: 50%;
+          cursor: pointer;
+          transition: all 0.3s ease-in-out;
+          transform: scale(0);
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  .icons {
+    height: 38px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+
+    &.icons-right {
+      right: 15px;
+    }
+    .time {
+      line-height: 38px;
+      color: #eee;
+      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+      vertical-align: middle;
+      font-size: 13px;
+      cursor: default;
+    }
+    .icon {
+      width: 40px;
+      height: 100%;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+
+      &.play-icon {
+        font-size: 26px;
+      }
+
+      .icon-content {
+        transition: all 0.2s ease-in-out;
+        opacity: 0.8;
+        color: #fff;
+      }
+      &.loop-icon {
+        font-size: 12px;
+
+        .icon-content {
+          opacity: 0.5;
+        }
+      }
+      &.speed-icon {
+        font-size: 12px;
+        position: relative;
+      }
+      .speed-menu {
+        width: 70px;
+        position: absolute;
+        bottom: 30px;
+        left: -23px;
+        background-color: #22211b;
+        padding: 5px 0;
+        color: #ddd;
+
+        .speed-menu-item {
+          padding: 8px 0;
+          text-align: center;
+
+          &:hover {
+            background-color: #393833;
+            color: #fff;
+          }
+          &.active {
+            font-weight: 700;
+            color: #fff;
+          }
+        }
+      }
+
+      &.active .icon-content {
+        opacity: 1;
+      }
+      &:hover .icon-content {
+        opacity: 1;
+      }
+    }
+    .volume {
+      height: 100%;
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        .volume-bar-wrap .volume-bar {
+          width: 45px;
+        }
+        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
+          transform: scale(1);
+        }
+      }
+      &.volume-active {
+        .volume-bar-wrap .volume-bar {
+          width: 45px;
+        }
+        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
+          transform: scale(1);
+        }
+      }
+    }
+    .volume-bar-wrap {
+      display: inline-block;
+      margin: 0 15px 0 -5px;
+      vertical-align: middle;
+      height: 100%;
+    }
+    .volume-bar {
+      position: relative;
+      top: 17px;
+      width: 0;
+      height: 3px;
+      background: #aaa;
+      transition: all 0.3s ease-in-out;
+
+      .volume-bar-inner {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        transition: all 0.1s ease;
+        will-change: width;
+        background-color: #fff;
+
+        .thumb {
+          position: absolute;
+          top: 0;
+          right: 5px;
+          margin-top: -4px;
+          margin-right: -10px;
+          height: 11px;
+          width: 11px;
+          border-radius: 50%;
+          cursor: pointer;
+          transition: all 0.3s ease-in-out;
+          transform: scale(0);
+          background-color: #fff;
+        }
+      }
+    }
+    .loop {
+      display: inline-block;
+      height: 100%;
+    }
+  }
+}
+
+.bezel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-size: 22px;
+  color: #fff;
+  pointer-events: none;
+
+  .bezel-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -26px 0 0 -26px;
+    height: 52px;
+    width: 52px;
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    opacity: 0;
+    pointer-events: none;
+    font-size: 40px;
+
+    &.bezel-transition {
+      animation: bezel-hide 0.5s linear;
+    }
+
+    @keyframes bezel-hide {
+      from {
+        opacity: 1;
+        transform: scale(1);
+      }
+      to {
+        opacity: 0;
+        transform: scale(2);
+      }
+    }
+  }
+}
+
+.load-error {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-size: 15px;
+  color: #fff;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/components/element/VideoElement/VideoPlayer/style.scss b/src/views/components/element/VideoElement/VideoPlayer/style.scss
deleted file mode 100644
index 067622eb..00000000
--- a/src/views/components/element/VideoElement/VideoPlayer/style.scss
+++ /dev/null
@@ -1,333 +0,0 @@
-.video-player {
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-  line-height: 1;
-  transform-origin: 0 0;
-
-  &.hide-controller {
-    cursor: none;
-
-    .controller-mask {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-    .controller {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-  }
-}
-
-.video-wrap {
-  position: relative;
-  background: #000;
-  font-size: 0;
-  width: 100%;
-  height: 100%;
-
-  .video {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.controller-mask {
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
-  height: 98px;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  transition: all 0.3s ease;
-}
-.controller {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 41px;
-  padding: 0 20px;
-  user-select: none;
-  transition: all 0.3s ease;
-
-  .bar-wrap {
-    padding: 5px 0;
-    cursor: pointer;
-    position: absolute;
-    bottom: 33px;
-    width: calc(100% - 40px);
-    height: 3px;
-
-    &:hover .bar .played .thumb {
-      transform: scale(1);
-    }
-
-    .bar-time {
-      position: absolute;
-      left: 0;
-      top: -20px;
-      border-radius: 4px;
-      padding: 5px 7px;
-      background-color: rgba(0, 0, 0, 0.62);
-      color: #fff;
-      font-size: 12px;
-      text-align: center;
-      opacity: 1;
-      transition: opacity 0.1s ease-in-out;
-      word-wrap: normal;
-      word-break: normal;
-      z-index: 2;
-      pointer-events: none;
-
-      &.hidden {
-        opacity: 0;
-      }
-    }
-    .bar {
-      position: relative;
-      height: 3px;
-      width: 100%;
-      background: rgba(255, 255, 255, 0.2);
-      cursor: pointer;
-
-      .loaded {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        background: rgba(255, 255, 255, 0.4);
-        height: 3px;
-        transition: all 0.5s ease;
-        will-change: width;
-      }
-      .played {
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        height: 3px;
-        will-change: width;
-        background-color: #fff;
-
-        .thumb {
-          position: absolute;
-          top: 0;
-          right: 5px;
-          margin-top: -4px;
-          margin-right: -10px;
-          height: 11px;
-          width: 11px;
-          border-radius: 50%;
-          cursor: pointer;
-          transition: all 0.3s ease-in-out;
-          transform: scale(0);
-          background-color: #fff;
-        }
-      }
-    }
-  }
-  .icons {
-    height: 38px;
-    position: absolute;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-
-    &.icons-right {
-      right: 15px;
-    }
-    .time {
-      line-height: 38px;
-      color: #eee;
-      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-      vertical-align: middle;
-      font-size: 13px;
-      cursor: default;
-    }
-    .icon {
-      width: 40px;
-      height: 100%;
-      position: relative;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      font-size: 20px;
-
-      &.play-icon {
-        font-size: 26px;
-      }
-
-      .icon-content {
-        transition: all 0.2s ease-in-out;
-        opacity: 0.8;
-        color: #fff;
-      }
-      &.loop-icon {
-        font-size: 12px;
-
-        .icon-content {
-          opacity: 0.5;
-        }
-      }
-      &.speed-icon {
-        font-size: 12px;
-        position: relative;
-      }
-      .speed-menu {
-        width: 70px;
-        position: absolute;
-        bottom: 30px;
-        left: -23px;
-        background-color: #22211b;
-        padding: 5px 0;
-        color: #ddd;
-
-        .speed-menu-item {
-          padding: 8px 0;
-          text-align: center;
-
-          &:hover {
-            background-color: #393833;
-            color: #fff;
-          }
-          &.active {
-            font-weight: 700;
-            color: #fff;
-          }
-        }
-      }
-
-      &.active .icon-content {
-        opacity: 1;
-      }
-      &:hover .icon-content {
-        opacity: 1;
-      }
-    }
-    .volume {
-      height: 100%;
-      position: relative;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-
-      &:hover {
-        .volume-bar-wrap .volume-bar {
-          width: 45px;
-        }
-        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
-          transform: scale(1);
-        }
-      }
-      &.volume-active {
-        .volume-bar-wrap .volume-bar {
-          width: 45px;
-        }
-        .volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
-          transform: scale(1);
-        }
-      }
-    }
-    .volume-bar-wrap {
-      display: inline-block;
-      margin: 0 15px 0 -5px;
-      vertical-align: middle;
-      height: 100%;
-    }
-    .volume-bar {
-      position: relative;
-      top: 17px;
-      width: 0;
-      height: 3px;
-      background: #aaa;
-      transition: all 0.3s ease-in-out;
-
-      .volume-bar-inner {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 100%;
-        transition: all 0.1s ease;
-        will-change: width;
-        background-color: #fff;
-
-        .thumb {
-          position: absolute;
-          top: 0;
-          right: 5px;
-          margin-top: -4px;
-          margin-right: -10px;
-          height: 11px;
-          width: 11px;
-          border-radius: 50%;
-          cursor: pointer;
-          transition: all 0.3s ease-in-out;
-          transform: scale(0);
-          background-color: #fff;
-        }
-      }
-    }
-    .loop {
-      display: inline-block;
-      height: 100%;
-    }
-  }
-}
-
-.bezel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  font-size: 22px;
-  color: #fff;
-  pointer-events: none;
-
-  .bezel-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -26px 0 0 -26px;
-    height: 52px;
-    width: 52px;
-    padding: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 50%;
-    opacity: 0;
-    pointer-events: none;
-    font-size: 40px;
-
-    &.bezel-transition {
-      animation: bezel-hide 0.5s linear;
-    }
-
-    @keyframes bezel-hide {
-      from {
-        opacity: 1;
-        transform: scale(1);
-      }
-      to {
-        opacity: 0;
-        transform: scale(2);
-      }
-    }
-  }
-}
-
-.load-error {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  font-size: 15px;
-  color: #fff;
-  pointer-events: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
\ No newline at end of file