Skip to content
This repository was archived by the owner on Sep 4, 2025. It is now read-only.

Commit 29502a9

Browse files
kristianheinkristianhein
committed
2 parents 391e6b6 + 9df5631 commit 29502a9

File tree

3 files changed

+353
-1
lines changed

3 files changed

+353
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
},
7171
"scripts": {
7272
"start": "node scripts/start.js",
73-
"start-samples": "concurrently \"http-server ./ -a localhost -p 3000\" \"npm run start-samples-server\" \"open http://localhost:3000/samples/redaction\"",
73+
"start-samples": "concurrently \"http-server ./ -a localhost -p 3000\" \"npm run start-samples-server\" \"open http://localhost:3000/samples\"",
7474
"start-samples-server": "npm explore @pdftron/media-sample-server -- npm run start",
7575
"start-demo": "DEMO=true node scripts/start.js",
7676
"deploy-demo": "npm run build-demo && firebase deploy --only hosting:webviewer-video && node -e \"console.log('%sMake sure to test demo page in INCOGNITO: https://www.pdftron.com/samples/web/samples/advanced/video/%s', '\\x1b[42;30m', '\\x1b[0m' )\"",

‎samples/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script>
5+
if (window.location.href.slice(-1) !== '/' && window.location.href.slice(-4) !== 'html') {
6+
// hacky redirect for mac php server...
7+
window.location = window.location.href + '/';
8+
}
9+
</script>
10+
<link rel="stylesheet" href="./style.css">
11+
<title>WebViewer Video Samples</title>
12+
</head>
13+
14+
<body class='pdftron'>
15+
<header>
16+
<div class="container">
17+
<div>
18+
<a href="https://pdftron.com" target="_blank">
19+
<div class="logo"></div>
20+
</a>
21+
<span class="title">WebViewer Video</span>
22+
</div>
23+
<div>
24+
<a class="button" href="https://www.pdftron.com/documentation/web/guides/video" target="_blank">Go to Guides</a>
25+
<a class="button filled" href="https://pdftron.com/licensing" target="_blank">Licensing</a>
26+
</div>
27+
</div>
28+
</header>
29+
<section>
30+
<div class="content">
31+
<div>
32+
<h4>Redaction</h4>
33+
<p>
34+
Shows how to setup WebViewer and WebViewer Video to redact video frames and/or audio.
35+
<br/>
36+
</p>
37+
<div class='inline'>
38+
<a href="./redaction/index.html">Launch demo</a>
39+
<a href="https://github.com/PDFTron/webviewer-video-sample/blob/master/samples/redaction/index.js" target="_blank">View Source</a>
40+
</div>
41+
</div>
42+
</div>
43+
</section>
44+
</body>
45+
</html>

‎samples/style.css‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
html {
2+
width: 100%;
3+
height: 100%;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
body {
9+
display: -webkit-box;
10+
display: -ms-flexbox;
11+
display: flex;
12+
width: 100%;
13+
height: 100%;
14+
margin: 0;
15+
padding: 8px;
16+
-webkit-box-sizing: border-box;
17+
box-sizing: border-box;
18+
font-family: Arial, Helvetica, sans-serif;
19+
}
20+
21+
/* Elements in individual sample page */
22+
23+
aside {
24+
display: block;
25+
position: fixed;
26+
margin-top: 52px;
27+
padding: 16px 16px 0 8px;
28+
line-height: 25px;
29+
width: 300px;
30+
height: calc(100% - 76px);
31+
font-size: 0.9em;
32+
overflow-y: auto;
33+
}
34+
35+
aside h1 {
36+
margin-bottom: 0.5em;
37+
font-size: 1.3em;
38+
}
39+
40+
aside h2 {
41+
margin-bottom: 0.3em;
42+
font-size: 1.1em;
43+
}
44+
45+
aside hr {
46+
margin-top: 1em;
47+
}
48+
49+
aside input[type=radio],
50+
aside input[type=checkbox] {
51+
margin-left: 20px;
52+
}
53+
54+
aside .file-formats {
55+
display: flex;
56+
}
57+
58+
aside .file-formats ul {
59+
flex-grow: 1;
60+
}
61+
62+
#viewer {
63+
display: inline-block;
64+
width: calc(100% - 330px);
65+
height: calc(100% - 60px);
66+
margin-top: 60px;
67+
margin-left: 330px;
68+
-webkit-box-shadow: 1px 1px 10px #999;
69+
box-shadow: 1px 1px 10px #999;
70+
}
71+
72+
/* Header element in all pages */
73+
74+
header {
75+
position: fixed;
76+
left: 0;
77+
top: 0;
78+
width: 100vw;
79+
height: 60px;
80+
padding: 8px;
81+
-webkit-box-sizing: border-box;
82+
box-sizing: border-box;
83+
background: #00a5e4;
84+
}
85+
86+
header .container {
87+
width: 100%;
88+
height: 100%;
89+
-webkit-box-sizing: border-box;
90+
box-sizing: border-box;
91+
min-width: 900px;
92+
max-width: 1200px;
93+
margin: 0 auto;
94+
padding: 0 10px;
95+
}
96+
97+
header .container > div:first-child {
98+
float: left;
99+
}
100+
101+
header .container > div:first-child > a {
102+
display: inline-block;
103+
width: 242px;
104+
height: 44px;
105+
}
106+
107+
header .container > div:last-child {
108+
float: right;
109+
height: 44px;
110+
}
111+
112+
header .title {
113+
color: white;
114+
font-size: 1.7em;
115+
line-height: 44px;
116+
margin-left: 8px;
117+
float: right;
118+
}
119+
120+
header .title.sample {
121+
font-size: 1.2em;
122+
float: left;
123+
overflow: hidden;
124+
text-overflow: ellipsis;
125+
white-space: nowrap;
126+
max-width: calc(100% - 52px);
127+
}
128+
129+
header .button {
130+
display: inline-block;
131+
padding: 12px 17px;
132+
margin: 0 10px;
133+
color: white;
134+
text-decoration: none;
135+
border: 1px solid white;
136+
border-radius: 5px;
137+
}
138+
139+
header .button.filled {
140+
background: white;
141+
color: #00a5e4;
142+
}
143+
144+
header .logo {
145+
display: block;
146+
width: 160px;
147+
height: 100%;
148+
margin-right: 82px;
149+
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDgiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0MDggNDQiPiAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTM5My4xNywwLjQgTDM5My4xNywzMiBDMzkzLjE3LDMyLjYgMzkyLjkxLDMzLjEgMzkyLjQxLDMzLjUgQzM5MS44OSwzMy44IDM5MS4yOSwzNCAzOTAuNTgsMzQgQzM5MC4wMSwzNCAzODkuNDUsMzMuOSAzODguOSwzMy43IEMzODguMzcsMzMuNSAzODcuOTMsMzMuMSAzODcuNiwzMi43IEMzODYuNDIsMzEgMzg0LjU1LDI2LjcgMzgyLDE5LjkgQzM3OS43LDEzLjYgMzc3LjI3LDkuMSAzNzQuNzIsNi4zIEMzNzAuODgsMi4xIDM2NS43NSwzLjYzNzk3ODgxZS0xMiAzNTkuMzIsMy42Mzc5Nzg4MWUtMTIgQzM1NC41MSwzLjYzNzk3ODgxZS0xMiAzNTAuNTQsMC43IDM0Ny40NCwyIEMzNDMuODcsMy43IDM0Mi4wNyw2IDM0Mi4wNyw5LjEgTDM0Mi4wNyw0Mi44IEwzNTYuNDgsNDIuOCBMMzU2LjQ4LDExLjIgQzM1Ni40OCwxMC42IDM1Ni42NSwxMC4yIDM1Ni45OSw5LjggQzM1Ny4zMiw5LjUgMzU3Ljk2LDkuMyAzNTguODgsOS4xIEMzNjAuMjUsOSAzNjIuMDEsMTAuOCAzNjQuMTQsMTQuNiBDMzY1LjY1LDE3LjIgMzY3LjQ2LDIxLjEgMzY5LjYxLDI2LjIgQzM3MS45LDMxLjYgMzczLjE5LDM0LjYgMzczLjQ4LDM1LjEgQzM3NC44OCwzNy45IDM3Ny4zLDQwIDM4MC43MSw0MS41IEMzODMuNzQsNDIuOCAzODcuMTksNDMuNCAzOTEuMDcsNDMuNCBDMzk1LjUsNDMuNCAzOTkuMzIsNDIuNiA0MDIuNTEsNDEgQzQwNS44OSwzOS4yIDQwNy41OCwzNyA0MDcuNTgsMzQuMyBMNDA3LjU4LDAuNCBMMzkzLjE3LDAuNCBaIE0zMjIuMjksMjkuOSBDMzIwLjIyLDMyLjUgMzE3LjQ3LDMzLjggMzE0LjA2LDMzLjggTDI5Ny42NCwzMy44IEMyOTQuMiwzMy44IDI5MS40NSwzMi41IDI4OS40MSwyOS45IEMyODcuNTYsMjcuNiAyODYuNjMsMjQuNyAyODYuNjMsMjEuNCBDMjg2LjYzLDE4LjIgMjg3LjU1LDE1LjUgMjg5LjM2LDEzLjMgQzI5MS4zOCwxMC45IDI5NC4xMyw5LjcgMjk3LjY0LDkuNyBMMzE0LjA2LDkuNyBDMzE3LjYsOS43IDMyMC4zNywxMC45IDMyMi4zOSwxMy4zIEMzMjQuMjEsMTUuNSAzMjUuMTIsMTguMiAzMjUuMTIsMjEuNCBDMzI1LjEyLDI0LjcgMzI0LjE4LDI3LjYgMzIyLjI5LDI5LjkgTDMyMi4yOSwyOS45IFogTTMxNi40NCwwLjggTDI5NS4yNCwwLjggQzI4Ny43NCwwLjggMjgxLjc2LDMgMjc3LjI4LDcuNSBDMjc1LjEzLDkuNyAyNzMuNTcsMTIuMSAyNzIuNTcsMTQuNyBDMjcyLjYxLDE0LjMgMjcyLjYzLDEzLjkgMjcyLjYzLDEzLjUgQzI3Mi42MywxMC4xIDI3MS4xNyw3LjEgMjY4LjIyLDQuOCBDMjY1LDIuMSAyNjAuNjMsMC44IDI1NS4xLDAuOCBMMTcyLjI2LDAuOCBMMTcyLjI2LDkuNyBMMTg2Ljg4LDkuNyBMMTg2Ljg4LDQyLjkgTDIwMS4wOSw0Mi45IEwyMDEuMDksOS43IEwyNTIuNzMsOS43IEMyNTQuMzUsOS43IDI1NS42NCwxMC4xIDI1Ni41NiwxMC45IEMyNTcuMzgsMTEuNiAyNTcuODEsMTIuNSAyNTcuODEsMTMuNSBDMjU3LjgxLDE0LjUgMjU3LjM4LDE1LjMgMjU2LjU2LDE2IEMyNTUuNjQsMTYuOCAyNTQuMzUsMTcuMSAyNTIuNzMsMTcuMSBMMjM1LjA5LDE3LjEgQzIyOS4zMiwxNy4xIDIyNC45NCwxOC4zIDIyMS45NiwyMC43IEMyMTkuMzcsMjIuOCAyMTguMDgsMjUuNSAyMTguMDgsMjguOSBMMjE4LjA4LDQyLjggTDIzMi4yOSw0Mi44IEwyMzIuMjksMzIuMyBMMjczLjE1LDQzLjcgTDI3My4xNSwzMy44IEwyNDYuMTQsMjYuMiBMMjU1LjEsMjYuMiBDMjYwLjY2LDI2LjIgMjY1LjA1LDI0LjkgMjY4LjI3LDIyLjMgQzI2OS43OCwyMSAyNzAuODksMTkuNyAyNzEuNjEsMTguMSBDMjcxLjM4LDE5LjQgMjcxLjI2LDIwLjggMjcxLjI2LDIyLjIgQzI3MS4yNiwyNy44IDI3My4yMywzMi42IDI3Ny4xOSwzNi40IEMyODEuNiw0MC43IDI4Ny42Miw0Mi45IDI5NS4yNCw0Mi45IEwzMTYuNDQsNDIuOSBDMzI0LjEsNDIuOSAzMzAuMTMsNDAuNyAzMzQuNTMsMzYuNCBDMzM4LjQ3LDMyLjYgMzQwLjQzLDI3LjggMzQwLjQzLDIyLjIgQzM0MC40MywxNi40IDMzOC40MSwxMS41IDMzNC40LDcuNSBDMzI5LjkzLDMgMzIzLjk0LDAuOCAzMTYuNDQsMC44IEwzMTYuNDQsMC44IFogTTEyNC43OCwzLjggQzEyMS42Niw1LjUgMTE5LjM1LDggMTE3Ljg5LDExLjQgQzExNi42OCwxNC4yIDExNi4wNywxNy41IDExNi4wNywyMS41IEwxMTYuMDcsNDIuOSBMMTMwLjQ4LDQyLjkgTDEzMC40OCwyNi4yIEwxNzAuODgsMjYuMiBMMTcwLjg4LDE3LjEgTDEzMC40OCwxNy4xIEMxMzAuNTcsMTYuNSAxMzAuNjksMTUuOSAxMzAuODIsMTUuMiBDMTMxLjIzLDEzLjcgMTMxLjk2LDEyLjUgMTMzLjAyLDExLjYgQzEzNC40OSwxMC4zIDEzNi40OSw5LjcgMTM5LjAxLDkuNyBMMTcwLjg4LDkuNyBMMTcwLjg4LDAuOCBMMTM5LjAxLDAuOCBDMTMzLjExLDAuOCAxMjguMzcsMS44IDEyNC43OCwzLjggTDEyNC43OCwzLjggWiBNOTUuNDQsMjkuOSBDOTMuMzcsMzIuNSA5MC42MiwzMy44IDg3LjIxLDMzLjggTDcyLjIyLDMzLjggTDcyLjIyLDkuNyBMODcuMjEsOS43IEM5MC43NSw5LjcgOTMuNTMsMTAuOSA5NS41NCwxMy4zIEM5Ny4zMywxNS41IDk4LjIyLDE4LjIgOTguMjIsMjEuNCBDOTguMjIsMjQuOCA5Ny4yOSwyNy42IDk1LjQ0LDI5LjkgTDk1LjQ0LDI5LjkgWiBNODkuNjEsMC44IEw1Ny44MSwwLjggTDU3LjgxLDQyLjkgTDg5LjYxLDQyLjkgQzk3LjI2LDQyLjkgMTAzLjI5LDQwLjcgMTA3LjcxLDM2LjQgQzExMS42MywzMi42IDExMy41OSwyNy44IDExMy41OSwyMi4yIEMxMTMuNTksMTYuNCAxMTEuNTksMTEuNSAxMDcuNTYsNy41IEMxMDMuMDksMyA5Ny4xMSwwLjggODkuNjEsMC44IEw4OS42MSwwLjggWiBNNTAuMTcsNC44IEM0Ni45NSwyLjEgNDIuNTcsMC44IDM3LjA1LDAuOCBMMC4wNCwwLjggTDAuMDQsOS43IEwzNC42Niw5LjcgQzM2LjMsOS43IDM3LjU4LDEwLjEgMzguNSwxMC45IEMzOS4zNCwxMS42IDM5Ljc1LDEyLjUgMzkuNzUsMTMuNSBDMzkuNzUsMTQuNSAzOS4zNCwxNS4zIDM4LjUsMTYgQzM3LjU4LDE2LjggMzYuMywxNy4xIDM0LjY2LDE3LjEgTDE3LjA0LDE3LjEgQzExLjI2LDE3LjEgNi44OSwxOC4zIDMuOTEsMjAuNyBDMS4zMiwyMi44IDAuMDQsMjUuNiAwLjA0LDI4LjkgQzAuMDIsMzEuMSAxLjI2MjE3NzQ1ZS0yOSwzMy4yIDEuMjYyMTc3NDVlLTI5LDM1LjIgTDEuMjYyMTc3NDVlLTI5LDQwIEMxLjI2MjE3NzQ1ZS0yOSw0MS4yIDAuMDIsNDIuMiAwLjA0LDQyLjkgTDE0LjIzLDQyLjkgTDE0LjIzLDMzLjkgQzE0LjE0LDMzLjggMTQuMDksMzMuNiAxNC4wNywzMy40IEMxNC4wNCwzMy4zIDE0LjAzLDMzIDE0LjAzLDMyLjUgQzE0LjAzLDMwLjkgMTQuNTQsMjkuNiAxNS41NywyOC42IEMxNy4xLDI3IDE5LjYzLDI2LjIgMjMuMTgsMjYuMiBMMzcuMDMsMjYuMiBDNDIuNiwyNi4yIDQ3LDI0LjkgNTAuMjIsMjIuMyBDNTMuMTIsMTkuOSA1NC41OCwxNyA1NC41OCwxMy41IEM1NC41OCwxMC4xIDUzLjExLDcuMSA1MC4xNyw0LjggTDUwLjE3LDQuOCBaIi8+PC9zdmc+);
150+
background-size: contain;
151+
background-repeat: no-repeat;
152+
background-position: center;
153+
}
154+
155+
header .menu {
156+
width: 40px;
157+
height: 40px;
158+
display: none;
159+
cursor: pointer;
160+
float: right;
161+
}
162+
163+
header .menu div {
164+
width: 32px;
165+
height: 4px;
166+
background-color: white;
167+
margin: 7px 4px;
168+
}
169+
170+
/* Section element in navigation pages */
171+
172+
section {
173+
display: -webkit-box;
174+
display: -ms-flexbox;
175+
display: flex;
176+
-webkit-box-sizing: border-box;
177+
box-sizing: border-box;
178+
width: 100%;
179+
min-width: 900px;
180+
max-width: 1200px;
181+
margin: 60px auto 0;
182+
padding: 0 10px;
183+
}
184+
185+
section h1 {
186+
margin-bottom: 1.3em;
187+
}
188+
189+
section h4 {
190+
margin-top: 2em;
191+
margin-bottom: 0.5em;
192+
}
193+
194+
section .content {
195+
display: inline-block;
196+
width: 100%;
197+
line-height: 1.5em;
198+
}
199+
200+
section .content h2 {
201+
margin-top: 2em;
202+
}
203+
204+
section .content p {
205+
margin: 0;
206+
}
207+
208+
section .content a {
209+
text-decoration: none;
210+
color: #00a5e4;
211+
}
212+
213+
section .inline {
214+
margin-top: 10px;
215+
}
216+
217+
section .inline a {
218+
margin-right: 20px;
219+
}
220+
221+
.cardWrapper {
222+
margin-top: 60px;
223+
width: 100%;
224+
}
225+
.cardWrapper .card {
226+
border: solid 1px;
227+
text-align: center;
228+
border-radius: 5px;
229+
margin: 10px auto;
230+
padding: 20px;
231+
width: 300px;
232+
height: 100px;
233+
}
234+
235+
/* Buttons */
236+
.Button {
237+
display: -ms-inline-flexbox;
238+
display: inline-flex;
239+
-ms-flex-pack: center;
240+
justify-content: center;
241+
-ms-flex-align: center;
242+
align-items: center;
243+
padding: 10px 25px;
244+
border-radius: 4px;
245+
background-color: #00a5e4;
246+
line-height: 16px;
247+
color: #fff;
248+
cursor: pointer;
249+
-webkit-transition: background-color .15s ease;
250+
transition: background-color .15s ease;
251+
white-space: nowrap;
252+
text-decoration: none;
253+
}
254+
255+
/* Input fields */
256+
input[type=text] {
257+
border-radius: 4px;
258+
padding: 8px;
259+
margin: 4px;
260+
-webkit-box-sizing: border-box;
261+
box-sizing: border-box;
262+
width: 100%;
263+
font-size: 16px!important;
264+
border: 1px solid #e0e0e0;
265+
}
266+
267+
select {
268+
border-radius: 4px;
269+
padding: 8px;
270+
margin: 4px;
271+
-webkit-box-sizing: border-box;
272+
box-sizing: border-box;
273+
width: 100%;
274+
font-size: 16px!important;
275+
border: 1px solid #e0e0e0;
276+
}
277+
278+
div img {
279+
max-width: 100%;
280+
height: 40px;
281+
padding: 5px;
282+
}
283+
284+
div img:hover {
285+
cursor: pointer;
286+
}
287+
288+
/* Smaller screens */
289+
290+
@media (max-width: 800px) {
291+
header .menu {
292+
display: block;
293+
}
294+
295+
aside {
296+
display: none;
297+
position: fixed;
298+
left: 0;
299+
background: white;
300+
box-shadow: 50px 0 50px rgba(0, 0, 0, 0.2);
301+
}
302+
303+
#viewer {
304+
width: 100vw;
305+
margin-left: 0;
306+
}
307+
}

0 commit comments

Comments
 (0)