refactor(ad): refactor ad and add documentation (#148)

shiyiya · Jan 6, 2025 · 0c72c9d · 0c72c9d
1 parent 3f5c53d
commit 0c72c9d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/examples/standalone/helper.ts b/examples/standalone/helper.ts
@@ -1,7 +1,7 @@
 import { Player } from '@oplayer/core'
 import { MenuBar } from '@oplayer/ui/src/types'
 import { FORMAT_MENU } from './constants'
-import { vttThumbnails, ad } from '@oplayer/plugins'
+import { vttThumbnails, Ad } from '@oplayer/plugins'
 import hls from '@oplayer/hls'
 
 export const register = (player: Player) => {
@@ -35,14 +35,14 @@ export const register = (player: Player) => {
   )
 
   player.applyPlugin(
-    ad({
+    Ad({
       autoplay: false,
       image: 'http://5b0988e595225.cdn.sohucs.com/images/20190420/da316f8038b242c4b34f6db18b0418d4.gif',
       // video: VIDEO_LIST[1],
       duration: 10,
       skipDuration: 5,
       target: 'https://oplayer.vercel.app',
-      plugins: [hls({ qualityControl: false })]
+      plugins: [hls({ qualityControl: false })],
     })
   )
 }
diff --git a/packages/docs/src/pages/docs/plugins/ad.mdx b/packages/docs/src/pages/docs/plugins/ad.mdx
@@ -0,0 +1,22 @@
+## Ad
+
+```jsx
+import Player from '@oplayer/react'
+import ui from '@oplayer/ui'
+import { vttThumbnails } from '@oplayer/plugins'
+
+OPlayer.make('#player').use([ui(),     
+  Ad({
+      autoplay: false,
+      image: 'http://5b0988e595225.cdn.sohucs.com/images/20190420/da316f8038b242c4b34f6db18b0418d4.gif',
+      video: videoSource,
+      duration: 200,
+      skipDuration: 10,
+      target: 'https://oplayer.vercel.app',
+      plugins: [hls({ qualityControl: false })],
+      position:{
+      bottom: "10%",
+      left: "0.3em",
+      },
+      })
+```
diff --git a/packages/docs/src/pages/index.mdx b/packages/docs/src/pages/index.mdx
@@ -126,7 +126,7 @@ import { Playlist, Chromecast, AirPlay } from '@oplayer/plugins'
         ]
       }),
       new Chromecast(),
-      new AirPlay()
+      new AirPlay(),
     ]}
   />
 </div>
diff --git a/packages/plugins/index.ts b/packages/plugins/index.ts
@@ -2,5 +2,7 @@ import Chromecast from './src/chromecast'
 import AirPlay from './src/airplay'
 import vttThumbnails from './src/vttThumbnails'
 import Playlist from './src/playlist'
+import Ad from "./src/ad"
 
-export { Chromecast, AirPlay, vttThumbnails, Playlist }
+
+export { Chromecast, AirPlay, vttThumbnails, Playlist, Ad }
diff --git a/packages/plugins/src/ad.ts b/packages/plugins/src/ad.ts
@@ -4,7 +4,11 @@ const topRight = $.css({
   position: 'absolute',
   right: '0.5em',
   top: '0.5em',
-  'z-index': 1
+  'z-index': 1,
+  display: "flex",
+  gap: "5px",
+  "align-items": "center",
+  "justify-content": "center"
 })
 
 const area = $.css(
@@ -28,7 +32,13 @@ const mute = $.css({
 
 type Options = {
   video?: string
-  image?: string
+  image?: string,
+  position?:{
+    left?: string;
+    bottom?: string;
+    top?: string;
+    right?: string;
+  },
   autoplay?: boolean
   plugins?: PlayerPlugin[]
   skipDuration?: number
@@ -45,10 +55,12 @@ export default ({
   plugins,
   target,
   autoplay,
-  onSkip
+  onSkip,
+  position
 }: Options): PlayerPlugin => ({
   name: 'oplayer-plugin-ad',
   version: __VERSION__,
+  key:"Ad",
   apply: (player) => {
     if (autoplay) {
       bootstrap()
@@ -83,7 +95,18 @@ export default ({
           cursor: 'pointer'
         })}`,
         {},
-        `<div class=${topRight}>
+        `<div class=${position ? 
+          $.css({
+          ...position,   
+          position: 'absolute',
+          'z-index': 1,
+          display: "flex",
+          gap: "5px",
+          "align-items": "center",
+          "justify-content": "center"
+        }) : 
+          topRight
+        }>
             ${
               skipDuration
                 ? `<div class=${area} skipDuration>${player.locales.get(
@@ -98,8 +121,8 @@ export default ({
             ${
               video
                 ? `
-               <div class='${area} ${mute}' volume>
-                <svg width="1em" height="1em" viewBox="0 0 1024 1024" version="1.1">
+              <div class='${area} ${mute}' volume> 
+                <svg width="1em" height="1.5em" viewBox="0 0 1024 1024" version="1.1">
                   <path d="M552.96 152.064v719.872c0 16.118-12.698 29.184-28.365 29.184a67.482 67.482 0 0 1-48.394-20.644L329.359 729.354a74.547 74.547 0 0 0-53.493-22.794H250.47c-104.386 0-189.03-87.101-189.03-194.56s84.644-194.56 189.03-194.56h25.396c20.07 0 39.3-8.192 53.473-22.794L476.18 143.503a67.482 67.482 0 0 1 48.436-20.623c15.646 0 28.344 13.066 28.344 29.184z m216.965 101.58a39.936 39.936 0 0 1 0-57.425 42.25 42.25 0 0 1 58.778 0c178.483 174.408 178.483 457.154 0 631.562a42.25 42.25 0 0 1-58.778 0 39.936 39.936 0 0 1 0-57.405 359.506 359.506 0 0 0 0-516.752zM666.542 373.884a39.731 39.731 0 0 1 0-55.235 37.52 37.52 0 0 1 53.944 0c104.305 106.783 104.305 279.921 0 386.704a37.52 37.52 0 0 1-53.944 0 39.731 39.731 0 0 1 0-55.235c74.486-76.288 74.486-199.946 0-276.234z" />
                 </svg>
               </div>`
@@ -125,7 +148,10 @@ export default ({
           .use(plugins || ([] as any))
           .create()
 
-        $volume!.addEventListener('click', () => {
+        $volume!.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopPropagation(); // Prevent the click event from bubbling to the $container
+
           instance.isMuted ? instance.unmute() : instance.mute()
           $volume!.classList.toggle(mute)
         })