Load validate-target instead of package

examples/package.json

@@ -8,7 +8,6 @@
 		"test": "echo 'No local tests' && exit 0"
 	},
 	"dependencies": {
-		"validate-target": "^3.1.1",
 		"vlitejs": "../"
 	},
 	"devDependencies": {

package.json

@@ -78,9 +78,6 @@
 		"e2e:ui": "playwright test --ui --config ./config/playwright.config.ts",
 		"test": "echo 'No local tests' && exit 0"
 	},
-	"dependencies": {
-		"validate-target": "^3.1.1"
-	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.4",
 		"@playwright/test": "^1.56.1",

src/components/control-bar/control-bar.ts

@@ -1,6 +1,6 @@
 import './control-bar.css'
 import { formatVideoTime } from 'shared/utils/utils.js'
-import validateTarget from 'validate-target'
+import validateTarget from '../../validate-target.js'
 import TemplateControlBar from './templates/control-bar.js'
 
 export default class ControlBar {
@@ -134,7 +134,7 @@ export default class ControlBar {
 	 * @param e Event data
 	 */
 	onClickOnControlBar(e: Event) {
-		const target = e.target
+		const target = e.target as HTMLElement
 
 		const validateTargetPlayPauseButton = validateTarget({
 			target,

src/core/vlite.ts

@@ -8,7 +8,7 @@ import { initializePlugins, registerPlugin } from 'plugins/plugin.js'
 import { getProviderInstance, registerProvider } from 'providers/provider.js'
 import type { FullScreenSupport, Options } from 'shared/assets/types/types.js'
 import { checkSupportFullScreen, isTouch } from 'shared/utils/utils.js'
-import validateTarget from 'validate-target'
+import validateTarget from '../validate-target.js'
 import Player from './player.js'
 
 export type interfaceDefaultOptions = Record<string, Record<string, any>>
@@ -246,7 +246,7 @@ class Vlitejs {
 	 * @param e Event data
 	 */
 	onDoubleClickOnPlayer(e: Event) {
-		const target = e.target
+		const target = e.target as HTMLElement
 		const validateTargetOverlay = validateTarget({
 			target,
 			selectorString: '.v-overlay',

src/plugins/mobile/mobile.ts

@@ -1,5 +1,5 @@
 import type Player from 'core/player.js'
-import validateTarget from 'validate-target'
+import validateTarget from '../../validate-target.js'
 
 type pluginParameter = {
 	player: Player

src/plugins/subtitle/subtitle.ts

@@ -3,7 +3,7 @@ import svgCheck from 'shared/assets/svgs/check.svg'
 import svgSubtitleOff from 'shared/assets/svgs/subtitle-off.svg'
 import svgSubtitleOn from 'shared/assets/svgs/subtitle-on.svg'
 import type { pluginParameter } from 'shared/assets/types/types.js'
-import validateTarget from 'validate-target'
+import validateTarget from '../../validate-target.js'
 
 /**
  * Vlitejs Subtitle plugin

src/validate-target.ts

@@ -0,0 +1,24 @@
+/**
+ * @link https://github.com/yoriiis/validate-target/blob/main/src/index.ts
+ *
+ * @param {Object} options
+ * @param {HTMLElement} options.target Target element
+ * @param {String} options.selectorString Any valid CSS selector string (class, id, attribute) with Element.matches()
+ * @param {(String|String[])} options.nodeName List of possible nodes name
+ * @returns {Boolean} Is the target valid
+ */
+export default function validateTarget({
+	target,
+	selectorString,
+	nodeName
+}: {
+	target: HTMLElement
+	selectorString: string
+	nodeName: string | string[]
+}): boolean {
+	nodeName = ([] as string[]).concat(nodeName)
+
+	return nodeName.some(
+		(item) => target.nodeName.toLowerCase() === item && target.matches(selectorString)
+	)
+}