88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
|
/**
|
|||
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|||
|
|
*
|
|||
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|||
|
|
* you may not use this file except in compliance with the License.
|
|||
|
|
* You may obtain a copy of the License at
|
|||
|
|
*
|
|||
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
|
|
*
|
|||
|
|
* Unless required by applicable law or agreed to in writing, software
|
|||
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|||
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
|
|
* See the License for the specific language governing permissions and
|
|||
|
|
* limitations under the License.
|
|||
|
|
*/
|
|||
|
|
import LoadingStateScreen from '@/common/loading/LoadingStateScreen';
|
|||
|
|
import DemoPage from '@/routes/DemoPage';
|
|||
|
|
import stylex from '@stylexjs/stylex';
|
|||
|
|
import {isFirefox} from 'react-device-detect';
|
|||
|
|
|
|||
|
|
const styles = stylex.create({
|
|||
|
|
link: {
|
|||
|
|
textDecorationLine: 'underline',
|
|||
|
|
color: '#A7B3BF',
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const REQUIRED_WINDOW_APIS = ['VideoEncoder', 'VideoDecoder', 'VideoFrame'];
|
|||
|
|
|
|||
|
|
function isBrowserSupported() {
|
|||
|
|
for (const api of REQUIRED_WINDOW_APIS) {
|
|||
|
|
if (!(api in window)) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Test if transferControlToOffscreen is supported. For example, this will
|
|||
|
|
// fail on iOS version < 16.4
|
|||
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
if (typeof canvas.transferControlToOffscreen !== 'function') {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function DemoPageWrapper() {
|
|||
|
|
const isBrowserUnsupported = !isBrowserSupported();
|
|||
|
|
|
|||
|
|
if (isBrowserUnsupported && isFirefox) {
|
|||
|
|
const nightlyUrl = 'https://wiki.mozilla.org/Nightly';
|
|||
|
|
return (
|
|||
|
|
<LoadingStateScreen
|
|||
|
|
title="Sorry Firefox!"
|
|||
|
|
description={
|
|||
|
|
<div>
|
|||
|
|
This version of Firefox doesn’t support the video features we’ll
|
|||
|
|
need to run this demo. You can either update Firefox to the latest
|
|||
|
|
nightly build{' '}
|
|||
|
|
<a
|
|||
|
|
{...stylex.props(styles.link)}
|
|||
|
|
href={nightlyUrl}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noreferrer">
|
|||
|
|
here
|
|||
|
|
</a>
|
|||
|
|
, or try again using Chrome or Safari.
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
linkProps={{to: '..', label: 'Back to homepage'}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isBrowserUnsupported) {
|
|||
|
|
return (
|
|||
|
|
<LoadingStateScreen
|
|||
|
|
title="Uh oh, this browser isn’t supported."
|
|||
|
|
description="This browser doesn’t support the video features we’ll need to run this demo. Try again using Chrome, Safari, or Firefox Nightly."
|
|||
|
|
linkProps={{to: '..', label: 'Back to homepage'}}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return <DemoPage />;
|
|||
|
|
}
|