Skip to content

Commit

Permalink
fix: preload playback core change
Browse files Browse the repository at this point in the history
  • Loading branch information
@luwes
luwes committed Sep 29, 2022
1 parent bd49465 commit 15313ea
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 152 deletions.
29 changes: 10 additions & 19 deletions packages/mux-audio-react/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,13 @@ import PropTypes from 'prop-types';
import {
allMediaTypes,
initialize,
type Autoplay,
type UpdateAutoplay,
setupAutoplay,
MuxMediaProps,
StreamTypes,
PlaybackTypes,
toMuxVideoURL,
PlaybackEngine,
generatePlayerInitTime,
} from '@mux/playback-core';
import type { PlaybackCore } from '@mux/playback-core';
import { getPlayerVersion } from './env';

export type Props = Omit<
Expand All @@ -38,23 +35,18 @@ const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>(
src: outerSrc,
children,
autoPlay,
preload,
...restProps
} = props;

const [playerInitTime] = useState(generatePlayerInitTime());

const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);

const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);
const playbackCoreRef = useRef<PlaybackCore | undefined>(undefined);
const innerMediaElRef = useRef<HTMLAudioElement>(null);

const mediaElRef = useCombinedRefs(innerMediaElRef, ref);
const updateAutoplayRef = useRef<UpdateAutoplay | undefined>(undefined);
const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});

useEffect(() => {
const src = toMuxVideoURL(playbackId) ?? outerSrc;
setSrc(src);
setSrc(toMuxVideoURL(playbackId) ?? outerSrc);
}, [outerSrc, playbackId]);

useEffect(() => {
Expand All @@ -66,18 +58,17 @@ const MuxAudio = React.forwardRef<HTMLAudioElement | undefined, Partial<Props>>(
playerSoftwareVersion,
autoplay: autoPlay,
};
const nextPlaybackEngineRef = initialize(propsWithState, mediaElRef.current, playbackEngineRef.current);
playbackEngineRef.current = nextPlaybackEngineRef;
setUpdateAutoplay(() => {
if (!mediaElRef.current) return;
setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current);
});
playbackCoreRef.current = initialize(propsWithState, mediaElRef.current, playbackCoreRef.current);
}, [src]);

useEffect(() => {
updateAutoplay(autoPlay);
playbackCoreRef.current?.setAutoplay(autoPlay);
}, [autoPlay]);

useEffect(() => {
playbackCoreRef.current?.setPreload(preload);
}, [preload]);

return (
/** @TODO Fix types relationships (CJP) */
<audio ref={mediaElRef as typeof innerMediaElRef} {...restProps}>
Expand Down
60 changes: 41 additions & 19 deletions packages/mux-audio/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { globalThis } from 'shared-polyfills';
import {
initialize,
setupAutoplay,
generatePlayerInitTime,
MuxMediaProps,
StreamTypes,
PlaybackTypes,
ValueOf,
toMuxVideoURL,
teardown,
Metadata,
mux,
generatePlayerInitTime,
MediaError,
} from '@mux/playback-core';
import type { PlaybackEngine, UpdateAutoplay, ExtensionMimeTypeMap } from '@mux/playback-core';
import type { PlaybackCore, PlaybackEngine, Autoplay, ExtensionMimeTypeMap } from '@mux/playback-core';
import { getPlayerVersion } from './env';
// this must be imported after playback-core for the polyfill to be included
import CustomAudioElement, { AudioEvents } from './CustomAudioElement';
Expand Down Expand Up @@ -59,11 +57,9 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
return [...AttributeNameValues, ...(CustomAudioElement.observedAttributes ?? [])];
}

// Keeping this named "__hls" since it's exposed for unadvertised "advanced usage" via getter that assumes specifically hls.js (CJP)
protected __hls?: PlaybackEngine;
protected __core?: PlaybackCore;
protected __playerInitTime: number;
protected __metadata: Readonly<Metadata> = {};
protected __updateAutoplay?: UpdateAutoplay;

constructor() {
super();
Expand All @@ -82,8 +78,9 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
return playerSoftwareVersion;
}

// Keeping this named "_hls" since it's exposed for unadvertised "advanced usage" via getter that assumes specifically hls.js (CJP)
get _hls(): PlaybackEngine | undefined {
return this.__hls;
return this.__core?.engine;
}

get mux(): Readonly<HTMLAudioElement['mux']> | undefined {
Expand All @@ -109,6 +106,23 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
}
}

get preload() {
const val = this.getAttribute('preload') as HTMLMediaElement['preload'];
if (val === '') return 'auto';
if (val && ['none', 'metadata', 'auto'].includes(val)) return val;
return super.preload;
}

set preload(val) {
if (val === this.preload) return;

if (val && ['', 'none', 'metadata', 'auto'].includes(val)) {
this.setAttribute('preload', val);
} else {
this.removeAttribute('preload');
}
}

/** @TODO write a generic module for well defined primitive types -> attribute getter/setters/removers (CJP) */
get debug(): boolean {
return this.getAttribute(Attributes.DEBUG) != null;
Expand Down Expand Up @@ -236,23 +250,19 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
}

load() {
const nextHlsInstance = initialize(this as Partial<MuxMediaProps>, this.nativeEl, this.__hls);
this.__hls = nextHlsInstance;
const updateAutoplay = setupAutoplay(this.nativeEl, this.autoplay, nextHlsInstance);
this.__updateAutoplay = updateAutoplay;
this.__core = initialize(this as Partial<MuxMediaProps>, this.nativeEl, this.__core);
}

unload() {
teardown(this.nativeEl, this.__hls);
this.__hls = undefined;
this.__updateAutoplay = undefined;
teardown(this.nativeEl, this.__core);
this.__core = undefined;
}

attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
super.attributeChangedCallback(attrName, oldValue, newValue);

switch (attrName) {
case 'src':
case 'src': {
const hadSrc = !!oldValue;
const hasSrc = !!newValue;
if (!hadSrc && hasSrc) {
Expand All @@ -265,14 +275,25 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
this.load();
}
break;
}
case 'autoplay':
this.__updateAutoplay?.(newValue);
if (newValue === oldValue) {
break;
}
/** In case newValue is an empty string or null, use this.autoplay which translates to booleans (WL) */
this.__core?.setAutoplay(this.autoplay);
break;
case 'preload':
if (newValue === oldValue) {
break;
}
this.__core?.setPreload(this.preload);
break;
case Attributes.PLAYBACK_ID:
/** @TODO Improv+Discuss - how should playback-id update wrt src attr changes (and vice versa) (CJP) */
this.src = toMuxVideoURL(newValue ?? undefined) as string;
break;
case Attributes.DEBUG:
case Attributes.DEBUG: {
const debug = this.debug;
if (!!this.mux) {
/** @TODO Link to docs for a more detailed discussion (CJP) */
Expand All @@ -284,6 +305,7 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa
this._hls.config.debug = debug;
}
break;
}
case Attributes.METADATA_URL:
if (newValue) {
fetch(newValue)
Expand All @@ -304,7 +326,7 @@ class MuxAudioElement extends CustomAudioElement<HTMLAudioElement> implements Pa

type MuxAudioElementType = typeof MuxAudioElement;
declare global {
var MuxAudioElement: MuxAudioElementType;
var MuxAudioElement: MuxAudioElementType; // eslint-disable-line
}

if (!globalThis.customElements.get('mux-audio')) {
Expand Down
26 changes: 10 additions & 16 deletions packages/mux-video-react/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ import PropTypes from 'prop-types';
import {
allMediaTypes,
initialize,
setupAutoplay,
MuxMediaProps,
StreamTypes,
PlaybackTypes,
toMuxVideoURL,
PlaybackEngine,
generatePlayerInitTime,
} from '@mux/playback-core';
import type { PlaybackCore } from '@mux/playback-core';
import { getPlayerVersion } from './env';

export type Props = Omit<
Expand All @@ -36,22 +35,18 @@ const MuxVideo = React.forwardRef<HTMLVideoElement | undefined, Partial<Props>>(
src: outerSrc,
children,
autoPlay,
preload,
...restProps
} = props;

const [playerInitTime] = useState(generatePlayerInitTime());

const [src, setSrc] = useState<MuxMediaProps['src']>(toMuxVideoURL(playbackId) ?? outerSrc);

const playbackEngineRef = useRef<PlaybackEngine | undefined>(undefined);
const playbackCoreRef = useRef<PlaybackCore | undefined>(undefined);
const innerMediaElRef = useRef<HTMLVideoElement>(null);
const [updateAutoplay, setUpdateAutoplay] = useState(() => (x: any) => {});

const mediaElRef = useCombinedRefs(innerMediaElRef, ref);

useEffect(() => {
const src = toMuxVideoURL(playbackId) ?? outerSrc;
setSrc(src);
setSrc(toMuxVideoURL(playbackId) ?? outerSrc);
}, [outerSrc, playbackId]);

useEffect(() => {
Expand All @@ -63,18 +58,17 @@ const MuxVideo = React.forwardRef<HTMLVideoElement | undefined, Partial<Props>>(
playerSoftwareVersion,
autoplay: autoPlay,
};
const nextPlaybackEngineRef = initialize(propsWithState, mediaElRef.current, playbackEngineRef.current);
playbackEngineRef.current = nextPlaybackEngineRef;
setUpdateAutoplay(() => () => {
if (!mediaElRef.current) return;
setupAutoplay(mediaElRef.current, autoPlay, playbackEngineRef.current);
});
playbackCoreRef.current = initialize(propsWithState, mediaElRef.current, playbackCoreRef.current);
}, [src]);

useEffect(() => {
updateAutoplay(autoPlay);
playbackCoreRef.current?.setAutoplay(autoPlay);
}, [autoPlay]);

useEffect(() => {
playbackCoreRef.current?.setPreload(preload);
}, [preload]);

return (
/** @TODO Fix types relationships (CJP) */
<video ref={mediaElRef as typeof innerMediaElRef} {...restProps}>
Expand Down
Loading

0 comments on commit 15313ea

Please sign in to comment.