From d239f416bde6a297029f0b65b62fb586ff8997a8 Mon Sep 17 00:00:00 2001 From: Christian Pillsbury Date: Tue, 9 Sep 2025 07:15:21 -0700 Subject: [PATCH] chore: Add todo code comments. --- .../html/html/src/components/media-time-range.ts | 16 ++++++++++++---- .../html/src/components/media-volume-range.ts | 10 +++++++--- .../react/react/src/components/TimeRange.tsx | 4 ++++ .../react/react/src/components/VolumeRange.tsx | 4 ++++ 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/html/html/src/components/media-time-range.ts b/packages/html/html/src/components/media-time-range.ts index 540fd1ba..9cb679fe 100644 --- a/packages/html/html/src/components/media-time-range.ts +++ b/packages/html/html/src/components/media-time-range.ts @@ -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 = { /** 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; \ No newline at end of file +export default TimeRange; diff --git a/packages/html/html/src/components/media-volume-range.ts b/packages/html/html/src/components/media-volume-range.ts index a039a4d4..bb3b9d5b 100644 --- a/packages/html/html/src/components/media-volume-range.ts +++ b/packages/html/html/src/components/media-volume-range.ts @@ -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 = { /** 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; \ No newline at end of file +export default VolumeRange; diff --git a/packages/react/react/src/components/TimeRange.tsx b/packages/react/react/src/components/TimeRange.tsx index 0e9d59c0..fe597d9c 100644 --- a/packages/react/react/src/components/TimeRange.tsx +++ b/packages/react/react/src/components/TimeRange.tsx @@ -69,6 +69,10 @@ export const useTimeRangeProps = ( export type useTimeRangeProps = typeof useTimeRangeProps; type TimeRangeProps = ReturnType; +/** + * @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, diff --git a/packages/react/react/src/components/VolumeRange.tsx b/packages/react/react/src/components/VolumeRange.tsx index cfddc96a..cd5d54ea 100644 --- a/packages/react/react/src/components/VolumeRange.tsx +++ b/packages/react/react/src/components/VolumeRange.tsx @@ -61,6 +61,10 @@ export const useVolumeRangeProps = ( export type useVolumeRangeProps = typeof useVolumeRangeProps; type VolumeRangeProps = ReturnType; +/** + * @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,