Skip to content

Commit 7076b31

Browse files
chris-morganchris-morgan
committed
I’ve run out of excuses to hold it back, polishing
It is still not complete (audio is my biggest desire), but it’s well and truly usable.
0 parents  commit 7076b31

8 files changed

+2282
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.min.js
2+
*.min.css

‎LICENSE

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2015 Chris Morgan <[email protected]>
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in
11+
all copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
THE SOFTWARE.

‎Makefile

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# … and why not?
2+
3+
.PHONY: all clean
4+
5+
all: tty-player.min.js tty-player.min.css
6+
7+
clean:
8+
rm -f tty-player.min.js
9+
10+
tty-player.min.js: tty-player.js
11+
@echo Minifying tty-player.js...
12+
@curl http://www.closure-compiler.appspot.com/compile --compressed -H 'Content-Type: application/x-www-form-urlencoded;charset=utf-8' --data compilation_level=ADVANCED_OPTIMIZATIONS --data output_format=text --data output_info=compiled_code --data-urlencode [email protected] --data-urlencode [email protected]/src/term.js > tty-player.min.js
13+
14+
tty-player.min.css: tty-player.css
15+
@echo Minifying tty-player.css...
16+
@uglifycss tty-player.css > tty-player.min.css

‎README.md

+311
Large diffs are not rendered by default.

‎tty-player.css

+218
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
.terminal {
2+
font-family: monospace, monospace;
3+
cursor: text;
4+
line-height: initial;
5+
}
6+
7+
tty-player {
8+
border: 2px solid #285577;
9+
border-top: 1px solid #4c7899;
10+
}
11+
12+
tty-player .title {
13+
background: #285577;
14+
border-bottom: 1px solid #4c7899;
15+
color: #fff;
16+
font-family: sans-serif;
17+
font-weight: bold;
18+
padding: 0.2em;
19+
line-height: 1;
20+
height: 1em;
21+
cursor: default;
22+
}
23+
24+
tty-player menu {
25+
display: none;
26+
}
27+
28+
tty-player {
29+
display: inline-block;
30+
position: relative;
31+
}
32+
33+
tty-player:not([controls]) tty-player-controls {
34+
display: none;
35+
}
36+
37+
tty-player-poster {
38+
/* XXX: <video> has an overlay with play button if [controls] over the poster *image*, but here we have an overlay with play button regardless. Perhaps specifying a poster currentTime or script might work? */
39+
background: rgba(53, 47, 47, 0.5);
40+
opacity: 0.5;
41+
transition: opacity 0.2s linear;
42+
background-repeat: no-repeat;
43+
background-position: center;
44+
background-image: url("data:image/svg+xml,%3C?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='66'%20height='66'%3E%3Cfilter%20id='f'%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20.5%200'/%3E%3CfeGaussianBlur%20result='r'%20stdDeviation='2'/%3E%3CfeComposite%20in='SourceGraphic'%20in2='r'/%3E%3C/filter%3E%3Cpath%20fill='%23ddd'%20stroke='%23ccc'%20stroke-width='1'%20d='M33,5.5A27.5,27.5%200%200%200%205.5,33%2027.5,27.5%200%200%200%2033,60.5%2027.5,27.5%200%200%200%2060.5,33%2027.5,27.5%200%200%200%2033,5.5Zm-9.5,13%2025,14.5-25,14.5%200,-29z'%20filter='url(%23f)'/%3E%3C/svg%3E");
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
right: 0;
49+
bottom: 0;
50+
}
51+
52+
tty-player[controls] tty-player-poster {
53+
bottom: 28px;
54+
}
55+
56+
tty-player:hover tty-player-poster {
57+
opacity: 1;
58+
}
59+
60+
tty-player-controls {
61+
position: absolute;
62+
left: 0;
63+
right: 0;
64+
bottom: 0;
65+
background: rgba(53, 47, 47, 0.5);
66+
opacity: 0;
67+
display: flex;
68+
flex-direction: row;
69+
transition: opacity 0.2s linear;
70+
cursor: default;
71+
}
72+
73+
/* Browsers tend to show the controls when a <video> ends, too; I, however, am not doing this for now at least as the controls will overlap with what is often the most important part of the terminal (the bottom). For this reason, I haven’t hooked up any support for that either, only showing controls persistently when the poster is up. */
74+
tty-player-controls.poster,
75+
tty-player:hover tty-player-controls {
76+
opacity: 1;
77+
}
78+
79+
tty-player-controls input[type=range], tty-player-controls button {
80+
margin: 0;
81+
padding: 0;
82+
border: none;
83+
background: none;
84+
font: inherit;
85+
line-height: inherit;
86+
-moz-appearance: none;
87+
-webkit-appearance: none;
88+
}
89+
90+
tty-player-controls button {
91+
padding: 0;
92+
background: none;
93+
opacity: 0.75;
94+
flex: 0 1 auto;
95+
line-height: 1;
96+
width: 28px;
97+
height: 28px;
98+
}
99+
100+
tty-player-controls button:hover {
101+
color: #777;
102+
opacity: 1;
103+
}
104+
105+
tty-player-controls input[type=range] {
106+
flex: 1;
107+
height: 8px;
108+
margin: 10px 5px;
109+
}
110+
111+
tty-player-controls button {
112+
background-repeat: no-repeat;
113+
background-position: center;
114+
}
115+
116+
tty-player-controls button.play {
117+
background-image: url("data:image/svg+xml,%3C?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='16'%3E%3Cpath%20fill='%23ccc'%20d='M0,0%200,16%2014,8Z'/%3E%3C/svg%3E");
118+
}
119+
120+
tty-player-controls button.pause {
121+
background-image: url("data:image/svg+xml,%3C?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='16'%3E%3Cpath%20fill='%23ccc'%20d='M1,0L1,16L5,16L5,0L0,0zM9,0L9,16L13,16L13,0L9,0z'/%3E%3C/svg%3E");
122+
}
123+
124+
tty-player-controls input[type=range]:focus {
125+
box-shadow: none;
126+
outline: none;
127+
}
128+
129+
tty-player-controls input[type=range]::-moz-range-track,
130+
tty-player-controls input[type=range]::-moz-range-thumb,
131+
tty-player-controls input[type=range]::-moz-range-progress {
132+
border-radius: 4px;
133+
height: 8px;
134+
}
135+
136+
tty-player-controls input[type=range]::-moz-range-track {
137+
background: rgba(255, 255, 255, 0.5);
138+
}
139+
140+
tty-player-controls input[type=range]::-moz-range-thumb {
141+
-moz-appearance: none;
142+
width: 0;
143+
background: transparent;
144+
border: 0;
145+
border-radius: 0;
146+
box-shadow: 0;
147+
position: relative;
148+
}
149+
150+
tty-player-controls input[type=range]::-moz-range-progress {
151+
background: #fff;
152+
}
153+
154+
input[type=range] {
155+
overflow: hidden;
156+
}
157+
158+
tty-player-controls input[type=range]::-webkit-slider-runnable-track {
159+
-webkit-appearance: none;
160+
height: 8px;
161+
background: rgba(255, 255, 255, 0.5);
162+
//border-radius: 4px;
163+
}
164+
165+
tty-player-controls input[type=range]::-webkit-slider-thumb:before {
166+
position: absolute;
167+
top: 0;
168+
right: 50%;
169+
left: -9999px;
170+
background: #fff;
171+
content: '';
172+
height: 8px;
173+
pointer-events: none;
174+
}
175+
176+
tty-player-controls input[type=range]::-webkit-slider-thumb {
177+
-webkit-appearance: none;
178+
width: 0;
179+
height: 0;
180+
position: relative;
181+
}
182+
183+
/* I have not altered IE’s styles because I feel them already satisfactory */
184+
185+
tty-player-controls .current-time {
186+
position: absolute;
187+
color: #ddd;
188+
background: #888;
189+
font-family: sans-serif;
190+
font-size: 12px;
191+
display: block;
192+
box-shadow: 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.2);
193+
padding: 0 5px;
194+
line-height: 16px;
195+
border-radius: 4px;
196+
top: -7px;
197+
}
198+
199+
tty-player-controls .current-time::after {
200+
content: "";
201+
position: absolute;
202+
width: 8px;
203+
height: 8px;
204+
background: linear-gradient(-45deg, #888 50%, transparent 50%);
205+
box-shadow: 1px 1px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(0, 0, 0, 0.5);
206+
bottom: -3px;
207+
left: 50%;
208+
margin-left: -5px;
209+
transform: rotate(45deg);
210+
}
211+
212+
tty-player-controls .duration {
213+
font-family: sans-serif;
214+
font-size: 12px;
215+
color: #999;
216+
line-height: 18px;
217+
padding: 5px;
218+
}

0 commit comments

Comments
 (0)