moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gameboy: add download button

This commit is contained in:
Alex Gleason 2023-11-25 00:25:22 -06:00
parent 509c04dec1
commit c754a52d88
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/gameboy.tsx
View File

@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import { exitFullscreen, isFullscreen, requestFullscreen } from 'soapbox/features/ui/util/fullscreen'; import { exitFullscreen, isFullscreen, requestFullscreen } from 'soapbox/features/ui/util/fullscreen';
import { IconButton } from './ui'; import { HStack, IconButton } from './ui';
let gainNode: GainNode | undefined; let gainNode: GainNode | undefined;
@ -77,6 +77,10 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
} }
}; };
const handleDownload = () => {
window.open(src);
};
useEffect(() => { useEffect(() => {
init(); init();
@ -123,27 +127,38 @@ const Gameboy: React.FC<IGameboy> = ({ className, src, aspect = 'normal', onFocu
{...rest} {...rest}
/> />
<div <HStack
className={clsx('absolute inset-x-0 bottom-0 flex w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', { justifyContent='between'
'opacity-100': showControls, className={clsx('pointer-events-none absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/50 to-transparent p-2 opacity-0 transition-opacity', {
'pointer-events-auto opacity-100': showControls,
})} })}
> >
<IconButton <HStack space={2}>
className='text-white' <IconButton
onClick={togglePaused} className='text-white'
src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} onClick={togglePaused}
/> src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')}
<IconButton />
className='text-white' <IconButton
onClick={toggleMuted} className='text-white'
src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} onClick={toggleMuted}
/> src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')}
<IconButton />
className='ml-auto text-white' </HStack>
onClick={toggleFullscreen}
src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} <HStack space={2}>
/> <IconButton
</div> className='text-white'
src={require('@tabler/icons/download.svg')}
onClick={handleDownload}
/>
<IconButton
className='text-white'
onClick={toggleFullscreen}
src={fullscreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
/>
</HStack>
</HStack>
</div> </div>
); );
}; };