zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(packages): clean up UI component types and data flow (#479)

Browse Source
This commit is contained in:
rahim
2026-02-09 20:15:26 +11:00
committed by GitHub
parent fef26c8421
commit 5f5ffb9f0a
32 changed files with 681 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/ui/fullscreen-button/fullscreen-button-element.ts
+6 -7
View File
@@ -1,5 +1,5 @@
import type { PropertyValues } from '@lit/reactive-element';
import { FullscreenButtonCore } from '@videojs/core';
import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';
import {
applyElementProps,
applyStateDataAttrs,
@@ -40,7 +40,7 @@ export class FullscreenButtonElement extends MediaElement {
applyElementProps(this, buttonProps, this.#disconnect.signal);
if (!this.#state.value) {
if (__DEV__ && !this.#state.value) {
logMissingFeature(FullscreenButtonElement.tagName, 'fullscreen');
}
}
@@ -59,13 +59,12 @@ export class FullscreenButtonElement extends MediaElement {
protected override update(changed: PropertyValues): void {
super.update(changed);
const state = this.#state.value;
const media = this.#state.value;
if (!state) {
return;
}
if (!media) return;
const state = this.#core.getState(media);
applyElementProps(this, this.#core.getAttrs(state));
applyStateDataAttrs(this, this.#core.getState(state));
applyStateDataAttrs(this, state, FullscreenButtonDataAttrs);
}
}
packages/html/src/ui/mute-button/mute-button-element.ts
+6 -7
View File
@@ -1,5 +1,5 @@
import type { PropertyValues } from '@lit/reactive-element';
import { MuteButtonCore, MuteButtonDataAttributes } from '@videojs/core';
import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';
import {
applyElementProps,
applyStateDataAttrs,
@@ -40,7 +40,7 @@ export class MuteButtonElement extends MediaElement {
applyElementProps(this, buttonProps, this.#disconnect.signal);
if (!this.#state.value) {
if (__DEV__ && !this.#state.value) {
logMissingFeature(MuteButtonElement.tagName, 'volume');
}
}
@@ -59,13 +59,12 @@ export class MuteButtonElement extends MediaElement {
protected override update(changed: PropertyValues): void {
super.update(changed);
const state = this.#state.value;
const media = this.#state.value;
if (!state) {
return;
}
if (!media) return;
const state = this.#core.getState(media);
applyElementProps(this, this.#core.getAttrs(state));
applyStateDataAttrs(this, this.#core.getState(state), MuteButtonDataAttributes);
applyStateDataAttrs(this, state, MuteButtonDataAttrs);
}
}
packages/html/src/ui/play-button/play-button-element.ts
+6 -7
View File
@@ -1,5 +1,5 @@
import type { PropertyValues } from '@lit/reactive-element';
import { PlayButtonCore } from '@videojs/core';
import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';
import {
applyElementProps,
applyStateDataAttrs,
@@ -40,7 +40,7 @@ export class PlayButtonElement extends MediaElement {
applyElementProps(this, buttonProps, this.#disconnect.signal);
if (!this.#state.value) {
if (__DEV__ && !this.#state.value) {
logMissingFeature(PlayButtonElement.tagName, 'playback');
}
}
@@ -59,13 +59,12 @@ export class PlayButtonElement extends MediaElement {
protected override update(changed: PropertyValues): void {
super.update(changed);
const state = this.#state.value;
const media = this.#state.value;
if (!state) {
return;
}
if (!media) return;
const state = this.#core.getState(media);
applyElementProps(this, this.#core.getAttrs(state));
applyStateDataAttrs(this, this.#core.getState(state));
applyStateDataAttrs(this, state, PlayButtonDataAttrs);
}
}
packages/html/src/ui/time/time-element.ts
+10 -13
View File
@@ -1,5 +1,5 @@
import type { PropertyValues } from '@lit/reactive-element';
import { TimeCore, type TimeType } from '@videojs/core';
import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';
import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } from '@videojs/core/dom';
import { playerContext } from '../../player/context';
@@ -33,31 +33,28 @@ export class TimeElement extends MediaElement {
override connectedCallback(): void {
super.connectedCallback();
if (!this.#state.value) {
if (__DEV__ && !this.#state.value) {
logMissingFeature(TimeElement.tagName, 'time');
}
}
protected override willUpdate(changed: PropertyValues): void {
super.willUpdate(changed);
this.#core.setProps({ type: this.type, negativeSign: this.negativeSign, label: this.label });
this.#core.setProps(this);
}
protected override update(changed: PropertyValues): void {
super.update(changed);
const time = this.#state.value;
const media = this.#state.value;
if (!time) {
return;
}
if (!media) return;
const state = this.#core.getState(time);
const showSign = state.type === 'remaining' && state.seconds < 0;
const state = this.#core.getState(media);
if (showSign) {
if (state.negative) {
this.#signSpan.textContent = this.negativeSign;
this.#textNode.textContent = state.text.replace(/^-/, '');
this.#textNode.textContent = state.text;
// Append elements if not already in DOM
if (!this.#signSpan.parentNode) {
@@ -74,7 +71,7 @@ export class TimeElement extends MediaElement {
this.textContent = state.text;
}
applyElementProps(this, this.#core.getAttrs(time));
applyStateDataAttrs(this, state);
applyElementProps(this, this.#core.getAttrs(state));
applyStateDataAttrs(this, state, TimeDataAttrs);
}
}