feature: combined-video player.

2024-04-11 17:29:26 +08:00
parent b6fe3e34f5
commit 5cbbcf8d81
15 changed files with 8591 additions and 873 deletions
--- a/lib/ui/css/media.scss
+++ b/lib/ui/css/media.scss
@ -65,4 +65,219 @@
 .ui-media-video {
    max-width: 200px;
    max-height: 200px;
+}
+
+.ui-media-video-container {
+    position: relative;
+    background-color: #000;
+    min-height: 200px;
+    height: 100%;
+    user-select: none;
+
+    --icon-size: 16px;
+
+    >.ui-video-wrapper {
+        position: relative;
+        display: inline-block;
+
+        >video {
+            width: 100%;
+            height: 100%;
+        }
+
+        >.ui-video-waiting {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: opacity .2s;
+
+            >svg {
+                fill: #eee;
+                width: 30px;
+                height: 30px;
+                top: calc(50% - 15px);
+                left: calc(50% - 15px);
+                animation: spinner 1.2s infinite linear;
+            }
+
+            @keyframes spinner {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(359deg);
+                }
+            }
+        }
+    }
+
+    >.ui-video-control {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        background: linear-gradient(transparent calc(100% - 100px), rgba(50, 50, 50, .7) calc(100% - 65px), #000);
+        transition: opacity .5s;
+
+        &:hover,
+        &.active {
+            opacity: 1;
+        }
+
+        .ui-video-icon {
+            position: absolute;
+            width: var(--icon-size);
+            height: var(--icon-size);
+            cursor: pointer;
+
+            >svg {
+                width: var(--icon-size);
+                height: var(--icon-size);
+                display: block;
+                fill: #eee;
+            }
+
+            &.disabled {
+                cursor: default;
+                opacity: .5;
+            }
+        }
+
+        .ui-video-bar {
+            position: absolute;
+            height: 4px;
+            padding: 4px 0;
+            cursor: pointer;
+
+            >.ui-video-duration,
+            >.ui-video-progress {
+                position: absolute;
+                border-radius: 2px;
+                height: 4px;
+                cursor: pointer;
+            }
+
+            >.ui-video-duration {
+                width: 100%;
+                background-color: #bbb;
+            }
+
+            >.ui-video-progress {
+                width: 0;
+                background-color: #fff;
+
+                &::after {
+                    content: '\a0';
+                    position: absolute;
+                    right: -6px;
+                    top: -6px;
+                    width: 13px;
+                    height: 13px;
+                    border-radius: 6px;
+                    background-color: #fff;
+                }
+            }
+        }
+
+        >.play-icon {
+            left: 20px;
+            bottom: 41px;
+
+            >svg {
+                position: absolute;
+
+                &:last-child {
+                    display: none;
+                }
+            }
+
+            &.pause {
+                >svg:first-child {
+                    display: none;
+                }
+
+                >svg:last-child {
+                    display: initial;
+                }
+            }
+        }
+
+        >.ui-video-time-label {
+            position: absolute;
+            font-size: 14px;
+            font-weight: bold;
+            left: 48px;
+            bottom: 40px;
+            color: #eee;
+        }
+
+        >.fullscreen-icon {
+            right: 20px;
+            bottom: 41px;
+        }
+
+        >.ui-video-volume-container {
+            position: absolute;
+            bottom: 40px;
+            right: 50px;
+
+            >.volume-icon {
+                right: 0;
+                bottom: 1px;
+
+                >svg {
+                    position: absolute;
+
+                    &:last-child {
+                        display: none;
+                    }
+                }
+
+                &.muted {
+                    >svg:first-child {
+                        display: none;
+                    }
+
+                    >svg:last-child {
+                        display: initial;
+                    }
+                }
+            }
+
+            >.volume-bar {
+                width: 60px;
+                right: 30px;
+                bottom: 2px;
+            }
+        }
+
+        &.no-fullscreen>.ui-video-volume-container {
+            right: 20px;
+        }
+
+        >.seek-bar {
+            left: 16px;
+            right: 16px;
+            bottom: 16px;
+
+            >.seek-progress::after {
+                opacity: 0;
+                transition: opacity .2s;
+            }
+        }
+
+        &.active>.seek-bar>.seek-progress::after,
+        >.seek-bar:hover>.seek-progress::after {
+            opacity: 1;
+        }
+    }
 }