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

chore: Add todo code comments.

Browse Source
This commit is contained in:
Christian Pillsbury
2025-09-09 07:59:56 -07:00
committed by Christian Pillsbury
parent 77c2932b8d
commit d239f416bd
4 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/html/src/components/media-time-range.ts
+12 -4
View File
@@ -5,6 +5,9 @@ import {
} from '../utils/component-factory';
import { timeRangeStateDefinition } from '@vjs-10/media-store';
/**
* @TODO Should we use a base "range" superclass or just duplicate shared code? (CJP)
**/
export class TimeRangeBase extends HTMLElement {
_state:
| {
@@ -17,6 +20,10 @@ export class TimeRangeBase extends HTMLElement {
constructor() {
super();
/**
* @TODO This is just a simple render function to demonstrate functionality.
* A full implementation will need to implement a "compound component" architecture and likely should use templates. (CJP)
**/
this._input = document.createElement('input');
this._input.type = 'range';
this._input.min = '0';
@@ -48,13 +55,14 @@ export class TimeRangeBase extends HTMLElement {
_update(props: any, state: any) {
this._state = state;
const ratio = state.duration > 0 ? (state.currentTime / state.duration) * 100 : 0;
const ratio =
state.duration > 0 ? (state.currentTime / state.duration) * 100 : 0;
this._input.value = ratio.toString();
this._input.max = '100';
this._input.setAttribute('aria-label', props['aria-label']);
this._input.setAttribute('aria-valuetext', props['aria-valuetext']);
this._input.disabled = props.disabled ?? false;
// Update data attributes for styling
this.setAttribute('data-current-time', props['data-current-time']);
this.setAttribute('data-duration', props['data-duration']);
@@ -92,7 +100,7 @@ export const useTimeRangeProps: PropsHook<{
const currentTimeText = formatTime(state.currentTime);
const durationText = formatTime(state.duration);
const baseProps: Record<string, any> = {
/** data attributes/props */
['data-current-time']: state.currentTime.toString(),
@@ -124,4 +132,4 @@ if (!globalThis.customElements.get('media-time-range')) {
globalThis.customElements.define('media-time-range', TimeRange);
}
export default TimeRange;
export default TimeRange;
packages/html/html/src/components/media-volume-range.ts
+7 -3
View File
@@ -18,6 +18,10 @@ export class VolumeRangeBase extends HTMLElement {
constructor() {
super();
/**
* @TODO This is just a simple render function to demonstrate functionality.
* A full implementation will need to implement a "compound component" architecture and likely should use templates. (CJP)
**/
this._input = document.createElement('input');
this._input.type = 'range';
this._input.min = '0';
@@ -56,7 +60,7 @@ export class VolumeRangeBase extends HTMLElement {
this._input.setAttribute('aria-label', props['aria-label']);
this._input.setAttribute('aria-valuetext', props['aria-valuetext']);
this._input.disabled = props.disabled ?? false;
// Update data attributes for styling
this.setAttribute('data-volume-level', props['data-volume-level']);
this.toggleAttribute('data-muted', props['data-muted']);
@@ -89,7 +93,7 @@ export const useVolumeRangeProps: PropsHook<{
volumeLevel: string;
}> = (state, _element) => {
const displayValue = state.muted ? 0 : state.volume;
const baseProps: Record<string, any> = {
/** data attributes/props */
['data-muted']: state.muted,
@@ -121,4 +125,4 @@ if (!globalThis.customElements.get('media-volume-range')) {
globalThis.customElements.define('media-volume-range', VolumeRange);
}
export default VolumeRange;
export default VolumeRange;
packages/react/react/src/components/TimeRange.tsx
+4
View File
@@ -69,6 +69,10 @@ export const useTimeRangeProps = (
export type useTimeRangeProps = typeof useTimeRangeProps;
type TimeRangeProps = ReturnType<useTimeRangeProps>;
/**
* @TODO This is just a simple render function to demonstrate functionality.
* A full implementation will need to implement a "compound component" architecture. (CJP)
**/
export const renderTimeRange = (
props: TimeRangeProps,
state: TimeRangeState,
packages/react/react/src/components/VolumeRange.tsx
+4
View File
@@ -61,6 +61,10 @@ export const useVolumeRangeProps = (
export type useVolumeRangeProps = typeof useVolumeRangeProps;
type VolumeRangeProps = ReturnType<useVolumeRangeProps>;
/**
* @TODO This is just a simple render function to demonstrate functionality.
* A full implementation will need to implement a "compound component" architecture. (CJP)
**/
export const renderVolumeRange = (
props: VolumeRangeProps,
state: VolumeRangeState,