66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import type { ElementRef } from '../../lib/teact/teact';
|
|
import { useEffect, useState } from '../../lib/teact/teact';
|
|
import { getActions } from '../../global';
|
|
|
|
import { IS_MOBILE } from '../../util/browser/windowEnvironment';
|
|
import useLastCallback from '../useLastCallback';
|
|
import useOldLang from '../useOldLang';
|
|
|
|
const NOTIFICATION_DURATION = 8000;
|
|
|
|
export default function useUnsupportedMedia(
|
|
ref: ElementRef<HTMLVideoElement>, shouldDisableNotification?: boolean, isDisabled?: boolean,
|
|
) {
|
|
const { showNotification } = getActions();
|
|
const lang = useOldLang();
|
|
const [isUnsupported, setIsUnsupported] = useState(false);
|
|
|
|
const handleUnsupported = useLastCallback(() => {
|
|
setIsUnsupported(true);
|
|
if (shouldDisableNotification) return;
|
|
|
|
showNotification({
|
|
message: IS_MOBILE ? lang('Video.Unsupported.Mobile') : lang('Video.Unsupported.Desktop'),
|
|
duration: NOTIFICATION_DURATION,
|
|
});
|
|
});
|
|
|
|
const onError = useLastCallback((event: Event) => {
|
|
const target = event.currentTarget as HTMLVideoElement;
|
|
const { error } = target;
|
|
if (!error) return;
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code
|
|
if (error.code === 3 || error.code === 4) {
|
|
handleUnsupported();
|
|
}
|
|
});
|
|
|
|
const onCanPlay = useLastCallback((event: Event) => {
|
|
const target = event.currentTarget as HTMLVideoElement;
|
|
|
|
if (!target.videoHeight || !target.videoWidth) {
|
|
handleUnsupported();
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isDisabled) return undefined;
|
|
|
|
const { current } = ref;
|
|
if (!current) {
|
|
return undefined;
|
|
}
|
|
|
|
current.addEventListener('error', onError);
|
|
current.addEventListener('canplay', onCanPlay);
|
|
|
|
return () => {
|
|
current.removeEventListener('error', onError);
|
|
current.removeEventListener('canplay', onCanPlay);
|
|
};
|
|
}, [isDisabled, ref]);
|
|
|
|
return isUnsupported;
|
|
}
|