Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-30 04:03:53 +01:00
Code Issues Projects Releases Wiki Activity

feature (usability): improve usability of pdf and video

Browse source
This commit is contained in:
Mickael Kerjean 2023-04-16 23:02:47 +10:00
parent ab893d9e9c
commit bf507c3f0e
3 changed files with 55 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
client/pages/viewerpage/pdfviewer.js
View file

@ -1,7 +1,7 @@
import React from "react";
import React, { useState, useEffect, useRef } from "react";
import { MenuBar } from "./menubar";
import "./pdfviewer.scss";
import { Bundle } from "../../components/";
import { Bundle, Loader } from "../../components/";
const PDFJSViewer = (props) => (
<Bundle loader={import(/* webpackChunkName: "pdfjs" */"./pdfviewer_lazy")} symbol="PDFJSViewer">
@ -10,17 +10,14 @@ const PDFJSViewer = (props) => (
);
export function PDFViewer({ filename, data }) {
const [isLoading, setIsLoading] = useState()
return (
<div className="component_pdfviewer">
<MenuBar title={filename} download={data} />
<div className="pdfviewer_container">
{
"application/pdf" in navigator.mimeTypes ? (
<embed
src={`${data}#toolbar=0`}
type="application/pdf"
style={{ height: "100%", width: "100%" }}>
</embed>
<PDFEmbedViewer src={data} />
) : (
<PDFJSViewer src={data} />
)
@ -29,3 +26,30 @@ export function PDFViewer({ filename, data }) {
</div>
);
};
function PDFEmbedViewer({ src }) {
const $embed = useRef();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (!$embed.current) return;
const onloadHandler = () => {
setIsLoading(false);
};
$embed.current.addEventListener("load", onloadHandler);
return () => {
$embed.current.removeEventListener("load", onloadHandler);
}
}, [$embed, src]);
return (
<React.Fragment>
{ isLoading && ( <Loader /> ) }
<embed
ref={$embed}
src={`${src}#toolbar=0`}
type="application/pdf"
style={{ height: "100%", width: "100%" }}
/>
</React.Fragment>
);
}

1
client/pages/viewerpage/pdfviewer.scss
View file

@ -12,7 +12,6 @@
width: 100%;
flex-grow: 1;
/* PDFJS */
canvas{
margin: 0 auto;

30
client/pages/viewerpage/videoplayer.js
View file

@ -88,18 +88,36 @@ export function VideoPlayer({ filename, data, path }) {
useEffect(() => {
const resizeHandler = () => setRender(render + 1);
const onKeyPressHandler = (e) => {
if(e.code !== "Space") {
return
switch(e.code) {
case "Space":
case "KeyK": return isPlaying ? onPause(e) : onPlay(e);
case "KeyM": return onVolumeChange(0);
case "ArrowUp": return onVolumeChange(Math.min(volume + 10, 100));
case "ArrowDown": return onVolumeChange(Math.max(volume - 10, 0));
case "ArrowLeft": return onSeek(_currentTime - 5);
case "ArrowRight": return onSeek(_currentTime + 5);
case "KeyL": return onSeek(_currentTime + 10);
case "KeyJ": return onSeek(_currentTime - 10);
case "KeyF": return onRequestFullscreen();
case "Digit0": return onSeek(0);
case "Digit1": return onSeek(duration / 10);
case "Digit2": return onSeek(2 * duration / 10);
case "Digit3": return onSeek(3 * duration / 10);
case "Digit4": return onSeek(4 * duration / 10);
case "Digit5": return onSeek(5 * duration / 10);
case "Digit6": return onSeek(6 * duration / 10);
case "Digit7": return onSeek(7 * duration / 10);
case "Digit8": return onSeek(8 * duration / 10);
case "Digit9": return onSeek(9 * duration / 10);
}
isPlaying ? onPause(e) : onPlay(e);
};
window.addEventListener("resize", resizeHandler);
window.addEventListener("keypress", onKeyPressHandler);
window.addEventListener("keydown", onKeyPressHandler);
return () => {
window.removeEventListener("resize", resizeHandler);
window.removeEventListener("keypress", onKeyPressHandler);
window.removeEventListener("keydown", onKeyPressHandler);
};
}, [render, isPlaying, isChromecast]);
}, [render, isPlaying, isChromecast, volume]);
useEffect(() => {
const context = Chromecast.context();