Skip to content

Commit 9519bd1

Browse files
KenBitgoodKenBitgood
committed
Media Popup Enhancements
This improves upon the media popup windows.
1 parent 1f228ff commit 9519bd1

8 files changed

Lines changed: 1047 additions & 395 deletions

File tree

‎browserbible/js/media/DbsVideoCatalogData.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ export function normalizeTitle(raw) {
113113
poster: item.cover ?? '',
114114
duration: Number(item.duration_seconds ?? 0),
115115
url: low || high,
116-
urlAlt: low && high ? high : ''
116+
urlAlt: low && high ? high : '',
117+
hls: item.media?.hls?.url ?? ''
117118
});
118119
}
119120

‎browserbible/js/media/medialibrary.css‎

Lines changed: 303 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,315 @@
3333

3434
.inline-image-library-thumbs li {
3535
display: block;
36-
width: 60px;
37-
height: 60px;
36+
width: 80px;
37+
height: 80px;
3838
text-align: center;
3939
}
4040

4141
.inline-image-library-thumbs li img {
4242
display: inline;
4343
cursor: pointer;
44-
max-width: 60px;
45-
max-height: 60px;
44+
max-width: 80px;
45+
max-height: 80px;
46+
}
47+
48+
#mediapopup .info-body {
49+
width: 400px;
50+
max-height: 80vh;
51+
}
52+
53+
.media-image-modal {
54+
border: none;
55+
border-radius: 6px;
56+
box-shadow: var(--shadow-popup);
57+
background: var(--color-background);
58+
color: var(--color-text);
59+
font-family: var(--font-family-sans);
60+
padding: 40px 15px 15px;
61+
max-width: 85vw;
62+
}
63+
64+
.media-image-modal::backdrop {
65+
background: rgba(0, 0, 0, .5);
66+
}
67+
68+
.media-image-modal .close-button {
69+
top: 4px;
70+
right: 4px;
71+
width: 28px;
72+
height: 28px;
73+
border-radius: 14px;
74+
}
75+
76+
.media-image-modal .close-button::before {
77+
mask-size: 16px 16px;
78+
-webkit-mask-size: 16px 16px;
79+
}
80+
81+
.media-image-modal-toolbar {
82+
display: flex;
83+
gap: 6px;
84+
justify-content: flex-end;
85+
margin-top: 6px;
86+
}
87+
88+
.media-image-modal-tool {
89+
width: 28px;
90+
height: 28px;
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
border: none;
95+
border-radius: 14px;
96+
background: transparent;
97+
color: var(--color-text-muted);
98+
cursor: pointer;
99+
padding: 0;
100+
}
101+
102+
.media-image-modal-tool:hover {
103+
background: #2563eb;
104+
color: #fff;
105+
}
106+
107+
.media-image-modal-inner:fullscreen,
108+
.media-image-modal.maximized .media-image-modal-inner {
109+
background: #000;
110+
display: flex;
111+
align-items: center;
112+
justify-content: center;
113+
padding: 0;
114+
}
115+
116+
.media-image-modal-inner:fullscreen .media-image-modal-image,
117+
.media-image-modal.maximized .media-image-modal-image {
118+
max-width: 100vw;
119+
max-height: 100vh;
120+
margin: 0;
121+
}
122+
123+
.media-image-modal-inner:fullscreen .media-image-modal-meta,
124+
.media-image-modal-inner:fullscreen .media-image-modal-strip,
125+
.media-image-modal.maximized .media-image-modal-meta,
126+
.media-image-modal.maximized .media-image-modal-strip {
127+
display: none;
128+
}
129+
130+
.media-image-modal-inner:fullscreen .media-image-modal-toolbar,
131+
.media-image-modal.maximized .media-image-modal-toolbar {
132+
position: absolute;
133+
top: 8px;
134+
right: 44px;
135+
margin: 0;
136+
}
137+
138+
.media-image-modal.maximized {
139+
width: 100vw;
140+
height: 100vh;
141+
max-width: none;
142+
max-height: none;
143+
padding: 0;
144+
border-radius: 0;
145+
inset: 0;
146+
}
147+
148+
.media-image-modal.maximized .media-image-modal-inner {
149+
width: 100%;
150+
height: 100%;
151+
}
152+
153+
.media-image-modal-inner:fullscreen .media-image-modal-tool,
154+
.media-image-modal-inner:fullscreen .close-button,
155+
.media-image-modal.maximized .media-image-modal-tool,
156+
.media-image-modal.maximized .close-button {
157+
color: #ccc;
158+
}
159+
160+
.media-video-modal {
161+
border: none;
162+
border-radius: 6px;
163+
box-shadow: var(--shadow-popup);
164+
background: var(--color-background);
165+
color: var(--color-text);
166+
font-family: var(--font-family-sans);
167+
padding: 40px 15px 15px;
168+
width: min(70vw, 990px);
169+
max-width: 95vw;
170+
}
171+
172+
.media-modal-drag {
173+
position: absolute;
174+
top: 0;
175+
left: 0;
176+
right: 44px;
177+
height: 36px;
178+
cursor: move;
179+
}
180+
181+
.media-modal-grip {
182+
position: absolute;
183+
bottom: 0;
184+
width: 18px;
185+
height: 18px;
186+
z-index: var(--z-chrome);
187+
}
188+
189+
.media-modal-grip.grip-left {
190+
left: 0;
191+
cursor: nesw-resize;
192+
border-left: 3px solid var(--color-border);
193+
border-bottom: 3px solid var(--color-border);
194+
border-bottom-left-radius: 6px;
195+
}
196+
197+
.media-modal-grip.grip-right {
198+
right: 0;
199+
cursor: nwse-resize;
200+
border-right: 3px solid var(--color-border);
201+
border-bottom: 3px solid var(--color-border);
202+
border-bottom-right-radius: 6px;
203+
}
204+
205+
.media-image-modal.sized .media-image-modal-image {
206+
width: 100%;
207+
max-width: none;
208+
max-height: none;
209+
}
210+
211+
.media-video-modal::backdrop {
212+
background: rgba(0, 0, 0, .5);
213+
}
214+
215+
.media-video-modal .close-button {
216+
top: 4px;
217+
right: 4px;
218+
width: 28px;
219+
height: 28px;
220+
border-radius: 14px;
221+
}
222+
223+
.media-video-modal .close-button::before {
224+
mask-size: 16px 16px;
225+
-webkit-mask-size: 16px 16px;
226+
}
227+
228+
.media-video-modal-video {
229+
display: block;
230+
width: 100%;
231+
background: #000;
232+
border-radius: 4px;
233+
}
234+
235+
.media-video-modal-meta {
236+
display: flex;
237+
flex-direction: column;
238+
gap: 2px;
239+
margin-top: 10px;
240+
font-size: 14px;
241+
text-align: center;
242+
}
243+
244+
.media-video-modal-next {
245+
margin: 8px auto 0;
246+
padding: 6px 14px;
247+
border: none;
248+
border-radius: 15px;
249+
background: #2563eb;
250+
color: #fff;
251+
font-size: 14px;
252+
cursor: pointer;
253+
}
254+
255+
.media-video-modal-next:hover {
256+
background: #3b82f6;
257+
}
258+
259+
.media-video-modal-strip {
260+
display: flex;
261+
gap: 6px;
262+
overflow-x: auto;
263+
margin-top: 10px;
264+
justify-content: safe center;
265+
}
266+
267+
.media-video-modal-strip span {
268+
flex: 0 0 auto;
269+
cursor: pointer;
270+
}
271+
272+
.media-video-modal-strip span.active {
273+
outline: 2px solid #2563eb;
274+
}
275+
276+
.media-video-modal-strip img {
277+
display: block;
278+
height: 40px;
279+
}
280+
281+
.media-image-modal-image {
282+
display: block;
283+
max-width: 80vw;
284+
max-height: 70vh;
285+
margin: 0 auto;
286+
}
287+
288+
.media-image-modal-arrow {
289+
position: absolute;
290+
top: 50%;
291+
transform: translateY(-50%);
292+
width: 32px;
293+
height: 48px;
294+
border: none;
295+
background: transparent;
296+
color: var(--color-text-muted);
297+
opacity: .35;
298+
font-size: 20px;
299+
cursor: pointer;
300+
padding: 0;
301+
}
302+
303+
.media-image-modal-arrow:hover {
304+
opacity: 1;
305+
color: var(--color-text);
306+
}
307+
308+
.media-image-modal-arrow.arrow-left {
309+
left: 2px;
310+
}
311+
312+
.media-image-modal-arrow.arrow-right {
313+
right: 2px;
314+
}
315+
316+
.media-image-modal-meta {
317+
display: flex;
318+
flex-direction: column;
319+
gap: 2px;
320+
margin-top: 10px;
321+
font-size: 14px;
322+
text-align: center;
323+
}
324+
325+
.media-image-modal-strip {
326+
display: flex;
327+
gap: 6px;
328+
overflow-x: auto;
329+
margin-top: 10px;
330+
justify-content: safe center;
331+
}
332+
333+
.media-image-modal-strip span {
334+
flex: 0 0 auto;
335+
cursor: pointer;
336+
}
337+
338+
.media-image-modal-strip span.active {
339+
outline: 2px solid #2563eb;
340+
}
341+
342+
.media-image-modal-strip img {
343+
display: block;
344+
height: 40px;
46345
}
47346

48347

0 commit comments

Comments
 (0)