Full

package.json

@@ -33,32 +33,33 @@
     "lint": "prettier -w ./packages/*/**/*.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
+    "@babel/core": "^7.24.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-destructuring": "^7.24.5",
-    "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
-    "@babel/plugin-transform-object-rest-spread": "^7.24.5",
-    "@babel/plugin-transform-parameters": "^7.24.5",
-    "@babel/plugin-transform-spread": "^7.24.1",
-    "@babel/plugin-transform-template-literals": "^7.24.1",
-    "@changesets/cli": "^2.27.1",
+    "@babel/plugin-transform-destructuring": "^7.24.6",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.24.6",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.6",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.6",
+    "@babel/plugin-transform-parameters": "^7.24.6",
+    "@babel/plugin-transform-spread": "^7.24.6",
+    "@babel/plugin-transform-template-literals": "^7.24.6",
+    "@changesets/cli": "^2.27.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/node": "^20.12.12",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
-    "nx": "^19.0.4",
+    "lint-staged": "^15.2.4",
+    "nx": "^19.0.7",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.7",
     "terser": "^5.31.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-merge-exports": "^0.0.0",
     "vitest": "^1.6.0"
   },
   "pnpm": {

packages/core/src/index.ts

@@ -3,8 +3,6 @@ export * from './utils/platform'
 export * from './utils/index'
 export * from './utils/script'
 
-export { EVENTS, VIDEO_EVENTS, PLAYER_EVENTS, OH_EVENTS } from './constants'
-
 export { Player } from './player'
 export { Player as default } from './player'
 

packages/dash/src/index.ts

@@ -86,7 +86,8 @@ class DashPlugin implements PlayerPlugin {
     if (!matcher($video, source)) return false
 
     if (!DashPlugin.library) {
-      DashPlugin.library = library ? await loadSDK(library, 'dashjs') : (await import('dashjs')).default
+      DashPlugin.library =
+        globalThis.dashjs || (library ? await loadSDK(library, 'dashjs') : (await import('dashjs')).default)
     }
 
     if (!DashPlugin.library.supportsMediaSource()) return false
@@ -121,8 +122,6 @@ class DashPlugin implements PlayerPlugin {
   }
 }
 
-DashPlugin.library = globalThis.dashjs
-
 function getSettingsByType(instance: MediaPlayerClass, type: 'video', withBitrate?: boolean) {
   const bitrateInfoList = instance.getBitrateInfoListFor(type)
   const isAuto = Boolean(instance.getSettings().streaming?.abr?.autoSwitchBitrate?.video)

packages/docs/package.json

@@ -26,8 +26,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "sass": "^1.77.1"
+    "sass": "^1.77.2"
   }
 }

packages/docs/public/oplayer.css

@@ -0,0 +1,177 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  width: 100svw;
+  height: 100vh;
+  height: 100svh;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -khtml-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+}
+
+a,
+button,
+img {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
+  -webkit-tap-highlight-color: transparent !important;
+}
+
+button {
+  border-radius: 0.35rem !important;
+}
+
+.spinner {
+  animation: spinner 0.9s infinite linear;
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#oplayer {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+video {
+  height: 100% !important;
+  max-width: 100%;
+  object-position: center;
+  object-fit: contain !important;
+}
+
+/* overriding */
+.css-1ftojuw {
+  --primary-color: white !important;
+}
+
+.css-1xk8bpn {
+  width: calc(100% + 5px);
+  margin-left: -2px;
+}
+
+.css-1gyrt30[aria-checked='true'] .css-l3w6ir {
+  background-color: white !important;
+}
+
+#oplayer .css-l3w6ir::before {
+  background-color: black;
+}
+
+#oplayer [aria-label='Setting'],
+#oplayer .playlist,
+#oplayer .css-fy6n4p {
+  border-radius: 1rem;
+  background-color: rgba(0, 0, 0, 0.75);
+  /* backdrop-filter: blur(5px); */
+}
+
+#oplayer [role='menu'] {
+  padding: 0.5rem;
+  min-width: 18rem;
+}
+
+@media (min-width: 640px) {
+  [role='menu'] {
+    min-width: 20rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  [role='menu'] {
+    min-width: 22rem;
+  }
+}
+
+[role='menuitem'] {
+  border-radius: 0.7rem;
+  overflow: hidden;
+  height: 2.8rem;
+}
+
+[role='menuitem'] div {
+  height: 100%;
+}
+
+#oplayer [role='menuitemradio'] {
+  border-radius: 0.5rem;
+  overflow: hidden;
+  justify-content: start !important;
+  gap: 1rem !important;
+  height: 2.8rem;
+  font-size: 0.85rem !important;
+}
+
+[role='menuitemradio'] svg {
+  order: -9999 !important;
+  -ms-flex-order: -9999 !important;
+  display: block !important;
+  opacity: 0;
+}
+
+[role='menuitemradio'][aria-checked='true'] svg {
+  opacity: 1 !important;
+}
+
+[aria-label='Play'][type='button'] {
+  background: transparent !important;
+}
+
+[aria-label='Play'][type='button']::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath fill='white' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10' clip-rule='evenodd' opacity='0.4'/%3E%3Cpath fill='white' d='m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118'/%3E%3C/svg%3E");
+  width: 4rem;
+  height: 4rem;
+  display: block;
+  /* filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  flex-shrink: 0;
+}
+
+@media (min-width: 1280px) {
+  [aria-label='Play'][type='button']::before {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  [aria-label='Screenshot'] {
+    display: none !important;
+  }
+}
+
+#oplayer .playlist-list-item {
+  margin: 0 0.5rem 0.5rem;
+  border-radius: 0.7rem;
+  border: none;
+}
+
+#oplayer .playlist-head {
+  border-bottom: none;
+  background: transparent;
+}
+
+.playlist-list-item-thumb,
+.playlist-list-item-thumb img {
+  border-radius: 0.5rem;
+}
+
+.playlist-back {
+  border-radius: 0.35rem !important;
+}
+
+.css-1y9tj12 {
+  padding-top: 0.5em;
+}