Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 00:38:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Refactor <Video> to TypeScript

Browse Source 
Port e5fd61a84e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2025-03-28 13:15:43 +01:00
committed by Claire
parent c06527cf5d
commit f19116c430
13 changed files with 1211 additions and 754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/javascript/flavours/glitch/features/alt_text_modal/index.tsx
View File

@@ -30,7 +30,7 @@ import { Skeleton } from 'flavours/glitch/components/skeleton';
import Audio from 'flavours/glitch/features/audio';
import { CharacterCounter } from 'flavours/glitch/features/compose/components/character_counter';
import { Tesseract as fetchTesseract } from 'flavours/glitch/features/ui/util/async-components';
import Video, { getPointerPosition } from 'flavours/glitch/features/video';
import { Video, getPointerPosition } from 'flavours/glitch/features/video';
import { me } from 'flavours/glitch/initial_state';
import type { MediaAttachment } from 'flavours/glitch/models/media_attachment';
import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
@@ -134,17 +134,7 @@ const Preview: React.FC<{
return;
}
const { x, y } = getPointerPosition(nodeRef.current, e);
setDragging(true);
draggingRef.current = true;
onPositionChange([x, y]);
},
[setDragging, onPositionChange],
);
const handleTouchStart = useCallback(
(e: React.TouchEvent) => {
const { x, y } = getPointerPosition(nodeRef.current, e);
const { x, y } = getPointerPosition(nodeRef.current, e.nativeEvent);
setDragging(true);
draggingRef.current = true;
onPositionChange([x, y]);
@@ -165,28 +155,12 @@ const Preview: React.FC<{
}
};
const handleTouchEnd = () => {
setDragging(false);
draggingRef.current = false;
};
const handleTouchMove = (e: TouchEvent) => {
if (draggingRef.current) {
const { x, y } = getPointerPosition(nodeRef.current, e);
onPositionChange([x, y]);
}
};
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('touchend', handleTouchEnd);
document.addEventListener('touchmove', handleTouchMove);
return () => {
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('touchend', handleTouchEnd);
document.removeEventListener('touchmove', handleTouchMove);
};
}, [setDragging, onPositionChange]);
@@ -204,7 +178,6 @@ const Preview: React.FC<{
alt=''
role='presentation'
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
/>
<div
className='focal-point__reticle'
@@ -220,7 +193,6 @@ const Preview: React.FC<{
src={media.get('url') as string}
alt=''
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
/>
<div
className='focal-point__reticle'
@@ -233,10 +205,10 @@ const Preview: React.FC<{
<Video
preview={media.get('preview_url') as string}
frameRate={media.getIn(['meta', 'original', 'frame_rate']) as string}
aspectRatio={`${media.getIn(['meta', 'original', 'width']) as number} / ${media.getIn(['meta', 'original', 'height']) as number}`}
blurhash={media.get('blurhash') as string}
src={media.get('url') as string}
detailed
inline
editable
/>
);