mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-26 19:25:47 +03: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 { Fragment } from 'preact';
import {
useCallback,
useLayoutEffect,
@ -251,90 +252,104 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) {
></video>
`;
const showInlineDesc = !showOriginal && !isGIF && !!description;
const Container = showInlineDesc ? 'figure' : Fragment;
return (
<Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : ''
}`}
data-orientation={orientation}
data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
// style={{
// backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
// }}
style={!showOriginal && mediaStyles}
onClick={(e) => {
if (hoverAnimate) {
try {
videoRef.current.pause();
} catch (e) {}
}
onClick(e);
}}
onMouseEnter={() => {
if (hoverAnimate) {
try {
videoRef.current.play();
} catch (e) {}
}
}}
onMouseLeave={() => {
if (hoverAnimate) {
try {
videoRef.current.pause();
} catch (e) {}
}
}}
>
{showOriginal || autoGIFAnimate ? (
isGIF && showOriginal ? (
<QuickPinchZoom {...quickPinchZoomProps} enabled>
<Container>
<Parent
class={`media media-${isGIF ? 'gif' : 'video'} ${
autoGIFAnimate ? 'media-contain' : ''
}`}
data-orientation={orientation}
data-formatted-duration={formattedDuration}
data-label={isGIF && !showOriginal && !autoGIFAnimate ? 'GIF' : ''}
// style={{
// backgroundColor:
// rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
// }}
style={!showOriginal && mediaStyles}
onClick={(e) => {
if (hoverAnimate) {
try {
videoRef.current.pause();
} catch (e) {}
}
onClick(e);
}}
onMouseEnter={() => {
if (hoverAnimate) {
try {
videoRef.current.play();
} catch (e) {}
}
}}
onMouseLeave={() => {
if (hoverAnimate) {
try {
videoRef.current.pause();
} catch (e) {}
}
}}
>
{showOriginal || autoGIFAnimate ? (
isGIF && showOriginal ? (
<QuickPinchZoom {...quickPinchZoomProps} enabled>
<div
ref={mediaRef}
dangerouslySetInnerHTML={{
__html: videoHTML,
}}
/>
</QuickPinchZoom>
) : (
<div
ref={mediaRef}
class="video-container"
dangerouslySetInnerHTML={{
__html: videoHTML,
}}
/>
</QuickPinchZoom>
) : (
<div
class="video-container"
dangerouslySetInnerHTML={{
__html: videoHTML,
}}
/>
)
) : 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}
)
) : isGIF ? (
<video
ref={videoRef}
src={url}
poster={previewUrl}
width={width}
height={height}
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') {
const formattedDuration = formatDuration(original.duration);

25
src/components/status.css
View file

@ -654,6 +654,31 @@
width: auto !important;
max-width: 100%;
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 {
display: inline-block;