Skip to content

Commit 1e6ae81

Browse files
mathewjordanmathewjordan
authored
Merge pull request #116 from samvera-labs/2625-large-vtt-handling
Improve process and rendering of long WebVTT resources for navigator.
2 parents 9f174c1 + 4b2ddca commit 1e6ae81

File tree

12 files changed

+157
-383
lines changed

12 files changed

+157
-383
lines changed

‎public/fixtures/iiif/manifests/nested-chapters.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"@context": "http://iiif.io/api/presentation/3/context.json",
3-
"id": "https://raw.githubusercontent.com/samvera-labs/clover-iiif/main/public/fixtures/iiif/manifests/sample.json",
3+
"id": "http://127.0.0.1:8080/fixtures/iiif/manifests/nested-chapters.json",
44
"type": "Manifest",
55
"label": {
66
"en": ["Assorted canvases for testing samvera-labs/clover-iiif"]

‎public/fixtures/iiif/manifests/utexas.json‎

Lines changed: 6 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,217 +1,16 @@
11
{
22
"@context": "http://iiif.io/api/presentation/3/context.json",
33
"type": "Manifest",
4-
"id": "https://curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/manifests/3/utlarch_2859d905-c01c-4433-af72-7d602a012aac.json",
4+
"id": "http://127.0.0.1:8080/fixtures/iiif/manifests/utexas.json",
55
"label": {
66
"en": "David Pugh, FAICP Interview, January 6, 2015"
77
},
8-
"metadata": [
9-
{
10-
"label": {
11-
"none": ["Creator/Contributor"]
12-
},
13-
"value": {
14-
"en": [
15-
"Gattis, Dave (Interviewer)| Pugh, David, 1942-2017 (Interviewee)"
16-
]
17-
}
18-
},
19-
{
20-
"label": {
21-
"none": ["Date Created/Date Issued"]
22-
},
23-
"value": {
24-
"en": ["2015-01-06"]
25-
}
26-
},
27-
{
28-
"label": {
29-
"none": ["Owning Repository"]
30-
},
31-
"value": {
32-
"en": [
33-
"Alexander Architectural Archives, University of Texas Libraries, The University of Texas at Austin"
34-
]
35-
}
36-
},
37-
{
38-
"label": {
39-
"none": ["Source Collection Name"]
40-
},
41-
"value": {
42-
"en": [
43-
"American Planning Association, Texas Chapter: The History of Planning in Texas Project Records"
44-
]
45-
}
46-
},
47-
{
48-
"label": {
49-
"none": ["Type"]
50-
},
51-
"value": {
52-
"en": ["moving images| moving image| interviews"]
53-
}
54-
},
55-
{
56-
"label": {
57-
"none": ["Form/Medium"]
58-
},
59-
"value": {
60-
"en": ["moving images"]
61-
}
62-
},
63-
{
64-
"label": {
65-
"none": ["Genre"]
66-
},
67-
"value": {
68-
"en": ["interviews"]
69-
}
70-
},
71-
{
72-
"label": {
73-
"none": ["Language"]
74-
},
75-
"value": {
76-
"en": ["English"]
77-
}
78-
},
79-
{
80-
"label": {
81-
"none": ["Topic"]
82-
},
83-
"value": {
84-
"en": [
85-
"City planning| City planning and redevelopment law.| City planning--Study and teaching.| Trade and professional organizations"
86-
]
87-
}
88-
},
89-
{
90-
"label": {
91-
"none": ["Place Name"]
92-
},
93-
"value": {
94-
"en": [
95-
"Wayne (Mich.)| Bryan (Tex.)| Del City (Okla.)| Raleigh (N.C.)| Southport (N.C.)| Edgecombe County (N.C.)| Buncombe County (N.C.)| Kansas City (Kan.)| Springfield (Mo.)"
96-
]
97-
}
98-
},
99-
{
100-
"label": {
101-
"none": ["Identifier - UTL DAMS PID"]
102-
},
103-
"value": {
104-
"en": ["utlarch:2859d905-c01c-4433-af72-7d602a012aac"]
105-
}
106-
},
107-
{
108-
"label": {
109-
"none": ["Primary Title"]
110-
},
111-
"value": {
112-
"en": ["David Pugh, FAICP Interview, January 6, 2015"]
113-
}
114-
},
115-
{
116-
"label": {
117-
"none": ["Description"]
118-
},
119-
"value": {
120-
"en": [
121-
"Oral history interview with former Texas A&M University professor David Pugh, FAICP, conducted by Dave Gattis. Topics covered include Pugh's childhood and education at the University of Oklahoma, his move to the legal profession, his career as an instructor in planning at Texas A&M University, his time as president of the American Planning Association's Texas chapter, and his opinions on the role of education in the planning profession and the future of city planning."
122-
]
123-
}
124-
},
125-
{
126-
"label": {
127-
"none": ["License"]
128-
},
129-
"value": {
130-
"en": ["http://rightsstatements.org/vocab/InC/1.0/"]
131-
}
132-
},
133-
{
134-
"label": {
135-
"none": ["Identifier - PID"]
136-
},
137-
"value": {
138-
"none": ["utlarch:2859d905-c01c-4433-af72-7d602a012aac"]
139-
}
140-
},
141-
{
142-
"label": {
143-
"none": ["Thumbnail URI"]
144-
},
145-
"value": {
146-
"none": [
147-
"https://curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/TN/utlarch_2859d905-c01c-4433-af72-7d602a012aac.jpg"
148-
]
149-
}
150-
},
151-
{
152-
"label": {
153-
"none": ["IIIF Image"]
154-
},
155-
"value": {
156-
"none": [
157-
"https://streaming.lib.utexas.edu/iiif/_definst_/iiif/mp4:DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/MP4/utlarch_2859d905-c01c-4433-af72-7d602a012aac.mp4/playlist.m3u8"
158-
]
159-
}
160-
},
161-
{
162-
"label": {
163-
"none": ["IIIF Resource"]
164-
},
165-
"value": {
166-
"none": [
167-
"https://streaming.lib.utexas.edu/iiif/_definst_/iiif/mp4:DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/MP4/utlarch_2859d905-c01c-4433-af72-7d602a012aac.mp4/playlist.m3u8"
168-
]
169-
}
170-
},
171-
{
172-
"label": {
173-
"none": ["Date Added"]
174-
},
175-
"value": {
176-
"none": ["2022-01-24"]
177-
}
178-
},
179-
{
180-
"label": {
181-
"none": ["Manifest URI"]
182-
},
183-
"value": {
184-
"none": [
185-
"https://curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/manifests/3/utlarch_2859d905-c01c-4433-af72-7d602a012aac.json"
186-
]
187-
}
188-
}
189-
],
190-
"summary": {
191-
"en": "Oral history interview with former Texas A&M University professor David Pugh, FAICP, conducted by Dave Gattis. Topics covered include Pugh's childhood and education at the University of Oklahoma, his move to the legal profession, his career as an instructor in planning at Texas A&M University, his time as president of the American Planning Association's Texas chapter, and his opinions on the role of education in the planning profession and the future of city planning."
192-
},
193-
"thumbnail": [
194-
{
195-
"id": "https://curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/TN/utlarch_2859d905-c01c-4433-af72-7d602a012aac.jpg",
196-
"type": "Image",
197-
"format": "image/jpeg"
198-
}
199-
],
200-
"rights": "h",
201-
"seeAlso": [
202-
{
203-
"id": "https://curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/CAPTIONS/utlarch_2859d905-c01c-4433-af72-7d602a012aac.vtt",
204-
"type": "Text",
205-
"format": "application/webvtt",
206-
"label": "subtitles"
207-
}
208-
],
2098
"items": [
2109
{
21110
"id": "https://curio.lib.utexas.edu/annotation/curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/manifests/3/utlarch_2859d905-c01c-4433-af72-7d602a012aac/canvas",
21211
"type": "Canvas",
213-
"height": "720 pixels",
214-
"width": "1280 pixels",
12+
"height": 720,
13+
"width": 1280,
21514
"duration": 5412,
21615
"items": [
21716
{
@@ -225,12 +24,12 @@
22524
"body": {
22625
"id": "https://streaming.lib.utexas.edu/iiif/_definst_/iiif/mp4:DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/MP4/utlarch_2859d905-c01c-4433-af72-7d602a012aac.mp4/playlist.m3u8",
22726
"type": "Video",
228-
"height": "720 pixels",
229-
"width": "1280 pixels",
27+
"height": 720,
28+
"width": 1280,
23029
"duration": 5412,
23130
"format": "video/mp4"
23231
},
233-
"target": "https://curio.lib.utexas.edu/annotation/curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/manifests/3/utlarch_2859d905-c01c-4433-af72-7d602a012aac/canvas/page"
32+
"target": "https://curio.lib.utexas.edu/annotation/curio.lib.utexas.edu/assets/DAMS/utlarch/utlarch_2859d905-c01c-4433-af72-7d602a012aac/manifests/3/utlarch_2859d905-c01c-4433-af72-7d602a012aac/canvas"
23433
}
23534
]
23635
}

‎public/fixtures/vtt/nested_chapters.vtt‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,49 @@
11
WEBVTT
22
3+
1
34
00:00:00.000 --> 00:01:24.000
4-
Introduction
5+
this is top level item
56

6-
00:00:00.000 --> 00:00:44.000
7-
Topics (child)
7+
2
8+
00:00:00.000 --> 00:00:43.999
9+
this is secondary and overlaps 1
810

11+
3
912
00:00:10.000 --> 00:00:20.000
10-
More Topics (grandchild)
13+
this is tertiary and overlaps 1 and 2
1114

15+
4
1216
00:00:44.000 --> 00:01:19.000
13-
Presenters (child)
17+
this is secondary and overlaps 1
1418

15-
00:01:24.000 --> 00:05:00.000
16-
Scrolling Effects
19+
5
20+
00:01:24.000 --> 00:04:59.000
21+
this is another top level item
1722

18-
00:01:35.000 --> 00:03:00.000
19-
Achim's Demo
23+
6
24+
00:01:35.000 --> 00:02:59.000
25+
this is secondary and overlaps 5
2026

21-
00:03:00.000 --> 00:05:00.000
22-
Timeline Panel
27+
7
28+
00:03:00.000 --> 00:04:59.000
29+
this is secondary and overlaps 5
2330

24-
00:05:00.000 --> 00:05:05.000
25-
Fin
31+
8
32+
00:05:00.000 --> 00:05:04.999
33+
this is another top level item
2634

35+
9
2736
00:05:02.000 --> 00:05:04.999
28-
Fin Child
37+
this is secondary and overlaps 8
38+
39+
10
40+
00:06:00.000 --> 00:06:04.999
41+
this is another top level item
42+
43+
11
44+
00:06:02.000 --> 00:06:04.999
45+
this is secondary and overlaps 10
46+
47+
12
48+
00:07:00.000 --> 00:07:04.999
49+
this is another top level item

‎src/components/Navigator/Cue.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
22
import { Item } from "@/components/Navigator/Cue.styled";
33
import { convertTime } from "@/services/utils";
4-
import { CurrentTimeContext } from "@/context/current-time-context";
54

65
interface Props {
76
label: string;
@@ -10,11 +9,27 @@ interface Props {
109
}
1110

1211
const Cue: React.FC<Props> = ({ label, start, end }) => {
13-
const { currentTime, updateStartTime } = React.useContext(CurrentTimeContext);
14-
const isActive: boolean = start <= currentTime && currentTime < end;
12+
const [isActive, updateIsActive] = useState(false);
13+
14+
const video = document.getElementById(
15+
"clover-iiif-video",
16+
) as HTMLVideoElement;
17+
18+
useEffect(() => {
19+
video?.addEventListener("timeupdate", () => {
20+
const { currentTime } = video;
21+
updateIsActive(start <= currentTime && currentTime < end);
22+
});
23+
24+
return () => document.removeEventListener("timeupdate", () => {});
25+
}, [video]);
1526

1627
const handleClick = () => {
17-
updateStartTime(start);
28+
if (video) {
29+
video.pause();
30+
video.currentTime = start;
31+
video.play();
32+
}
1833
};
1934

2035
return (

‎src/components/Navigator/Menu.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,19 @@ import { MenuStyled } from "@/components/Navigator/Menu.styled";
66
interface MenuProps {
77
items: Array<NodeWebVttCueNested>;
88
}
9-
109
const Menu: React.FC<MenuProps> = ({ items }) => {
1110
return (
1211
<MenuStyled>
13-
{items.map(({ text, start, end, children: cueChildren, identifier }) => {
12+
{items.map((item) => {
13+
const { text, start, end, children, identifier } = item;
1414
return (
1515
<li key={identifier}>
1616
<Cue label={text} start={start} end={end} />
17-
{cueChildren && <Menu items={cueChildren} />}
17+
{children && <Menu items={children} />}
1818
</li>
1919
);
2020
})}
2121
</MenuStyled>
2222
);
2323
};
24-
2524
export default Menu;

0 commit comments

Comments
 (0)