demo: Fix CI namespace error after dependency update

demo/scripts/components/BufferContentGraph.tsx

@@ -121,7 +121,7 @@ export default function BufferContentGraph({
   maximumPosition: number | null | undefined;
   seek: (pos: number) => void;
   type: "audio" | "video" | "text";
-}>): JSX.Element {
+}>): React.JSX.Element {
   const randomColors = useMemo<string[]>(() => shuffleArray(COLORS), []);
   const [tipVisible, setTipVisible] = useState(false);
   const [tipPosition, setTipPosition] = useState(0);

demo/scripts/components/Button.tsx

@@ -19,7 +19,7 @@ function Button({
   value: string;
   disabled: boolean;
   title?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   if (disabled) {
     return (
       <button

demo/scripts/components/CheckBox.tsx

@@ -17,7 +17,7 @@ function Checkbox({
   name: string;
   checked: boolean;
   children?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
       onChange(getCheckBoxValue(evt.target));

demo/scripts/components/FocusedInput.tsx

@@ -20,7 +20,7 @@ function FocusedInput({
   onChange: (newVal: string) => void;
   value?: string;
   placeholder?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const inputEl = useRef<HTMLInputElement>(null);
   useEffect(
     () => {

demo/scripts/components/GenerateLinkButton.tsx

@@ -6,7 +6,7 @@ function GenerateLinkButton({
 }: {
   enabled: boolean;
   onClick: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <button
       aria-label="Generate link for the current custom button"

demo/scripts/components/GenerateLinkURL.tsx

@@ -4,7 +4,11 @@ import * as React from "react";
  * @param {Object} props
  * @returns {Object}
  */
-function GeneratedLinkURL({ url }: { url: string | undefined | null }): JSX.Element {
+function GeneratedLinkURL({
+  url,
+}: {
+  url: string | undefined | null;
+}): React.JSX.Element {
   if (url === undefined || url === null || url === "") {
     return (
       <span>

demo/scripts/components/GitHubButton.tsx

@@ -23,7 +23,7 @@ const GitHubButton = ({
   dataText?: string;
   title?: string;
   children?: React.ReactNode;
-}): JSX.Element => {
+}): React.JSX.Element => {
   const aRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {

demo/scripts/components/Input.tsx

@@ -18,7 +18,7 @@ function Input({
   onChange: (newVal: string) => void;
   value?: string;
   placeholder?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {
       onChange(evt.target.value);

demo/scripts/components/Knob.tsx

@@ -17,7 +17,7 @@ function Knob({
   options: string[];
   selected: { index: number | undefined; value: string | undefined };
   disabled: boolean;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <div className={`knob ${className}`}>
       <span className="knob-name">{name}</span>

demo/scripts/components/LivePosition.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
  * @param {Object} props
  * @returns {Object}
  */
-function LivePosition({ className = "" }: { className?: string }): JSX.Element {
+function LivePosition({ className = "" }: { className?: string }): React.JSX.Element {
   return <div className={"position-infos live " + className}>Live</div>;
 }
 

demo/scripts/components/Options/BufferOptions.tsx

@@ -32,7 +32,7 @@ function BufferOptions({
   onMaxVideoBufferSizeChange: (newVal: number) => void;
   onMaxBufferBehindChange: (newVal: number) => void;
   onMaxBufferAheadChange: (newVal: number) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   /* Value of the `wantedBufferAhead` input */
   const [wantedBufferAheadStr, setWantedBufferAheadStr] = useState(
     String(wantedBufferAhead),

demo/scripts/components/Options/Option.tsx

@@ -9,8 +9,8 @@ function Option({
   children,
 }: {
   title: string;
-  children: JSX.Element;
-}): JSX.Element {
+  children: React.JSX.Element;
+}): React.JSX.Element {
   return (
     <div className="optionWrapper">
       <h4 className="optionTitle">{title}</h4>

demo/scripts/components/Options/Playback.tsx

@@ -15,7 +15,7 @@ function PlaybackConfig({
   onAutoPlayChange: (val: boolean) => void;
   tryRelyOnWorker: boolean;
   onTryRelyOnWorkerChange: (val: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   return (
     <>
       <li>

demo/scripts/components/Options/PlayerOptionNumberInput.tsx

@@ -25,7 +25,7 @@ function PlayerOptionNumberInput({
   defaultValueAsNumber: number;
   isDisabled: boolean;
   onResetClick: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const shouldBeDisabled = parseFloat(valueAsString) === defaultValueAsNumber;
   const onInputChange = React.useCallback(
     (evt: React.ChangeEvent<HTMLInputElement>) => {

demo/scripts/components/Options/RequestConfig.tsx

@@ -47,7 +47,7 @@ function RequestConfig({
   onCmcdChange: (val: string) => void;
   segmentRequestTimeout: number;
   segmentRetry: number;
-}): JSX.Element {
+}): React.JSX.Element {
   /* Value of the `segmentRetry` input */
   const [segmentRetryStr, setSegmentRetryStr] = useState(String(segmentRetry));
   /* Value of the `segmentRequestTimeout` input */

demo/scripts/components/Options/TrackSwitch.tsx

@@ -20,7 +20,7 @@ function TrackSwitchConfig({
   onCodecSwitch: string;
   onCodecSwitchChange: (val: string) => void;
   onEnableFastSwitchingChange: (val: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   let defaultAudioTrackSwitchingModeDescMsg;
   switch (defaultAudioTrackSwitchingMode) {
     case "reload":

demo/scripts/components/Options/VideoAdaptiveSettings.tsx

@@ -25,7 +25,7 @@ function VideoAdaptiveSettings({
   throttleVideoBitrateWhenHidden: boolean;
   onVideoResolutionLimitChange: (newVal: { index: number; value: string }) => void;
   onThrottleVideoBitrateWhenHiddenChange: (newVal: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   let defaultVideoRepresentationsSwitchingModeDescMsg;
   switch (defaultVideoRepresentationsSwitchingMode) {
     case "reload":

demo/scripts/components/PositionInfos.tsx

@@ -15,7 +15,7 @@ function PositionInfos({
   className?: string | undefined;
   position?: number | undefined;
   duration?: number | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const convertTime = duration >= 60 * 60 ? toHours : toMinutes;
   return (
     <div className={"position-infos " + className}>

demo/scripts/components/ProgressBar.tsx

@@ -33,7 +33,7 @@ function ProgressBar({
   maximumPosition: number | null | undefined;
   onMouseMove: (pos: number, evt: React.MouseEvent) => void;
   onMouseOut: (evt: React.MouseEvent) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const usedMinimum = minimumPosition ?? 0;
   const usedMaximum = maximumPosition ?? 300;

demo/scripts/components/Select.tsx

@@ -24,7 +24,7 @@ function Select({
   selected: { index: number | undefined; value: string | undefined };
   options?: string[] | Array<{ name: string; disabled: boolean }>;
   disabled: boolean;
-}): JSX.Element {
+}): React.JSX.Element {
   let selectedIndex = typeof selected.index === "number" ? selected.index : undefined;
 
   const optionsEl = options.map((val, index) => {

demo/scripts/components/StickToLiveEdgeButton.tsx

@@ -6,7 +6,7 @@ function StickToLiveEdgeButton({
 }: {
   isStickingToTheLiveEdge: boolean;
   changeStickToLiveEdge: (newVal: boolean) => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const onClick = React.useCallback(() => {
     changeStickToLiveEdge(!isStickingToTheLiveEdge);
   }, [changeStickToLiveEdge, isStickingToTheLiveEdge]);

demo/scripts/components/ToolTip.tsx

@@ -12,7 +12,7 @@ function ToolTip({
   offset: number;
   text: string;
   xPosition: number;
-}): JSX.Element {
+}): React.JSX.Element {
   const wrapperEl = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (isNaN(+xPosition) || !wrapperEl.current) {

demo/scripts/components/VideoThumbnail.tsx

@@ -26,7 +26,7 @@ export default function VideoThumbnail({
   player: IPlayerModule;
   xPosition: number | null;
   time: number;
-}): JSX.Element {
+}): React.JSX.Element {
   const videoThumbnailLoader = useModuleState(player, "videoThumbnailLoader");
   const videoElement = useModuleState(player, "videoThumbnailsElement");
 

demo/scripts/controllers/ContentList.tsx

@@ -253,7 +253,7 @@ function ContentList({
   loadVideo: (opts: ILoadVideoOptions) => void;
   showOptions: boolean;
   onOptionToggle: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const initialContents = React.useMemo(() => {
     return constructContentList();
   }, []);

demo/scripts/controllers/ErrorDisplayer.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import useModuleState from "../lib/useModuleState";
 import type { IPlayerModule } from "../modules/player/index";
 
-function PlayerError({ error }: { error: Error }): JSX.Element {
+function PlayerError({ error }: { error: Error }): React.JSX.Element {
   const message: string =
     typeof error.message === "string" ? error.message : String(error);
 
@@ -15,7 +15,7 @@ function PlayerError({ error }: { error: Error }): JSX.Element {
   );
 }
 
-function ErrorDisplayer({ player }: { player: IPlayerModule }): JSX.Element {
+function ErrorDisplayer({ player }: { player: IPlayerModule }): React.JSX.Element {
   const error = useModuleState(player, "error");
   return (
     <div className="player-error">{error ? <PlayerError error={error} /> : null}</div>

demo/scripts/controllers/FullScreenButton.tsx

@@ -27,7 +27,7 @@ function FullscreenButton({
   playerWrapperElementRef: { current: HTMLElement | null };
   player: IPlayerModule;
   className: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const hasCurrentContent = useModuleState(player, "hasCurrentContent");
   const isInitiallyFullscreen = useMemo(() => isFullscreen(), []);
   const [isCurrentlyFullScreen, setIsCurrentlyFullScreen] =

demo/scripts/controllers/Main.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import GitHubButton from "../components/GitHubButton";
 import Player from "./Player";
 
-function MainComponent(): JSX.Element {
+function MainComponent(): React.JSX.Element {
   return (
     <React.Fragment>
       <header>

demo/scripts/controllers/PlayPauseButton.tsx

@@ -15,7 +15,7 @@ function PlayPauseButton({
 }: {
   className?: string | undefined;
   player: IPlayerModule;
-}): JSX.Element {
+}): React.JSX.Element {
   const cannotLoadMetadata = useModuleState(player, "cannotLoadMetadata");
   const isPaused = useModuleState(player, "isPaused");
   const isContentLoaded = useModuleState(player, "isContentLoaded");

demo/scripts/controllers/Player.tsx

@@ -23,7 +23,7 @@ const { useCallback, useEffect, useRef, useState } = React;
 // time in ms while seeking/loading/buffering after which the spinner is shown
 const SPINNER_TIMEOUT = 300;
 
-function Player(): JSX.Element {
+function Player(): React.JSX.Element {
   const [
     defaultAudioRepresentationsSwitchingMode,
     setDefaultAudioRepresentationsSwitchingMode,

demo/scripts/controllers/ProgressBar.tsx

@@ -13,7 +13,7 @@ function ProgressBar({
   player: IPlayerModule;
   enableVideoThumbnails: boolean;
   onSeek: () => void;
-}): JSX.Element {
+}): React.JSX.Element {
   const bufferGap = useModuleState(player, "bufferGap");
   const currentTime = useModuleState(player, "currentTime");
   const isContentLoaded = useModuleState(player, "isContentLoaded");
@@ -124,7 +124,7 @@ function ProgressBar({
     );
   }
 
-  let thumbnailElement: JSX.Element | null = null;
+  let thumbnailElement: React.JSX.Element | null = null;
   if (thumbnailIsVisible) {
     const xThumbnailPosition = tipPosition - toolTipOffset;
     if (enableVideoThumbnails && imageTime !== null) {

demo/scripts/controllers/Settings.tsx

@@ -51,7 +51,7 @@ function Settings({
   tryRelyOnWorker: boolean;
   updateTryRelyOnWorker: (tryRelyOnWorker: boolean) => void;
   showOptions: boolean;
-}): JSX.Element | null {
+}): React.JSX.Element | null {
   const {
     videoResolutionLimit,
     maxBufferAhead,

demo/scripts/controllers/VolumeBar.tsx

@@ -15,7 +15,7 @@ function VolumeBar({
   player, // current volume percentage
 }: {
   player: IPlayerModule;
-}): JSX.Element {
+}): React.JSX.Element {
   const { volume, muted } = useModuleState(player, "volumeInfo");
   const elementRef = React.useRef<HTMLDivElement>(null);
 

demo/scripts/controllers/charts/BufferSize.tsx

@@ -60,7 +60,7 @@ const NUMBER_GRID_LINES_HEIGHT = 10;
  * @param {Object} props
  * @returns {Object}
  */
-function BufferSizeChart({ module }: { module: IChartModule }): JSX.Element {
+function BufferSizeChart({ module }: { module: IChartModule }): React.JSX.Element {
   const data = useModuleState(module, "data");
   const canvasEl = useRef<HTMLCanvasElement>(null);
   const canvasCtx = useRef<CanvasRenderingContext2D | null>(null);

demo/scripts/controllers/knobs/AudioRepresentation.tsx

@@ -14,7 +14,7 @@ function AudioRepresentationKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const isAudioRepresentationLocked = useModuleState(
     player,
     "audioRepresentationsLocked",

demo/scripts/controllers/knobs/AudioTrack.tsx

@@ -25,7 +25,7 @@ function AudioTrackKnob({
 }: {
   player: IPlayerModule;
   className?: string | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentAudioTrack = useModuleState(player, "audioTrack");
   const availableAudioTracks = useModuleState(player, "availableAudioTracks");
 

demo/scripts/controllers/knobs/SpeedKnob.tsx

@@ -20,7 +20,7 @@ function SpeedKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const playbackRate = useModuleState(player, "playbackRate");
   let selectedIndex = AVAILABLE_RATES.findIndex((rate) => playbackRate === rate);
 

demo/scripts/controllers/knobs/Subtitles.tsx

@@ -22,7 +22,7 @@ function SubtitlesKnob({
 }: {
   player: IPlayerModule;
   className?: string | undefined;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentSubtitle = useModuleState(player, "subtitle");
   const availableSubtitles = useModuleState(player, "availableSubtitles");
 

demo/scripts/controllers/knobs/VideoRepresentation.tsx

@@ -14,7 +14,7 @@ function VideoRepresentationKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const isVideoRepresentationLocked = useModuleState(
     player,
     "videoRepresentationsLocked",

demo/scripts/controllers/knobs/VideoTrack.tsx

@@ -22,7 +22,7 @@ function VideoTrackKnob({
 }: {
   player: IPlayerModule;
   className?: string;
-}): JSX.Element {
+}): React.JSX.Element {
   const currentVideoTrack = useModuleState(player, "videoTrack");
   const availableVideoTracks = useModuleState(player, "availableVideoTracks");
   const [options, selectedIndex]: [string[], number] = React.useMemo(() => {