Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-24 16:58:47 +01:00
Code Issues Projects Releases Packages Wiki Activity

Experiment show inline desc for videos in timelines

Browse source 
Reason: a video takes more time & effort to watch, so a quick desc would be helpful
This commit is contained in:
Lim Chee Aun 2023-09-14 20:41:03 +08:00
parent 27274eeab1
commit d18db56032
2 changed files with 113 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
src/components/media.jsx
View file

@ -1,4 +1,5 @@
import { getBlurHashAverageColor } from 'fast-blurhash'; import { getBlurHashAverageColor } from 'fast-blurhash';
import { Fragment } from 'preact';
import { import {
useCallback, useCallback,
useLayoutEffect, useLayoutEffect,
@ -251,90 +252,104 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
></video> ></video>
`; `;
const showInlineDesc = !showOriginal && !isGIF && !!description;
const Container = showInlineDesc ? 'figure' : Fragment;
return ( return (
<Parent <Container>
class={`media media-${isGIF ? 'gif' : 'video'} ${ <Parent
autoGIFAnimate ? 'media-contain' : '' class={`media media-${isGIF ? 'gif' : 'video'} ${
}`} autoGIFAnimate ? 'media-contain' : ''
data-orientation={orientation} }`}
data-formatted-duration={formattedDuration} data-orientation={orientation}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''} data-formatted-duration={formattedDuration}
// style={{ data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
// backgroundColor: // style={{
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`, // backgroundColor:
// }} // rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
style={!showOriginal && mediaStyles} // }}
onClick={(e) => { style={!showOriginal && mediaStyles}
if (hoverAnimate) { onClick={(e) => {
try { if (hoverAnimate) {
videoRef.current.pause(); try {
} catch (e) {} videoRef.current.pause();
} } catch (e) {}
onClick(e); }
}} onClick(e);
onMouseEnter={() => { }}
if (hoverAnimate) { onMouseEnter={() => {
try { if (hoverAnimate) {
videoRef.current.play(); try {
} catch (e) {} videoRef.current.play();
} } catch (e) {}
}} }
onMouseLeave={() => { }}
if (hoverAnimate) { onMouseLeave={() => {
try { if (hoverAnimate) {
videoRef.current.pause(); try {
} catch (e) {} videoRef.current.pause();
} } catch (e) {}
}} }
> }}
{showOriginal || autoGIFAnimate ? ( >
isGIF && showOriginal ? ( {showOriginal || autoGIFAnimate ? (
<QuickPinchZoom {...quickPinchZoomProps} enabled> isGIF && showOriginal ? (
<QuickPinchZoom {...quickPinchZoomProps} enabled>
<div
ref={mediaRef}
dangerouslySetInnerHTML={{
__html: videoHTML,
}}
/>
</QuickPinchZoom>
) : (
<div <div
ref={mediaRef} class="video-container"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: videoHTML, __html: videoHTML,
}} }}
/> />
</QuickPinchZoom> )
) : ( ) : isGIF ? (
<div <video
class="video-container" ref={videoRef}
dangerouslySetInnerHTML={{ src={url}
__html: videoHTML, poster={previewUrl}
}}
/>
)
) : isGIF ? (
<video
ref={videoRef}
src={url}
poster={previewUrl}
width={width}
height={height}
data-orientation={orientation}
preload="auto"
// controls
playsinline
loop
muted
/>
) : (
<>
<img
src={previewUrl}
alt={description}
width={width} width={width}
height={height} height={height}
data-orientation={orientation} data-orientation={orientation}
loading="lazy" preload="auto"
// controls
playsinline
loop
muted
/> />
<div class="media-play"> ) : (
<Icon icon="play" size="xl" /> <>
</div> <img
</> src={previewUrl}
alt={description}
width={width}
height={height}
data-orientation={orientation}
loading="lazy"
/>
<div class="media-play">
<Icon icon="play" size="xl" />
</div>
</>
)}
</Parent>
{showInlineDesc && (
<figcaption
onClick={() => {
location.hash = to;
}}
>
{description}
</figcaption>
)} )}
</Parent> </Container>
); );
} else if (type === 'audio') { } else if (type === 'audio') {
const formattedDuration = formatDuration(original.duration); const formattedDuration = formatDuration(original.duration);

25
src/components/status.css
View file

@ -654,6 +654,31 @@
width: auto !important; width: auto !important;
max-width: 100%; max-width: 100%;
display: block; display: block;
figure {
margin: 0;
padding: 0;
figcaption {
margin: -2px 0 0;
padding: 0 4px;
font-size: 90%;
color: var(--text-insignificant-color);
overflow: hidden;
white-space: normal;
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-height: 1.2;
}
}
&:hover figure figcaption {
color: var(--text-color);
}
} }
.status .media-container.media-eq1 .media { .status .media-container.media-eq1 .media {
display: inline-block; display: inline-block;