Spaces:
Runtime error
Runtime error
File size: 3,082 Bytes
92189dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/**
* 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 useListenToStreamingState from '@/common/components/toolbar/useListenToStreamingState';
import useToolbarTabs from '@/common/components/toolbar/useToolbarTabs';
import useVideo from '@/common/components/video/editor/useVideo';
import useVideoEffect from '@/common/components/video/editor/useVideoEffect';
import {EffectIndex} from '@/common/components/video/effects/Effects';
import useScreenSize from '@/common/screen/useScreenSize';
import {
codeEditorOpenedAtom,
isPlayingAtom,
isStreamingAtom,
} from '@/demo/atoms';
import {useAtom, useAtomValue, useSetAtom} from 'jotai';
import {useCallback, useEffect} from 'react';
import DesktopToolbar from './DesktopToolbar';
import MobileToolbar from './MobileToolbar';
import {OBJECT_TOOLBAR_INDEX} from './ToolbarConfig';
export default function Toolbar() {
const [tabIndex, setTabIndex] = useToolbarTabs();
const video = useVideo();
const setIsPlaying = useSetAtom(isPlayingAtom);
const [isStreaming, setIsStreaming] = useAtom(isStreamingAtom);
const codeEditorOpened = useAtomValue(codeEditorOpenedAtom);
const {isMobile} = useScreenSize();
const setEffect = useVideoEffect();
const resetEffects = useCallback(() => {
setEffect('Original', EffectIndex.BACKGROUND, {variant: 0});
setEffect('Overlay', EffectIndex.HIGHLIGHT, {variant: 0});
}, [setEffect]);
const handleStopVideo = useCallback(() => {
if (isStreaming) {
video?.abortStreamMasks();
} else {
video?.pause();
}
}, [video, isStreaming]);
const handleTabChange = useCallback(
(newIndex: number) => {
if (newIndex === OBJECT_TOOLBAR_INDEX) {
handleStopVideo();
resetEffects();
}
setTabIndex(newIndex);
},
[handleStopVideo, resetEffects, setTabIndex],
);
useListenToStreamingState();
useEffect(() => {
function onPlay() {
setIsPlaying(true);
}
function onPause() {
setIsPlaying(false);
}
video?.addEventListener('play', onPlay);
video?.addEventListener('pause', onPause);
return () => {
video?.removeEventListener('play', onPlay);
video?.removeEventListener('pause', onPause);
};
}, [video, resetEffects, setIsStreaming, setIsPlaying]);
if (codeEditorOpened) {
return null;
}
return isMobile ? (
<MobileToolbar tabIndex={tabIndex} onTabChange={handleTabChange} />
) : (
<DesktopToolbar tabIndex={tabIndex} onTabChange={handleTabChange} />
);
}
|