Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-21 14:18:36 +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

8
app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
View File

@@ -19,7 +19,7 @@ import { GIFV } from 'flavours/glitch/components/gifv';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
import Video from 'flavours/glitch/features/video';
import { Video } from 'flavours/glitch/features/video';
import { disableSwiping } from 'flavours/glitch/initial_state';
import { ZoomableImage } from './zoomable_image';
@@ -204,9 +204,9 @@ class MediaModal extends ImmutablePureComponent {
width={image.get('width')}
height={image.get('height')}
frameRate={image.getIn(['meta', 'original', 'frame_rate'])}
currentTime={currentTime || 0}
autoPlay={autoPlay || false}
volume={volume || 1}
startTime={currentTime || 0}
startPlaying={autoPlay || false}
startVolume={volume || 1}
onCloseVideo={onClose}
detailed
alt={description}

8
app/javascript/flavours/glitch/features/ui/components/video_modal.jsx
View File

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import { getAverageFromBlurhash } from 'flavours/glitch/blurhash';
import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
import Video from 'flavours/glitch/features/video';
import { Video } from 'flavours/glitch/features/video';
const mapStateToProps = (state, { statusId }) => ({
status: state.getIn(['statuses', statusId]),
@@ -55,9 +55,9 @@ class VideoModal extends ImmutablePureComponent {
frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
blurhash={media.get('blurhash')}
src={media.get('url')}
currentTime={options.startTime}
autoPlay={options.autoPlay}
volume={options.defaultVolume}
startTime={options.startTime}
startPlaying={options.autoPlay}
startVolume={options.defaultVolume}
onCloseVideo={onClose}
autoFocus
detailed

46
app/javascript/flavours/glitch/features/ui/util/fullscreen.js
View File

@@ -1,46 +0,0 @@
// APIs for normalizing fullscreen operations. Note that Edge uses
// the WebKit-prefixed APIs currently (as of Edge 16).
export const isFullscreen = () => document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement;
export const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
};
export const requestFullscreen = el => {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}
};
export const attachFullscreenListener = (listener) => {
if ('onfullscreenchange' in document) {
document.addEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in document) {
document.addEventListener('webkitfullscreenchange', listener);
} else if ('onmozfullscreenchange' in document) {
document.addEventListener('mozfullscreenchange', listener);
}
};
export const detachFullscreenListener = (listener) => {
if ('onfullscreenchange' in document) {
document.removeEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in document) {
document.removeEventListener('webkitfullscreenchange', listener);
} else if ('onmozfullscreenchange' in document) {
document.removeEventListener('mozfullscreenchange', listener);
}
};

80
app/javascript/flavours/glitch/features/ui/util/fullscreen.ts Normal file
View File

@@ -0,0 +1,80 @@
// APIs for normalizing fullscreen operations. Note that Edge uses
// the WebKit-prefixed APIs currently (as of Edge 16).
interface DocumentWithFullscreen extends Document {
mozFullScreenElement?: Element;
webkitFullscreenElement?: Element;
mozCancelFullScreen?: () => void;
webkitExitFullscreen?: () => void;
}
interface HTMLElementWithFullscreen extends HTMLElement {
mozRequestFullScreen?: () => void;
webkitRequestFullscreen?: () => void;
}
export const isFullscreen = () => {
const d = document as DocumentWithFullscreen;
return !!(
d.fullscreenElement ??
d.webkitFullscreenElement ??
d.mozFullScreenElement
);
};
export const exitFullscreen = () => {
const d = document as DocumentWithFullscreen;
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (d.exitFullscreen) {
void d.exitFullscreen();
} else if (d.webkitExitFullscreen) {
d.webkitExitFullscreen();
} else if (d.mozCancelFullScreen) {
d.mozCancelFullScreen();
}
};
export const requestFullscreen = (el: HTMLElementWithFullscreen | null) => {
if (!el) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (el.requestFullscreen) {
void el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}
};
export const attachFullscreenListener = (listener: () => void) => {
const d = document as DocumentWithFullscreen;
if ('onfullscreenchange' in d) {
d.addEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in d) {
// @ts-expect-error This is valid on some browsers
d.addEventListener('webkitfullscreenchange', listener); // eslint-disable-line @typescript-eslint/no-unsafe-call
} else if ('onmozfullscreenchange' in d) {
// @ts-expect-error This is valid on some browsers
d.addEventListener('mozfullscreenchange', listener); // eslint-disable-line @typescript-eslint/no-unsafe-call
}
};
export const detachFullscreenListener = (listener: () => void) => {
const d = document as DocumentWithFullscreen;
if ('onfullscreenchange' in d) {
d.removeEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in d) {
// @ts-expect-error This is valid on some browsers
d.removeEventListener('webkitfullscreenchange', listener); // eslint-disable-line @typescript-eslint/no-unsafe-call
} else if ('onmozfullscreenchange' in d) {
// @ts-expect-error This is valid on some browsers
d.removeEventListener('mozfullscreenchange', listener); // eslint-disable-line @typescript-eslint/no-unsafe-call
}
};