removed comments, simplified vtt elements

suterma · Dec 30, 2023 · fe1cdcc · fe1cdcc
1 parent 5f19a8e
commit fe1cdcc
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 133 deletions.
diff --git a/src/code/api/TrackApi.test.ts b/src/code/api/TrackApi.test.ts
@@ -1,7 +1,4 @@
 import { describe, it, expect } from 'vitest';
-//TODO using the track API breaks tests by throwing an error
-// ReferenceError: AudioNode is not defined
-// when build for testing with vitest
 import { TrackApi } from './TrackApi';
 import { Track } from '@/store/Track';
 import { Cue } from '@/store/Cue';

diff --git a/src/code/api/TrackApi.ts b/src/code/api/TrackApi.ts
@@ -60,9 +60,6 @@ export class TrackApi {
             '//' +
             window.location.host +
             window.location.pathname +
-            //TODO this call currently breaks tests by throwing an error
-            // ReferenceError: AudioNode is not defined
-            // when build for testing with vitest
             router.resolve(route).href
         );
     }

diff --git a/src/code/media/HtmlMediaHandler.ts b/src/code/media/HtmlMediaHandler.ts
@@ -320,17 +320,6 @@ export default class HtmlMediaHandler implements IMediaHandler {
                 this.hasLoadedMetadata = true;
                 this.hasLoadedData = true;
                 this.updateDuration(this._media.duration);
-
-                //Apply the currently known position to the player. It could be non-zero already.
-                // //TODO probably use a specific initalPosition property for this
-                // const position = currentPosition?.value;
-                // if (
-                //     position !== null &&
-                //     position !== undefined &&
-                //     Number.isFinite(position)
-                // ) {
-                //     seekToSeconds(position);
-                // }
             }
         }
 

diff --git a/src/code/media/YoutubeMediaHandler.ts b/src/code/media/YoutubeMediaHandler.ts
@@ -269,7 +269,6 @@ export default class YouTubeMediaHandler implements IMediaHandler {
     /** Sets the media source URL.
      */
     set mediaSourceUrl(url: string) {
-        //TODO implement
         //Only update the media element, when a source is actually available
         //Otherwise the element throws an avoidable error
         if (url) {

diff --git a/src/components/CueButtonsBar.vue b/src/components/CueButtonsBar.vue
@@ -131,14 +131,12 @@ const { selectedCueId, scheduledCueId } = storeToRefs(app);
 /** Determines whether this cue is currently selected
  * @remarks Note: only one cue in a compilation may be selected */
 function isCueSelected(cue: ICue): boolean {
-    //TODO use via provide/inject
     return selectedCueId.value === cue.Id;
 }
 
 /** Determines whether this cue is scheduled
  * @remarks Note: only one cue in a compilation may be scheduled */
 function isCueScheduled(cue: ICue): boolean {
-    //TODO use via provide/inject
     return scheduledCueId.value === cue.Id;
 }
 

diff --git a/src/components/CueButtonsField.vue b/src/components/CueButtonsField.vue
@@ -125,14 +125,12 @@ const { selectedCueId, scheduledCueId } = storeToRefs(app);
 /** Determines whether this cue is currently selected
  * @remarks Note: only one cue in a compilation may be selected */
 function isCueSelected(cue: ICue): boolean {
-    //TODO use via provide/inject
     return selectedCueId.value === cue.Id;
 }
 
 /** Determines whether this cue is scheduled
  * @remarks Note: only one cue in a compilation may be scheduled */
 function isCueScheduled(cue: ICue): boolean {
-    //TODO use via provide/inject
     return scheduledCueId.value === cue.Id;
 }
 

diff --git a/src/components/CueLevelEditors.vue b/src/components/CueLevelEditors.vue
@@ -126,14 +126,12 @@ function cueAdjust(cue: ICue) {
 /** Determines whether this cue is currently selected
  * @remarks Note: only one cue in a compilation may be selected */
 function isCueSelected(cue: ICue): boolean {
-    //TODO use via provide/inject
     return app.selectedCueId === cue.Id;
 }
 
 /** Determines whether this cue is scheduled
  * @remarks Note: only one cue in a compilation may be scheduled */
 function isCueScheduled(cue: ICue): boolean {
-    //TODO use via provide/inject
     return app.scheduledCueId === cue.Id;
 }
 

diff --git a/src/components/track/TrackHeader.vue b/src/components/track/TrackHeader.vue
@@ -329,8 +329,6 @@ const props = defineProps({
     },
 
     /** Whether the media source is available
-     * @remarks For a file: whether the resource is in the media store
-     * @remarks For an URL: //TODO implement
      */
     isTrackMediaAvailable: {
         type: Boolean,

diff --git a/src/components/track/TrackMediaElement.vue b/src/components/track/TrackMediaElement.vue
@@ -136,10 +136,8 @@
         <VideoTextTrackController
             v-model="showVideo"
             v-model:smallVideo="smallVideo"
-            :trackId="trackId"
             :cues="cues"
-            :title="title"
-            :videoElement="mediaElement as HTMLVideoElement"
+            :videoElement="videoElement"
             :disabled="!mediaElement"
         ></VideoTextTrackController>
     </div>
@@ -304,6 +302,13 @@ const audio = useAudioStore();
  */
 const mediaElement: ShallowRef<HTMLMediaElement | null> = shallowRef(null);
 
+/** The mediaElement casted as concrete HTMLVideoElement
+ * @devdoc This allows proper use in the template
+ */
+const videoElement = computed(() => {
+    return mediaElement?.value as HTMLVideoElement | null;
+});
+
 watch(mediaElement, async (newMediaElement, oldMediaElement) => {
     if (oldMediaElement !== null) {
         destroyHandler(oldMediaElement);

diff --git a/src/components/track/VideoTextTrackController.vue b/src/components/track/VideoTextTrackController.vue
@@ -88,7 +88,7 @@ import { type PropType, type Ref, computed, ref, watchEffect } from 'vue';
 import LabeledCheckbox from '@/components/editor/LabeledCheckbox.vue';
 import type { ICue } from '@/store/ICue';
 
-/** A VTT controller, that transforms Replayer cues into
+/** A VTT controller, that toggles video properties and transforms Replayer cues into
  * VTT cues on a VTT track on a video player element
  */
 
@@ -107,19 +107,6 @@ const props = defineProps({
         required: false,
         default: true,
     },
-    /** The title of the track */
-    title: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    /** The track id
-     * @remarks Used to have a unique id on the encapsulated video element
-     */
-    trackId: {
-        type: String,
-        required: true,
-    },
 
     /** The cues to show
      * @remarks The cue descriptions are shown as VTT cues.
@@ -148,8 +135,6 @@ const centerPosition = ref(true);
 
 // --- VTT creation ---
 
-//TODO EXPERIMENTAL: Create VTT track
-
 /** The smallest amount of time that is resolved within the VTT's percision */
 const TemporalEpsilon = 0.001;
 
@@ -247,4 +232,3 @@ watchEffect(() => {
     font-size: 3em;
 }
 </style>
-import type { ICue } from '@/store/ICue';
diff --git a/src/components/track/YoutubeTextTrackController.vue b/src/components/track/YoutubeTextTrackController.vue
@@ -32,52 +32,8 @@
                         </div>
                     </div>
                 </div>
-                <!-- Caption toggler -->
-                <!-- //TODO later implement the youtube captions -->
-                <!-- <div class="level-item has-text-left">
-                    <div class="field is-horizontal">
-                        <div class="field-body">
-                            <div class="field">
-                                <p class="control">
-                                    <LabeledCheckbox
-                                        v-model="showCaptions"
-                                        label="Show cue captions"
-                                    ></LabeledCheckbox>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
-                <!-- Caption size toggler -->
-                <!-- <div class="level-item has-text-left">
-                    <div class="field is-horizontal">
-                        <div class="field-body">
-                            <div class="field">
-                                <p class="control">
-                                    <LabeledCheckbox
-                                        v-model="largeCaptions"
-                                        label="Large cue captions"
-                                    ></LabeledCheckbox>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
-                <!-- Position toggler -->
-                <!-- <div class="level-item has-text-left">
-                    <div class="field is-horizontal">
-                        <div class="field-body">
-                            <div class="field">
-                                <p class="control">
-                                    <LabeledCheckbox
-                                        v-model="centerPosition"
-                                        label="Center"
-                                    ></LabeledCheckbox>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
+                <!-- NOTE: YouTube's TOC do not allow content overlays, 
+                     thus no captions are implemented here -->
             </template>
         </div>
         <div class="level-right"></div>
@@ -89,9 +45,7 @@ import { type PropType, computed } from 'vue';
 import LabeledCheckbox from '@/components/editor/LabeledCheckbox.vue';
 import type { ICue } from '@/store/ICue';
 
-/** A YouTube Text controller, that transforms Replayer cues into
- * on-screen text cues on the video canvas
- * //TODO currently, this only toggles the video
+/** A YouTube controller, that toggles the video properties
  */
 
 const props = defineProps({
@@ -109,35 +63,8 @@ const props = defineProps({
         required: false,
         default: true,
     },
-    /** The title of the track */
-    title: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    /** The track id
-     * @remarks Used to have a unique id on the encapsulated video element
-     */
-    trackId: {
-        type: String,
-        required: true,
-    },
-
-    /** The cues to show
-     * @remarks The cue descriptions are shown as VTT cues.
-     */
-    cues: Array as PropType<Array<ICue>>,
 });
 
-// --- VTT state ---
-
-// const showCaptions = ref(true);
-// const largeCaptions = ref(true);
-
-// --- styling and position (NOTE: VTTRegion is not available on Chrome and other browsers)
-
-//const centerPosition = ref(true);
-
 // --- visibility ---
 
 const emit = defineEmits(['update:modelValue', 'update:smallVideo']);
@@ -159,14 +86,3 @@ const vModelSmallVideo = computed<boolean>({
     },
 });
 </script>
-
-<style>
-/* ::cue {
-    background-color: #00000088;
-}
-::cue(.large) {
-    background-color: #00000088;
-    font-size: 3em;
-} */
-</style>
-import type { ICue } from '@/store/ICue';