style(ui): progress update

shiyiya · Oct 23, 2022 · 49803fb · 49803fb
1 parent 710f62a
commit 49803fb
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 27 deletions.
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
@@ -22,7 +22,7 @@ const App = () => {
   const player = useRef<Player | null>(null)
 
   if (document.location.pathname == '/react') {
-    return <Playground />
+    // return <Playground />
   }
 
   return (

diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -51,7 +51,7 @@ const player = Player.make(document.getElementById('player')!, {
     ui({
       autoFocus: true,
       screenshot: true,
-      theme: { primaryColor: '#f00' },
+      theme: { primaryColor: '#00b2ff' },
       subtitle: {
         color: 'hotpink',
         fontSize: isMobile ? 16 : 20,
@@ -112,7 +112,7 @@ const player = Player.make(document.getElementById('player')!, {
         <path d="M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z" fill="#fff"/>
         <path d="M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z" fill="#333"/>
     </svg>`,
-        loadingIndicator: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width='8em' height='8em' style="opacity: 0.9">
+        loadingIndicator: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width='9em' height='9em' style="opacity: 0.9">
       <path d="M16.118 3.667h.382a3.667 3.667 0 013.667 3.667v7.333a3.667 3.667 0 01-3.667 3.667h-11a3.667 3.667 0 01-3.667-3.667V7.333A3.667 3.667 0 015.5 3.666h.382L4.95 2.053a1.1 1.1 0 011.906-1.1l1.567 2.714h5.156L15.146.953a1.101 1.101 0 011.906 1.1l-.934 1.614z" fill="#333"/>
       <path d="M5.561 5.194h10.878a2.2 2.2 0 012.2 2.2v7.211a2.2 2.2 0 01-2.2 2.2H5.561a2.2 2.2 0 01-2.2-2.2V7.394a2.2 2.2 0 012.2-2.2z" fill="#fff"/>
       <path d="M6.967 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1zM15.033 8.556a1.1 1.1 0 011.1 1.1v2.689a1.1 1.1 0 11-2.2 0V9.656a1.1 1.1 0 011.1-1.1z" fill="#333"/>

diff --git a/packages/ui/src/components/Progress.style.ts b/packages/ui/src/components/Progress.style.ts
@@ -1,5 +1,4 @@
 import { $, isMobile } from '@oplayer/core'
-import { highlightCls } from './highlight'
 import { thumbnailCls } from './thumbnail'
 import { vttThumbnailsCls } from './vtt-thumbnails'
 
@@ -14,14 +13,16 @@ export const played = $.css({
 export const dot = $.css({
   width: '100%',
   'pointer-events': 'none',
+  position: 'relative',
+  'z-index': 1,
 
   '& > *': {
     content: "''",
     display: 'block',
     position: 'absolute',
     width: '1em',
     height: '1em',
-    top: 'calc(-0.5em + 1.5px)',
+    top: 'calc(-0.5em + 2px)',
     left: '-0.5em',
     bottom: '0',
     transform: 'scale(0)',
@@ -32,7 +33,7 @@ export const dot = $.css({
   '& > *:not(svg)': {
     width: '0.7em',
     height: '0.7em',
-    top: 'calc(-0.35em + 1.5px)',
+    top: 'calc(-0.35em + 2px)',
     left: '-0.35em',
     'border-radius': '50%',
     'background-color': '#fff'
@@ -54,7 +55,7 @@ export const hit = $.css({
   transform: 'translateX(-50%)',
   display: 'none',
   'white-space': 'pre',
-  bottom: '10px'
+  bottom: '15px'
 })
 
 export const progressDragging = $.css('/* progressDragging */')
@@ -73,29 +74,23 @@ export const progress = $.css({
   [`&.${progressDragging} .${hit}, &.${progressDragging} .${thumbnailCls}, &.${progressDragging} .${vttThumbnailsCls}`]:
     {
       display: 'block'
-    },
-
-  [`&:hover .${highlightCls}`]: {
-    transform: 'translate(-4px, -1.5px)',
-    height: '6px',
-    width: '8px'
-  }
+    }
 })
 
 export const progressInner = $.css({
   position: 'relative',
-  height: '3px',
+  height: '4px',
   width: '100%',
   'background-color': 'hsla(0, 0%, 100%, 0.2)',
-  'border-radius': '4px',
+  'border-radius': '2px',
 
-  [`& .${buffered},& .${played}`]: {
+  [`& .${buffered}, & .${played}`]: {
     position: 'absolute',
     left: '0',
     top: '0',
     bottom: '0',
     'will-change': 'width',
     'pointer-events': 'none',
-    'border-radius': '4px'
+    'border-radius': '2px'
   }
 })
diff --git a/packages/ui/src/components/Progress.ts b/packages/ui/src/components/Progress.ts
@@ -30,10 +30,10 @@ const render = (player: Player, el: HTMLElement, config: UiConfig) => {
   </div>`
   )
   const { init: initThumbnail, update: thumbnailUpdater } = config.thumbnails?.isVTT
-    ? renderVTTThumbnail(player, $dom, config.thumbnails)
-    : renderThumbnail(player, $dom, config.thumbnails)
+    ? renderVTTThumbnail(player, $dom.firstChild, config.thumbnails)
+    : renderThumbnail(player, $dom.firstChild, config.thumbnails)
 
-  renderHighlight(player, $dom, config.highlight)
+  renderHighlight(player, $dom.firstChild, config.highlight)
 
   const $buffered = $dom.querySelector<HTMLDivElement>(`.${buffered}`)!
   const $played = $dom.querySelector<HTMLDivElement>(`.${played}`)!

diff --git a/packages/ui/src/components/highlight.ts b/packages/ui/src/components/highlight.ts
@@ -3,8 +3,7 @@ import type { Highlight } from '../types'
 
 export const highlightTextCls = $.css(`
   display: none;
-  z-index: 2;
-  bottom: 10px;
+  bottom: 15px;
   position: absolute;
   left: 50%;
   padding: 5px 8px;
@@ -18,10 +17,9 @@ export const highlightTextCls = $.css(`
 
 export const highlightCls = $.css({
   position: 'absolute',
-  top: '5px',
   width: '6px',
-  height: '3px',
-  'border-radius': '2px',
+  height: '4px',
+  'border-radius': '1px',
   'background-color': '#fff',
   transform: 'translateX(-3px)',
   transition: 'all 0.2s',

diff --git a/packages/ui/src/components/thumbnail.ts b/packages/ui/src/components/thumbnail.ts
@@ -8,7 +8,6 @@ export const thumbnailCls = $.css(`
   left: 0;
   bottom: 12px;
   pointer-events: none;
-  transform: translateX(-50%);
   background-position-y: center;
   display: none;`)