gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Refactor <Video> to TypeScript (#34284)

Browse source
This commit is contained in:
Eugen Rochko 2025-03-28 13:15:43 +01:00 • committed by GitHub
parent e28b64ac2d
commit e5fd61a84e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 1219 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/mastodon/features/ui/components/media_modal.jsx
View file

@ -19,7 +19,7 @@ import { GIFV } from 'mastodon/components/gifv';
import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button';
import Footer from 'mastodon/features/picture_in_picture/components/footer';
import Video from 'mastodon/features/video';
import { Video } from 'mastodon/features/video';
import { disableSwiping } from 'mastodon/initial_state';
import { ZoomableImage } from './zoomable_image';
@ -205,9 +205,9 @@ class MediaModal extends ImmutablePureComponent {
height={image.get('height')}
frameRate={image.getIn(['meta', 'original', 'frame_rate'])}
aspectRatio={`${image.getIn(['meta', 'original', 'width'])} / ${image.getIn(['meta', 'original', 'height'])}`}
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/mastodon/features/ui/components/video_modal.jsx
View file

@ -6,7 +6,7 @@ import { connect } from 'react-redux';
import { getAverageFromBlurhash } from 'mastodon/blurhash';
import Footer from 'mastodon/features/picture_in_picture/components/footer';
import Video from 'mastodon/features/video';
import { Video } from 'mastodon/features/video';
const mapStateToProps = (state, { statusId }) => ({
status: state.getIn(['statuses', statusId]),
@ -56,9 +56,9 @@ class VideoModal extends ImmutablePureComponent {
aspectRatio={`${media.getIn(['meta', 'original', 'width'])} / ${media.getIn(['meta', 'original', 'height'])}`}
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/mastodon/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/mastodon/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
}
};