Skip to content

Commit df78ed9

Browse files
longshuicylongshuicy
authored
Rewrite previewers (#3)
* audio as placeholder * rewrite audio and video * enable thumbnail previewer * pagination works but needs polish * next page works; not previous page * bug
1 parent 361ec32 commit df78ed9

File tree

11 files changed

+138
-67
lines changed

11 files changed

+138
-67
lines changed

‎src/actions/dataset.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,10 @@ export function receiveDatasets(type, json){
6565
});
6666
};
6767
}
68-
export function fetchDatasets(){
69-
let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=10`;
68+
export function fetchDatasets(when, date, limit="5"){
69+
let url = `${config.hostname}/clowder/api/datasets?superAdmin=true&limit=${limit}`;
70+
if (date) url = `${url}&date=${date}`;
71+
if (when) url = `${url}&when=${when}`;
7072
return (dispatch) => {
7173
return fetch(url, {mode:"cors", headers: getHeader()})
7274
.then((response) => {

‎src/components/App.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ export default function App(props) {
1919
const [fileMetadataList, setFileMetadataList] = useState([]);
2020
const [fileThumbnailList, setFileThumbnailList] = useState([]);
2121
const [datasetThumbnailList, setDatasetThumbnailList] = useState([]);
22+
const [lastDataset, setLastDataset] = useState([]);
23+
const [firstDataset, setFirstDataset] = useState([]);
24+
const [limit, setLimit] = useState(5);
2225

2326
const [paths, setPaths] = useState([]);
2427

@@ -40,11 +43,10 @@ export default function App(props) {
4043

4144
// component did mount
4245
useEffect(() => {
43-
listDatasets();
46+
listDatasets(null, null, limit);
4447
}, []);
4548

4649
useEffect(() => {
47-
4850
(async () => {
4951
if (datasets !== undefined && datasets.length > 0) {
5052

@@ -57,6 +59,11 @@ export default function App(props) {
5759
}
5860
}));
5961
setDatasetThumbnailList(datasetThumbnailListTemp);
62+
63+
// find last and first dataset for pagination
64+
setFirstDataset(datasets[0])
65+
setLastDataset(datasets[datasets.length - 1]);
66+
6067
}
6168
})();
6269
}, [datasets])
@@ -87,6 +94,16 @@ export default function App(props) {
8794
})();
8895
}, [filesInDataset])
8996

97+
const previous = () => {
98+
let date = firstDataset["created"] !== undefined? new Date(firstDataset["created"]) : null;
99+
if (date) listDatasets("b", date.toISOString(), limit);
100+
}
101+
102+
const next = () => {
103+
let date = lastDataset["created"] !== undefined? new Date(lastDataset["created"]) : null;
104+
if (date) listDatasets("a", date.toISOString(), limit);
105+
}
106+
90107
const selectDataset = (selectedDatasetId) => {
91108
// pass that id to dataset component
92109
setSelectedDatasetId(selectedDatasetId);
@@ -173,7 +190,10 @@ export default function App(props) {
173190
(() => {
174191
if (selectedDatasetId === "") {
175192
return <Dashboard datasets={datasets} selectDataset={selectDataset}
176-
thumbnails={datasetThumbnailList}/>
193+
thumbnails={datasetThumbnailList}
194+
previous={previous}
195+
next={next}
196+
/>
177197
} else if (selectedFileId === "") {
178198
return <Dataset files={filesInDataset} selectFile={selectFile}
179199
thumbnails={fileThumbnailList} about={datasetAbout}/>

‎src/components/Dashbard.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState} from "react";
22
import {makeStyles} from "@material-ui/core/styles";
3-
import {AppBar, Box, Link, Divider, Grid, ListItem, Tab, Tabs, Typography} from "@material-ui/core";
3+
import {AppBar, Box, Link, Divider, Grid, ListItem, Tab, Tabs, Typography, Button} from "@material-ui/core";
44
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
55

66
const useStyles = makeStyles((theme) => ({
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({
4242
export default function Dashboard(props) {
4343
const classes = useStyles();
4444

45-
const {datasets, selectDataset, thumbnails, ...other} = props;
45+
const {datasets, selectDataset, thumbnails, previous, next, ...other} = props;
4646

4747
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
4848

@@ -97,6 +97,8 @@ export default function Dashboard(props) {
9797
:
9898
<></>
9999
}
100+
<Button onClick={previous}>Prev</Button>
101+
<Button onClick={next}>Next</Button>
100102
</TabPanel>
101103
<TabPanel value={selectedTabIndex} index={1}></TabPanel>
102104
<TabPanel value={selectedTabIndex} index={2}></TabPanel>

‎src/components/File.jsx‎

Lines changed: 46 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import {AppBar, Box, Divider, Grid, Tab, Tabs, Typography} from "@material-ui/co
44
import {makeStyles} from "@material-ui/core/styles";
55
import {ClowderInput} from "./styledComponents/ClowderInput";
66
import {ClowderButton} from "./styledComponents/ClowderButton";
7+
import Audio from "./previewers/Audio";
8+
import Video from "./previewers/Video";
9+
import {downloadResource} from "../utils/common";
10+
import Thumbnail from "./previewers/Thumbnail";
711

812
const useStyles = makeStyles((theme) => ({
913
appBar: {
@@ -25,47 +29,42 @@ export default function File(props) {
2529
const {fileMetadata, fileExtractedMetadata, fileMetadataJsonld, filePreviews, fileId, ...other} = props;
2630

2731
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
32+
const [previews, setPreviews] = useState([]);
2833

29-
// component did mount
30-
useEffect(() => {
31-
// attach helper jquery
32-
const script = document.createElement("script");
33-
script.src = `../public/clowder/assets/javascripts/previewers/helper.js`;
34-
script.async = true;
35-
document.body.appendChild(script);
36-
return () => {
37-
document.body.removeChild(script);
38-
}
39-
}, []);
34+
// // component did mount
35+
// useEffect(() => {
36+
// // attach helper jquery
37+
// const script = document.createElement("script");
38+
// script.src = `../public/clowder/assets/javascripts/previewers/helper.js`;
39+
// script.async = true;
40+
// document.body.appendChild(script);
41+
// return () => {
42+
// document.body.removeChild(script);
43+
// }
44+
// }, []);
4045

4146
useEffect(() => {
42-
// remove last previewer script attached
43-
const previewerScripts = document.getElementsByClassName("previewer-script");
44-
while (previewerScripts.length > 0) {
45-
previewerScripts[0].parentNode.removeChild(previewerScripts[0]);
46-
}
47+
(async () => {
48+
if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) {
49+
let previewsTemp = [];
50+
await Promise.all(filePreviews[0].previews.map(async (filePreview) => {
51+
// download resources
52+
let Configuration = {};
53+
Configuration.previewType = filePreview["p_id"].replace(" ", "-").toLowerCase();
54+
Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`;
55+
Configuration.fileid = filePreview["pv_id"];
56+
Configuration.previewer = `/public${filePreview["p_path"]}/`;
57+
Configuration.fileType = filePreview["pv_contenttype"];
4758

48-
if (filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined) {
49-
let uniquePid = [];
50-
// look at which previewer to load
51-
filePreviews[0].previews.map((filePreview, index) => {
59+
let resourceURL = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`;
60+
Configuration.resource = await downloadResource(resourceURL);
5261

53-
// do not attach same previewer twice
54-
if (uniquePid.indexOf(filePreview["p_id"]) === -1) {
55-
uniquePid.push(filePreview["p_id"]);
62+
previewsTemp.push(Configuration);
5663

57-
// attach previwer jquery
58-
const script = document.createElement("script");
59-
script.className = "previewer-script";
60-
script.src = `../public${filePreview["p_path"]}/${filePreview["p_main"]}`;
61-
script.async = true;
62-
document.body.appendChild(script);
63-
return () => {
64-
document.body.removeChild(script);
65-
}
66-
}
67-
});
68-
}
64+
}));
65+
setPreviews(previewsTemp);
66+
}
67+
})();
6968
}, [filePreviews]);
7069

7170
const handleTabChange = (event, newTabIndex) => {
@@ -87,27 +86,18 @@ export default function File(props) {
8786
</AppBar>
8887
<TabPanel value={selectedTabIndex} index={0}>
8988
{
90-
filePreviews !== undefined && filePreviews.length > 0 && filePreviews[0].previews !== undefined
91-
?
92-
filePreviews[0].previews.map((filePreview, index) => {
93-
const Configuration = {};
94-
Configuration.tab = `#previewer_${filePreviews[0]["file_id"]}_${index}`;
95-
Configuration.url = `${config.hostname}${filePreview["pv_route"]}?superAdmin=true`;
96-
Configuration.fileid = filePreview["pv_id"];
97-
Configuration.previewer = `/public${filePreview["p_path"]}/`;
98-
Configuration.fileType = filePreview["pv_contenttype"];
99-
Configuration.APIKEY = config.apikey;
100-
Configuration.authenticated = true;
101-
// Configuration.metadataJsonld = fileMetadataJsonld;
102-
103-
let previewId = filePreview["p_id"].replace(" ", "-").toLowerCase();
104-
return (<div className={`configuration ${previewId}`}
105-
data-configuration={JSON.stringify(Configuration)}>
106-
<div id={Configuration.tab.slice(1)}></div>
107-
</div>);
108-
})
109-
:
110-
<></>
89+
previews.map((preview) =>{
90+
if (preview["previewType"] === "audio"){
91+
return <Audio fileId={preview["fileid"]} audioSrc={preview["resource"]} />;
92+
}
93+
else if (preview["previewType"] === "video"){
94+
return <Video fileId={preview["fileid"]} videoSrc={preview["resource"]} />;
95+
}
96+
else if (preview["previewType"] === "thumbnail"){
97+
return <Thumbnail fileId={preview["fileid"]} fileType={preview["fileType"]}
98+
imgSrc={preview["resource"]} />;
99+
}
100+
})
111101
}
112102
</TabPanel>
113103
<TabPanel value={selectedTabIndex} index={1}>

‎src/components/childComponents/BreadCrumb.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const useStyles = makeStyles((theme) => ({
2121
fontWeight: "600",
2222
fontSize: "24px",
2323
color: "#6C757D",
24-
textTransform: "capitalize"
2524
}
2625
}));
2726

‎src/components/previewers/Audio.jsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from "react";
2+
3+
export default function Audio(props) {
4+
const {fileId, audioSrc, ...other} = props;
5+
return <audio controls><source id={fileId} src={audioSrc} /></audio>
6+
}

‎src/components/previewers/Thumbnail.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import { Typography } from "@material-ui/core";
3+
4+
export default function Thumbnail(props){
5+
const {fileId, imgSrc, fileType, ...other} = props;
6+
return (
7+
(() => {
8+
if (fileType === "image/jpeg" || fileType === "image/jpg" || fileType === "image/png"
9+
|| fileType === "image/gif" || fileType === "image/bmp"){
10+
return <img className="rubberbandimage" src={imgSrc} alt="img" id={`rubberbandCanvas-${fileId}`}/>;
11+
}
12+
else if (fileType === "image/tiff"){
13+
return <embed alt="No plugin capable of displaying TIFF images was found."
14+
width={750} height={550} src={imgSrc} type="image/tiff" negative="no" id="embedded" />;
15+
}
16+
else{
17+
return <Typography>ERROR: Unrecognised image format.</Typography>;
18+
}
19+
20+
})()
21+
)
22+
}

‎src/components/previewers/Video.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
3+
export default function Video(props) {
4+
const {fileId, videoSrc, ...other} = props;
5+
return (<video width='100%' id='ourvideo' controls>
6+
<source id={fileId} src={videoSrc}></source>
7+
</video>);
8+
}

‎src/containers/App.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const mapDispatchToProps = (dispatch) => {
4040
listDatasetAbout: (datasetId) => {
4141
dispatch(fetchDatasetAbout(datasetId));
4242
},
43-
listDatasets: () =>{
44-
dispatch(fetchDatasets());
43+
listDatasets: (when, date, limit) =>{
44+
dispatch(fetchDatasets(when, date, limit));
4545
}
4646
};
4747
};

‎src/reducers/dataset.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { RECEIVE_FILES_IN_DATASET, RECEIVE_DATASET_ABOUT, RECEIVE_DATASETS} from "../actions/dataset";
22

3-
const defaultState = {files: []};
3+
const defaultState = {files: [], about: {}, datasets: []};
44

55
const dataset = (state=defaultState, action) => {
66
switch(action.type) {

0 commit comments

Comments
 (0)