From 7ab5ae6f1e1a83fcdce62afeaf71adbe6053f834 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 11 Aug 2022 12:20:51 -0500 Subject: [PATCH] MediaItem: convert to TSX+FC --- .../account_gallery/components/media_item.js | Bin 5060 -> 0 bytes .../account_gallery/components/media_item.tsx | 141 ++++++++++++++++++ 2 files changed, 141 insertions(+) delete mode 100644 app/soapbox/features/account_gallery/components/media_item.js create mode 100644 app/soapbox/features/account_gallery/components/media_item.tsx diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js deleted file mode 100644 index fe8c6cc85a64a7491fc33602109946fc45af81e4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5060 zcmbVQZExE)5dNNDaRJ&&USql0%a_a!x^-P)EM1GH#a0Z3OIvizRTedpa%`yn@4F)@ ziISaWoj=*+-NWPEb1$@57g8BmWK8Sd*_vxuD!GQpF66Wj{dgjr&}$`&x4WW|De(8u z&_XNohO>q77>d5PThsNrG;E&nK8}?eih6rUxINfbw^aO@M0;|ccg_j*QD(TPg<1nD zSjar*Xx~1xaHx1%Zc(hhX9YLhTytYYexn;%Em<*_+Y#PL$Xt)K7ijT+&PugndgZ}u zg~k#+ntO>>XNo4>EiZ7lmAy71%cg5~!|&G6Br_8v)GAgW^z_yB!BvEwt>s)~Bzl5J zX#;CkTpMQiTS-yUFab?JVR8v^bppUjBVT81_d+Z$LN~=$Y>=Sm;wTV`24|?13SFSm zOP&gLw^}Ggdiw#I#kZEADPOWOGw{@hFzy*TII)Zcd&Jc6HSn$Bd8*+K>QpCa7a1)U zK!kI|o&a4EuW1Zhtk%e}ivXY&OYrbS=r{bIQXqNghRq%S5UE*RK*RAQFV}Of4#Z{t zs^GczNGrW8^TmN|;Li|wE@jp^`v6TFg&ZcCJ-X7}7h~x!xe;1mI$nTT37wD=bP~n@ zPA3zHRwCsymSqtOB5Ti;C#3b|qxxk^k zl%?j+bHf$FSav%Uv4q$nt>lI)Oaf$WJQ(;h0C-}U!rLZ9=h&hW?jiOSXB+bL|H5Wy zTn!$axhR!FM!pqmLViM53J-5B?zzTgb`|C>mV!wT69=WZDOC=q0o^F(e?>Q9xuKwL zkP0&Tkcd3x+gD5HDaV^G8RCfQcZ7~33JuSD-hY;f#iv8(@MK;ZgY}R|@x;^Ht667gis4Z|Ouh!l!%&@I2X3PFCejsa+bX=_vB>D~qt0uLlXJ|4f94>o!nIP$Wg zghvUe*XC8ry*gAuz%Z66SIA*Uy(UUc={c+GrmZPw_r|YA@aLcT9B5;0{ovi>gm0-@ z0fyq^gX$$St7Mr;sp8m|0edhE;rjuM;JX2R+ZWr9jxG*i#l_9aAcBPocU&>Rojy0* zM&uppV2m&svD)pqHlhoOy-Cdsmh#9}kv>w&^+Jh)8ZyDzxM$p8T(RipOk{`{VRIwz z(>nE2FGl3(!#UDg`bA~_DVMhh+XQ+vg6mJBa9QU#a36^4!!3ln>ryUC{pW#WYy~BP zQ>s}R`m*%})TcYp41;~z?!W(!7`x*bTXG8pKaRagBYKj|I1>nXfP zRt)P+ALqJ1bQd4XDJ{AC{Rz=?)V@X>E2HpHvmd z`QJGDy_VFLWPU-6-|ip6gKD>b_!0K4&gjw~<_YTaonn1=DePO{t$%$6U<^}h2Frdj z*rT!T;Z%)%8QZkGCY@%7wy^uy;2$d5W~8TiCUQ!l=-e~j)f&RHJZ&ep)||T#>lSbv z?vB`|V$(h(CRO{Uh@&-4e#09aBe>elX1<}gmPD=eqFdYs`#J_>{n+-MfB|TA{a%^$ zp#{!?G7Kx7;Onc?COx94gr5t^$^PSJgJ6jIet7RckUTQ9uQ+mgLzSxIseK>!C~X`ssS2JROo3!>*M)uJ zvc*D{xoOK+#}y&v@AV4b@u6HUTemdY-Fwu0cZU1HypHm?7vrP$ML0_N&SxjHGw_qz zKB%o@_Jstsm9*swtQ22Ps&GJa)e78`XcEol8OuLKSb*$+->E%zWnWiOTTBBxkPP*o zCyhghlk{)OVa;v+Md^$MVN>{0@9}d5&Q?|DEP#Hpc*)@qpTH^4qYLolp{I#^U%Ce? rnM$91$Dn48psgxUZG0LQ&#Go7ffFa&&GCrUi5jrmQUss0`;&hGs;n)N diff --git a/app/soapbox/features/account_gallery/components/media_item.tsx b/app/soapbox/features/account_gallery/components/media_item.tsx new file mode 100644 index 0000000000..c113ac5e68 --- /dev/null +++ b/app/soapbox/features/account_gallery/components/media_item.tsx @@ -0,0 +1,141 @@ +import classNames from 'classnames'; +import React, { useState } from 'react'; + +import Blurhash from 'soapbox/components/blurhash'; +import Icon from 'soapbox/components/icon'; +import StillImage from 'soapbox/components/still_image'; +import { useSettings } from 'soapbox/hooks'; +import { isIOS } from 'soapbox/is_mobile'; + +import type { Attachment } from 'soapbox/types/entities'; + +interface IMediaItem { + attachment: Attachment, + displayWidth: number, + onOpenMedia: (attachment: Attachment) => void, +} + +const MediaItem: React.FC = ({ attachment, displayWidth, onOpenMedia }) => { + const settings = useSettings(); + const autoPlayGif = settings.get('autoPlayGif'); + const displayMedia = settings.get('displayMedia'); + + const [visible, setVisible] = useState(displayMedia !== 'hide_all' && !attachment.status?.sensitive || displayMedia === 'show_all'); + + const handleMouseEnter: React.MouseEventHandler = e => { + const video = e.target as HTMLVideoElement; + if (hoverToPlay()) { + video.play(); + } + }; + + const handleMouseLeave: React.MouseEventHandler = e => { + const video = e.target as HTMLVideoElement; + if (hoverToPlay()) { + video.pause(); + video.currentTime = 0; + } + }; + + const hoverToPlay = () => { + return !autoPlayGif && ['gifv', 'video'].indexOf(attachment.type) !== -1; + }; + + const handleClick: React.MouseEventHandler = e => { + if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + e.preventDefault(); + + if (visible) { + onOpenMedia(attachment); + } else { + setVisible(true); + } + } + }; + + const width = `${Math.floor((displayWidth - 4) / 3) - 4}px`; + const height = width; + const status = attachment.get('status'); + const title = status.get('spoiler_text') || attachment.get('description'); + + let thumbnail: React.ReactNode = ''; + let icon; + + if (attachment.type === 'unknown') { + // Skip + } else if (attachment.type === 'image') { + const focusX = Number(attachment.getIn(['meta', 'focus', 'x'])) || 0; + const focusY = Number(attachment.getIn(['meta', 'focus', 'y'])) || 0; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; + + thumbnail = ( + + ); + } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) { + const conditionalAttributes: React.VideoHTMLAttributes = {}; + if (isIOS()) { + conditionalAttributes.playsInline = true; + } + if (autoPlayGif) { + conditionalAttributes.autoPlay = true; + } + thumbnail = ( +
+
+ ); + } else if (attachment.type === 'audio') { + const remoteURL = attachment.remote_url || ''; + const fileExtensionLastIndex = remoteURL.lastIndexOf('.'); + const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase(); + thumbnail = ( +
+ + {fileExtension} +
+ ); + } + + if (!visible) { + icon = ( + + + + ); + } + + return ( + + ); +}; + +export default MediaItem;