style(ui): see changelog.

shiyiya · Mar 10, 2024 · 1ee86e4 · 1ee86e4
1 parent 8218028
commit 1ee86e4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/packages/docs/public/ohls.html b/packages/docs/public/ohls.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="referrer" content="no-referrer" />
     <title>Start streaming now using OPlayer - Free HTML5 Player</title>
-    <meta name="keywords" content="hls player,online hls player" />
+    <meta name="keywords" content="oplayer,hls player,online hls player" />
     <style>
       body {
         margin: 0;
@@ -70,6 +70,7 @@
       var hlsScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js'
       var danmakuScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/danmaku@latest/dist/index.min.js'
       var playlistScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js'
+      var chromecastScriptCdn = 'https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js'
 
       var query = document.location.search.substring(1)
       var src, poster, subtitle, danmaku, title, watermark
@@ -114,17 +115,32 @@
           : undefined
       }
 
-      var deps = []
       var plugins = [
         OUI({
           keyboard: { global: true },
           slideToSeek: 'always',
           controlBar: { back: 'fullscreen' },
           theme: { watermark },
-          subtitle
+          subtitle,
+          errorBuilder(e, t, builder) {
+            builder({
+              ...e,
+              message:
+                e.message + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose'
+            })
+          }
         })
       ]
 
+      var deps = [
+        [
+          chromecastScriptCdn,
+          () => {
+            plugins.push(OChromecast)
+          }
+        ]
+      ]
+
       if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it))) {
         deps.push([
           hlsScriptCdn,
@@ -179,11 +195,11 @@
           localStorage.setItem('@oplayer/UserPreferences/volume', player.volume.toString())
         })
 
-        player.on('timeupdate', () => {
-          localStorage.setItem(src, player.currentTime.toString())
-        })
-
         if (src) {
+          player.on('timeupdate', () => {
+            localStorage.setItem(src, player.currentTime.toString())
+          })
+
           var prevTime = localStorage.getItem(src)
           if (prevTime) {
             player.on('loadedmetadata', () => {
@@ -197,7 +213,7 @@
           var $op = document.querySelector('#oplayer')
           // not in iframe
           if (window.self == window.top && $op.clientWidth > 960) {
-            $op.firstElementChild.children[1].style.fontSize = $op.clientWidth > 1024 ? '22px' : '20px'
+            $op.firstElementChild.children[1].style.fontSize = $op.clientWidth > 1024 ? '24px' : '20px'
           }
         })
       }

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## UnRelease
+
+- any px -> rem
+- ErrorBuilder custom params
+
 ## [1.2.35]
 
 - release.

diff --git a/packages/ui/src/components/ControllerBottom.style.ts b/packages/ui/src/components/ControllerBottom.style.ts
@@ -124,7 +124,7 @@ export const controllers = $.css({
     {
       width: '2em',
       height: isMobile ? 'auto' : '2em',
-      'margin-right': '6px',
+      'margin-right': '0.5em',
       'justify-content': 'center',
       'align-items': 'center',
       display: 'inline-flex',

diff --git a/packages/ui/src/components/Error.ts b/packages/ui/src/components/Error.ts
@@ -65,7 +65,7 @@ const render = (player: Player, el: HTMLElement, config: UiConfig) => {
 
   const cx = (payload: ErrorPayload) => {
     if (config.errorBuilder) {
-      config.errorBuilder!(payload, $dom, () => show(payload))
+      config.errorBuilder!(payload, $dom, (customPayload: ErrorPayload) => show(customPayload))
     } else {
       show(payload)
     }

diff --git a/packages/ui/src/components/Setting.style.ts b/packages/ui/src/components/Setting.style.ts
@@ -68,10 +68,10 @@ export const switcherCls = $.css({
   '&:before': {
     position: 'absolute',
     content: '""',
-    height: '16px',
-    width: '16px',
-    left: '4px',
-    bottom: '3px',
+    height: '1em',
+    width: '1em',
+    left: '0.25em',
+    bottom: '0.1875em',
     'background-color': 'white',
     transition: '.3s',
     'border-radius': '50%'
@@ -80,8 +80,8 @@ export const switcherCls = $.css({
 
 export const switcherContainer = $.css(`
   position: relative;
-  width: 40px;
-  height: 22px;
+  width: 2.5em;
+  height: 1.375em;
 `)
 
 // `selectedText` >
@@ -117,7 +117,7 @@ export const settingItemCls = $.css({
     [`& .${switcherCls}`]: {
       'background-color': 'var(--primary-color)',
 
-      '&:before': { transform: 'translateX(16px)' }
+      '&:before': { transform: 'translateX(1em)' }
     }
   }
 })

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -165,7 +165,7 @@ export type UiConfig = {
 
   menu?: MenuBar[]
 
-  errorBuilder?: (error: ErrorPayload, target: HTMLDivElement, cb: () => void) => void
+  errorBuilder?: (error: ErrorPayload, target: HTMLDivElement, cb: (error: ErrorPayload) => void) => void
 
   icons?: {
     play?: string