mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
refactor(packages): dry up core, html, and react UI architecture (#699)
This commit is contained in:
@@ -6,7 +6,7 @@ import {
|
||||
type ThumbnailImage,
|
||||
type ThumbnailResizeResult,
|
||||
} from '@videojs/core';
|
||||
import type { ThumbnailHandle } from '@videojs/core/dom';
|
||||
import type { ThumbnailApi } from '@videojs/core/dom';
|
||||
import { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';
|
||||
import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
|
||||
|
||||
@@ -45,7 +45,7 @@ export class ThumbnailElement extends MediaElement {
|
||||
#thumbnails: ThumbnailImage[] = [];
|
||||
#externalThumbnails: ThumbnailImage[] | undefined;
|
||||
#lastTextTrack: MediaTextTrackState | undefined;
|
||||
#handle: ThumbnailHandle | null = null;
|
||||
#api: ThumbnailApi | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -79,7 +79,7 @@ export class ThumbnailElement extends MediaElement {
|
||||
override connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
|
||||
this.#handle = createThumbnail({
|
||||
this.#api = createThumbnail({
|
||||
getContainer: () => this,
|
||||
getImg: () => this.#img,
|
||||
onStateChange: () => this.requestUpdate(),
|
||||
@@ -88,8 +88,8 @@ export class ThumbnailElement extends MediaElement {
|
||||
|
||||
override disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.#handle?.destroy();
|
||||
this.#handle = null;
|
||||
this.#api?.destroy();
|
||||
this.#api = null;
|
||||
}
|
||||
|
||||
protected override update(changed: PropertyValues): void {
|
||||
@@ -119,8 +119,8 @@ export class ThumbnailElement extends MediaElement {
|
||||
fetchpriority: this.fetchPriority,
|
||||
});
|
||||
|
||||
// Track src changes via the handle.
|
||||
this.#handle?.updateSrc(thumbnail?.url);
|
||||
// Track src changes via the thumbnail API.
|
||||
this.#api?.updateSrc(thumbnail?.url);
|
||||
|
||||
if (!thumbnail) {
|
||||
this.#img.removeAttribute('src');
|
||||
@@ -137,14 +137,14 @@ export class ThumbnailElement extends MediaElement {
|
||||
this.#img.src = thumbnail.url;
|
||||
}
|
||||
|
||||
const handle = this.#handle;
|
||||
const state = this.#core.getState(handle?.loading ?? false, handle?.error ?? false, thumbnail);
|
||||
const api = this.#api;
|
||||
const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);
|
||||
applyElementProps(this, this.#core.getAttrs(state));
|
||||
applyStateDataAttrs(this, state, ThumbnailDataAttrs);
|
||||
|
||||
if (handle?.naturalWidth && handle.naturalHeight) {
|
||||
const constraints = handle.readConstraints();
|
||||
const result = this.#core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);
|
||||
if (api?.naturalWidth && api.naturalHeight) {
|
||||
const constraints = api.readConstraints();
|
||||
const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);
|
||||
|
||||
if (result) {
|
||||
this.#applyResize(result);
|
||||
|
||||
Reference in New Issue
Block a user