jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes view once videos in lightbox

This commit is contained in:
Josh Perez 2021-08-24 17:47:14 -04:00 committed by GitHub
parent 425404cd6e
commit 28f5a2bd1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 104 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
stylesheets/_variables.scss
View File

@ -41,6 +41,7 @@ $color-black-alpha-50: rgba($color-black, 0.5);
$color-black-alpha-60: rgba($color-black, 0.6);
$color-black-alpha-70: rgba($color-black, 0.7);
$color-black-alpha-80: rgba($color-black, 0.8);
$color-black-alpha-90: rgba($color-black, 0.9);
$color-ultramarine-dark: #1851b4;
$color-ultramarine-icon: #3a76f0;

2
stylesheets/components/Lightbox.scss
View File

@ -3,7 +3,7 @@
.Lightbox {
&__container {
background-color: $color-black-alpha-80;
background-color: $color-black-alpha-90;
bottom: 0;
display: flex;
flex-direction: column;

16
ts/components/Lightbox.stories.tsx
View File

@ -52,6 +52,7 @@ function createMediaItem(
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
close: action('close'),
i18n,
isViewOnce: Boolean(overrideProps.isViewOnce),
media: overrideProps.media || [],
onSave: action('onSave'),
selectedIndex: number('selectedIndex', overrideProps.selectedIndex || 0),
@ -288,3 +289,18 @@ story.add('Conversation Header', () => (
]}
/>
));
story.add('View Once Video', () => (
<Lightbox
{...createProps({
isViewOnce: true,
media: [
createMediaItem({
contentType: VIDEO_MP4,
objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
}),
],
})}
isViewOnce
/>
));

72
ts/components/Lightbox.tsx
View File

@ -9,9 +9,10 @@ import React, {
useRef,
useState,
} from 'react';
import moment from 'moment';
import classNames from 'classnames';
import moment from 'moment';
import { createPortal } from 'react-dom';
import { noop } from 'lodash';
import * as GoogleChrome from '../util/GoogleChrome';
import { AttachmentType, isGIF } from '../types/Attachment';
@ -20,12 +21,14 @@ import { ConversationType } from '../state/ducks/conversations';
import { IMAGE_PNG, isImage, isVideo } from '../types/MIME';
import { LocalizerType } from '../types/Util';
import { MediaItemType, MessageAttributesType } from '../types/MediaItem';
import { formatDuration } from '../util/formatDuration';
export type PropsType = {
children?: ReactNode;
close: () => void;
getConversation?: (id: string) => ConversationType;
i18n: LocalizerType;
isViewOnce?: boolean;
media: Array<MediaItemType>;
onForward?: (messageId: string) => void;
onSave?: (options: {
@ -42,20 +45,24 @@ export function Lightbox({
getConversation,
media,
i18n,
isViewOnce = false,
onForward,
onSave,
selectedIndex: initialSelectedIndex,
selectedIndex: initialSelectedIndex = 0,
}: PropsType): JSX.Element | null {
const [root, setRoot] = React.useState<HTMLElement | undefined>();
const [selectedIndex, setSelectedIndex] = useState<number>(
initialSelectedIndex || 0
initialSelectedIndex
);
const [previousFocus, setPreviousFocus] = useState<HTMLElement | undefined>();
const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
null
);
const [videoTime, setVideoTime] = useState<number | undefined>();
const [zoomed, setZoomed] = useState(false);
const containerRef = useRef<HTMLDivElement | null>(null);
const focusRef = useRef<HTMLDivElement | null>(null);
const videoRef = useRef<HTMLVideoElement | null>(null);
const restorePreviousFocus = useCallback(() => {
if (previousFocus && previousFocus.focus) {
@ -73,6 +80,13 @@ export function Lightbox({
);
}, [media]);
const onTimeUpdate = useCallback(() => {
if (!videoElement) {
return;
}
setVideoTime(videoElement.currentTime);
}, [setVideoTime, videoElement]);
const handleSave = () => {
const mediaItem = media[selectedIndex];
const { attachment, message, index } = mediaItem;
@ -130,18 +144,17 @@ export function Lightbox({
close();
};
const playVideo = () => {
const video = videoRef.current;
if (!video) {
const playVideo = useCallback(() => {
if (!videoElement) {
return;
}
if (video.paused) {
video.play();
if (videoElement.paused) {
videoElement.play();
} else {
video.pause();
videoElement.pause();
}
};
}, [videoElement]);
useEffect(() => {
const div = document.createElement('div');
@ -176,22 +189,22 @@ export function Lightbox({
}, [onKeyDown]);
useEffect(() => {
// Wait until we're added to the DOM. ConversationView first creates this
// view, then appends its elements into the DOM.
const timeout = window.setTimeout(() => {
playVideo();
playVideo();
if (focusRef && focusRef.current) {
focusRef.current.focus();
}
});
if (focusRef && focusRef.current) {
focusRef.current.focus();
}
return () => {
if (timeout) {
window.clearTimeout(timeout);
}
};
}, [selectedIndex]);
if (videoElement && isViewOnce) {
videoElement.addEventListener('timeupdate', onTimeUpdate);
return () => {
videoElement.removeEventListener('timeupdate', onTimeUpdate);
};
}
return noop;
}, [isViewOnce, onTimeUpdate, playVideo, videoElement]);
const { attachment, contentType, loop = false, objectURL, message } =
media[selectedIndex] || {};
@ -248,14 +261,14 @@ export function Lightbox({
);
}
} else if (isVideoTypeSupported) {
const shouldLoop = loop || isGIF([attachment]);
const shouldLoop = loop || isGIF([attachment]) || isViewOnce;
content = (
<video
className="Lightbox__object"
controls={!shouldLoop}
key={objectURL}
loop={shouldLoop}
ref={videoRef}
ref={setVideoElement}
>
<source src={objectURL} />
</video>
@ -388,6 +401,11 @@ export function Lightbox({
</div>
{!zoomed && (
<div className="Lightbox__footer">
{isViewOnce && videoTime ? (
<div className="Lightbox__timestamp">
{formatDuration(videoTime)}
</div>
) : null}
{caption ? (
<div className="Lightbox__caption">{caption}</div>
) : null}

14
ts/util/lint/exceptions.json
View File

@ -13535,13 +13535,6 @@
"reasonCategory": "usageTrusted",
"updated": "2021-08-23T18:39:37.081Z"
},
{
"rule": "React-useRef",
"path": "ts/components/Lightbox.js",
"line": " const videoRef = react_1.useRef(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-23T18:39:37.081Z"
},
{
"rule": "React-useRef",
"path": "ts/components/Lightbox.tsx",
@ -13556,13 +13549,6 @@
"reasonCategory": "usageTrusted",
"updated": "2021-08-23T18:39:37.081Z"
},
{
"rule": "React-useRef",
"path": "ts/components/Lightbox.tsx",
"line": " const videoRef = useRef<HTMLVideoElement | null>(null);",
"reasonCategory": "usageTrusted",
"updated": "2021-08-23T18:39:37.081Z"
},
{
"rule": "React-createRef",
"path": "ts/components/MainHeader.js",

66
ts/views/conversation_view.ts
View File

@ -2602,7 +2602,19 @@ Whisper.ConversationView = Whisper.View.extend({
contentType: attachment.contentType,
index,
attachment,
message,
message: {
attachments: message.attachments || [],
conversationId:
window.ConversationController.get(
window.ConversationController.ensureContactIds({
uuid: message.sourceUuid,
e164: message.source,
})
)?.id || message.conversationId,
id: message.id,
received_at: message.received_at,
received_at_ms: Number(message.received_at_ms),
},
};
});
})
@ -2652,22 +2664,9 @@ Whisper.ConversationView = Whisper.View.extend({
}
case 'media': {
const selectedIndex = media.findIndex(
mediaMessage => mediaMessage.attachment.path === attachment.path
);
this.lightboxGalleryView = new Whisper.ReactWrapperView({
className: 'lightbox-wrapper',
Component: window.Signal.Components.Lightbox,
props: {
media,
onSave: saveAttachment,
selectedIndex,
},
onClose: () => window.Signal.Backbone.Views.Lightbox.hide(),
});
window.Signal.Backbone.Views.Lightbox.show(
this.lightboxGalleryView.el
);
const selectedMedia =
media.find(item => attachment.path === item.path) || media[0];
this.showLightboxForMedia(selectedMedia, media);
break;
}
@ -2947,12 +2946,25 @@ Whisper.ConversationView = Whisper.View.extend({
const { path, contentType } = tempAttachment;
return {
objectURL: getAbsoluteTempPath(path),
contentType,
onSave: null, // important so download button is omitted
media: [
{
attachment: tempAttachment,
objectURL: getAbsoluteTempPath(path),
contentType,
index: 0,
message: {
attachments: message.get('attachments'),
id: message.get('id'),
conversationId: message.get('conversationId'),
received_at: message.get('received_at'),
received_at_ms: message.get('received_at_ms'),
},
},
],
isViewOnce: true,
};
};
this.lightboxView = new Whisper.ReactWrapperView({
className: 'lightbox-wrapper',
Component: window.Signal.Components.Lightbox,
@ -3044,8 +3056,7 @@ Whisper.ConversationView = Whisper.View.extend({
showLightboxForMedia(
selectedMediaItem: MediaItemType,
media: Array<MediaItemType> = [],
loop = false
media: Array<MediaItemType> = []
) {
const onSave = async (options: WhatIsThis = {}) => {
const fullPath = await window.Signal.Types.Attachment.save({
@ -3071,7 +3082,6 @@ Whisper.ConversationView = Whisper.View.extend({
Component: window.Signal.Components.Lightbox,
props: {
getConversation: getConversationSelector(window.reduxStore.getState()),
loop,
media,
onForward: this.showForwardMessageModal.bind(this),
onSave,
@ -3127,7 +3137,13 @@ Whisper.ConversationView = Whisper.View.extend({
message: {
attachments: message.get('attachments'),
id: message.get('id'),
conversationId: message.get('conversationId'),
conversationId:
window.ConversationController.get(
window.ConversationController.ensureContactIds({
uuid: message.get('sourceUuid'),
e164: message.get('source'),
})
)?.id || message.get('conversationId'),
received_at: message.get('received_at'),
received_at_ms: message.get('received_at_ms'),
},
@ -3140,7 +3156,7 @@ Whisper.ConversationView = Whisper.View.extend({
const selectedMedia =
media.find(item => attachment.path === item.path) || media[0];
this.showLightboxForMedia(selectedMedia, media, loop);
this.showLightboxForMedia(selectedMedia, media);
},
showContactModal(contactId: string) {