Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Allow user to disable video preview #406

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

✨ Allow user to disable video preview #406

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b7fa640
✨ Allow user to disable video preview
pajowu Dec 9, 2023
ed407ad
✨ Play original file if it's the only source
pajowu Dec 9, 2023
a8f051d
♻️ Cleanup source sorting & only load src after document loaded
pajowu Dec 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions frontend/src/editor/player.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { sortMediaFiles, useAudio } from '../utils/use_audio';
import { minutesInMs } from '../utils/duration_in_ms';
import { formattedTime } from './transcription_editor';
import { IconType } from 'react-icons';
import { BiVideo, BiVideoOff } from 'react-icons/bi';

const DOUBLE_TAP_THRESHOLD_MS = 250;
const SKIP_BUTTON_SEC = 2;
Expand All @@ -42,38 +43,53 @@ export function PlayerBar({

const [playbackRate, setPlaybackRate] = useLocalStorage('playbackRate', 1);

const { sources, hasVideo } = useMemo(() => {
const { videoSources, audioSources, hasVideo } = useMemo(() => {
// do not play the original file, it may be large
const relevantMediaFiles =
let relevantMediaFiles =
data?.media_files.filter((media) => !media.tags.includes('original')) || [];

// but if the original is all we have, better play this than nothing at all
if (
relevantMediaFiles.length == 0 &&
data?.media_files !== undefined &&
data?.media_files.length > 0
) {
relevantMediaFiles = data.media_files;
}
pajowu marked this conversation as resolved.
Show resolved Hide resolved

const videoFiles = relevantMediaFiles.filter((media) => media.tags.includes('video'));
const audioFiles = relevantMediaFiles.filter((media) => !media.tags.includes('video'));

const mappedFiles = [...videoFiles, ...audioFiles].map((media) => {
const mapFile = (media: (typeof relevantMediaFiles)[0]) => {
return {
src: media.url,
type: media.content_type,
};
});
};

const mappedVideoFiles = videoFiles.map(mapFile);
const mappedAudioFiles = audioFiles.map(mapFile);

return {
sources: sortMediaFiles(mappedFiles),
videoSources: sortMediaFiles(mappedVideoFiles),
audioSources: sortMediaFiles(mappedAudioFiles),
hasVideo: videoFiles.length > 0,
};
}, [data?.media_files]);

const [showVideo, setShowVideo] = useState(hasVideo);

const audio = useAudio({
playbackRate,
sources,
videoPreview: hasVideo,
sources: showVideo ? videoSources : audioSources,
videoPreview: showVideo,
});

useEffect(() => {
if (onShowVideo) {
onShowVideo(hasVideo);
onShowVideo(showVideo);
}
}, [hasVideo]);
}, [showVideo]);

// calculate the start of the current element to color it
const [currentElementStartTime, setCurrentElementStartTime] = useState(0.0);
Expand Down Expand Up @@ -207,6 +223,13 @@ export function PlayerBar({
</div>

<PlaybackSpeedDropdown value={playbackRate} onChange={setPlaybackRate} />
{hasVideo && (
<IconButton
icon={showVideo ? BiVideoOff : BiVideo}
label={showVideo ? 'disable video preview' : 'enable video preview'}
onClick={() => setShowVideo(!showVideo)}
/>
)}
</div>
</>
);
Expand Down