Skip to content

Commit b2e1283

Browse files
fschoelzelfschoelzel
committed
WIP update UI audiotools
1 parent 5b1138f commit b2e1283

File tree

3 files changed

+272
-61
lines changed

3 files changed

+272
-61
lines changed

‎Resources/Private/JavaScript/DlfMediaPlayer/frontend/ShakaFrontend.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -458,6 +458,7 @@ export default class ShakaFrontend {
458458
);
459459

460460
if (showPoster) {
461+
console.log('Setting poster', this.mediaProperties.poster);
461462
// @ts-expect-error
462463
this.$poster.src = this.mediaProperties.poster;
463464
}

‎Resources/Private/Templates/MediaPlayer/Main copy.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
2+
xmlns:kitodo="http://typo3.org/ns/Kitodo/Dlf/ViewHelpers"
3+
data-namespace-typo3-fluid="true"
4+
lang="en">
5+
6+
<f:if condition="{video}">
7+
<f:then>
8+
<script>
9+
document.body.setAttribute("data-has-video", "yes");
10+
</script>
11+
12+
<kitodo:mediaPlayerConfig id="MEDIA_CONFIG" settings="{settings}" />
13+
14+
<div id="combined-container" class="combined-container">
15+
<div class="media-panel">
16+
<f:if condition="{settings.equalizer.enabled}">
17+
<f:then>
18+
<dlf-equalizer id="{settings.elementId}-equalizer" forPlayer="{settings.elementId}"></dlf-equalizer>
19+
20+
<f:comment>
21+
<!-- Workaround: Define variables for javascript curly braces to prevent parsing by the Fluid parser -->
22+
<!-- Source: https://docs.typo3.org/other/typo3fluid/fluid/4.5/en-us/Syntax/Escaping.html#using-variables-for-curly-braces -->
23+
</f:comment>
24+
<f:asset.script type="text/javascript" identifier="parse-equalizer-presets">
25+
<f:alias map="{ocb: '{', ccb: '}'}">
26+
window.addEventListener('DOMContentLoaded', function () {ocb}
27+
var equalizer = document.getElementById("{settings.elementId}-equalizer");
28+
equalizer.parsePresets(MEDIA_CONFIG['equalizer']['presets']);
29+
30+
if (MEDIA_CONFIG['equalizer']['default'])
31+
equalizer.selectPreset(MEDIA_CONFIG['equalizer']['default']);
32+
{ccb});
33+
</f:alias>
34+
</f:asset.script>
35+
</f:then>
36+
</f:if>
37+
<dlf-marker-table forPlayer="{settings.elementId}"></dlf-marker-table>
38+
</div>
39+
40+
<div id="tx-dlf-view" class="tx-dlf-view">
41+
<f:if condition="{video.url.waveform}">
42+
<f:then>
43+
<dlf-waveform hidden id="{settings.elementId}-waveform" forPlayer="{settings.elementId}" src="{video.url.waveform.url}" type="{video.url.waveform.mimeType}"></dlf-waveform>
44+
</f:then>
45+
</f:if>
46+
47+
<slub-media id="{settings.elementId}" player-view="combined-container" poster="{video.url.poster.url}" config="MEDIA_CONFIG" start="{video.start}" mode="auto" mode-fallback="{video.mode}">
48+
<f:comment>NOTE: If one of these doesn't exist, the player will try the next one.</f:comment>
49+
<f:for each="{video.sources}" as="source">
50+
<source src="{source.url}" type="{source.mimeType}" data-fps="{source.frameRate}" data-fileid="{source.fileId}">
51+
</f:for>
52+
53+
<f:for each="{video.chapters}" as="chapter">
54+
<dlf-chapter title="{chapter.title}" timecode="{chapter.timecode}" fileids="{chapter.fileIdsJoin}" pageNo="{chapter.pageNo}"></dlf-chapter>
55+
</f:for>
56+
57+
<f:for each="{video.metadata}" as="values" key="key">
58+
<f:for each="{values}" as="value">
59+
<dlf-meta key="{key}" value="{value}"></dlf-meta>
60+
</f:for>
61+
</f:for>
62+
63+
<dlf-media-controls>
64+
<button data-type="volume"></button>
65+
<button data-type="mute"></button>
66+
<f:if condition="{video.url.waveform}">
67+
<f:then>
68+
<button class="material-icons-round sxnd-waveform-button" data-t-title="control.waveform.tooltip" data-action="sound_tools.waveform.toggle">graphic_eq</button>
69+
</f:then>
70+
</f:if>
71+
<button class="material-icons-round sxnd-screenshot-button" data-t-title="control.screenshot.tooltip" data-action="modal.screenshot.open">photo_camera</button>
72+
<button class="material-icons-round sxnd-bookmark-button" data-t-title="control.bookmark.tooltip" data-action="modal.bookmark.open">bookmark_border</button>
73+
<button data-type="fullscreen"></button>
74+
<button class="material-icons-round sxnd-help-button" data-t-title="control.help.tooltip" data-action="modal.help.open">info_outline</button>
75+
</dlf-media-controls>
76+
</slub-media>
77+
</div>
78+
</div>
79+
</f:then>
80+
</f:if>
81+
82+
</html>

‎Resources/Private/Templates/MediaPlayer/Main.html‎

Lines changed: 189 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
data-namespace-typo3-fluid="true"
44
lang="en">
55

6+
<f:debug>{_all}</f:debug>
67
<f:if condition="{video}">
78
<f:then>
89
<script>
@@ -11,71 +12,198 @@
1112

1213
<kitodo:mediaPlayerConfig id="MEDIA_CONFIG" settings="{settings}" />
1314

14-
<div id="combined-container" class="combined-container">
15-
<div class="media-panel">
16-
<f:if condition="{settings.equalizer.enabled}">
17-
<f:then>
18-
<dlf-equalizer id="{settings.elementId}-equalizer" forPlayer="{settings.elementId}"></dlf-equalizer>
19-
20-
<f:comment>
21-
<!-- Workaround: Define variables for javascript curly braces to prevent parsing by the Fluid parser -->
22-
<!-- Source: https://docs.typo3.org/other/typo3fluid/fluid/4.5/en-us/Syntax/Escaping.html#using-variables-for-curly-braces -->
23-
</f:comment>
24-
<f:asset.script type="text/javascript" identifier="parse-equalizer-presets">
25-
<f:alias map="{ocb: '{', ccb: '}'}">
26-
window.addEventListener('DOMContentLoaded', function () {ocb}
27-
var equalizer = document.getElementById("{settings.elementId}-equalizer");
28-
equalizer.parsePresets(MEDIA_CONFIG['equalizer']['presets']);
29-
30-
if (MEDIA_CONFIG['equalizer']['default'])
31-
equalizer.selectPreset(MEDIA_CONFIG['equalizer']['default']);
32-
{ccb});
33-
</f:alias>
34-
</f:asset.script>
35-
</f:then>
36-
</f:if>
37-
<dlf-marker-table forPlayer="{settings.elementId}"></dlf-marker-table>
15+
<f:if condition="{video.mode} == 'video'">
16+
<f:then>
17+
<h1>VIDEO</h1>
18+
<div id="combined-container" class="combined-container">
19+
<div class="media-panel">
20+
<f:if condition="{settings.equalizer.enabled}">
21+
<f:then>
22+
<dlf-equalizer id="{settings.elementId}-equalizer" forPlayer="{settings.elementId}"></dlf-equalizer>
23+
24+
<f:comment>
25+
<!-- Workaround: Define variables for javascript curly braces to prevent parsing by the Fluid parser -->
26+
<!-- Source: https://docs.typo3.org/other/typo3fluid/fluid/4.5/en-us/Syntax/Escaping.html#using-variables-for-curly-braces -->
27+
</f:comment>
28+
<f:asset.script type="text/javascript" identifier="parse-equalizer-presets">
29+
<f:alias map="{ocb: '{', ccb: '}'}">
30+
window.addEventListener('DOMContentLoaded', function () {ocb}
31+
var equalizer = document.getElementById("{settings.elementId}-equalizer");
32+
equalizer.parsePresets(MEDIA_CONFIG['equalizer']['presets']);
33+
34+
if (MEDIA_CONFIG['equalizer']['default'])
35+
equalizer.selectPreset(MEDIA_CONFIG['equalizer']['default']);
36+
{ccb});
37+
</f:alias>
38+
</f:asset.script>
39+
</f:then>
40+
</f:if>
41+
<dlf-marker-table forPlayer="{settings.elementId}"></dlf-marker-table>
42+
</div>
43+
44+
<div id="tx-dlf-view" class="tx-dlf-view">
45+
<f:if condition="{video.url.waveform}">
46+
<f:then>
47+
<dlf-waveform hidden id="{settings.elementId}-waveform" forPlayer="{settings.elementId}" src="{video.url.waveform.url}" type="{video.url.waveform.mimeType}"></dlf-waveform>
48+
</f:then>
49+
</f:if>
50+
51+
<slub-media id="{settings.elementId}" player-view="combined-container" poster="{video.url.poster.url}" config="MEDIA_CONFIG" start="{video.start}" mode="auto" mode-fallback="{video.mode}">
52+
<f:comment>NOTE: If one of these doesn't exist, the player will try the next one.</f:comment>
53+
<f:for each="{video.sources}" as="source">
54+
<source src="{source.url}" type="{source.mimeType}" data-fps="{source.frameRate}" data-fileid="{source.fileId}">
55+
</f:for>
56+
57+
<f:for each="{video.chapters}" as="chapter">
58+
<dlf-chapter title="{chapter.title}" timecode="{chapter.timecode}" fileids="{chapter.fileIdsJoin}" pageNo="{chapter.pageNo}"></dlf-chapter>
59+
</f:for>
60+
61+
<f:for each="{video.metadata}" as="values" key="key">
62+
<f:for each="{values}" as="value">
63+
<dlf-meta key="{key}" value="{value}"></dlf-meta>
64+
</f:for>
65+
</f:for>
66+
67+
<dlf-media-controls>
68+
<button data-type="volume"></button>
69+
<button data-type="mute"></button>
70+
<f:if condition="{video.url.waveform}">
71+
<f:then>
72+
<button class="material-icons-round sxnd-waveform-button" data-t-title="control.waveform.tooltip" data-action="sound_tools.waveform.toggle">graphic_eq</button>
73+
</f:then>
74+
</f:if>
75+
<button class="material-icons-round sxnd-screenshot-button" data-t-title="control.screenshot.tooltip" data-action="modal.screenshot.open">photo_camera</button>
76+
<button class="material-icons-round sxnd-bookmark-button" data-t-title="control.bookmark.tooltip" data-action="modal.bookmark.open">bookmark_border</button>
77+
<button data-type="fullscreen"></button>
78+
<button class="material-icons-round sxnd-help-button" data-t-title="control.help.tooltip" data-action="modal.help.open">info_outline</button>
79+
</dlf-media-controls>
80+
</slub-media>
81+
</div>
3882
</div>
83+
</f:then>
84+
<f:else if="{video.mode} == 'audio'">
85+
<h1>AUDIO</h1>
86+
<style>
87+
body, html {
88+
margin: 0;
89+
padding: 0;
90+
height: 100%;
91+
display: flex;
92+
flex-direction: column;
93+
font-family: Arial, sans-serif;
94+
}
95+
.header {
96+
display: flex;
97+
justify-content: space-around;
98+
padding: 10px;
99+
background-color: #f0f0f0;
100+
}
101+
.main {
102+
flex: 1;
103+
display: flex;
104+
justify-content: center;
105+
align-items: center;
106+
background-color: #e0e0e0;
107+
}
108+
.hidden {
109+
display: none;
110+
}
111+
</style>
112+
<div id="combined-container" class="combined-container">
113+
<div class="media-panel">
114+
<f:debug>{video.url.poster.url}</f:debug>
115+
116+
<div class="header">
117+
<button onclick="showCanvas('imageCanvas')">Zurück zum Bild</button>
118+
<button onclick="showCanvas('canvas1')">equalizer</button>
119+
<button onclick="showCanvas('canvas2')">marker-table</button>
120+
</div>
121+
<div class="main">
122+
<div id="imageCanvas">
123+
<f:if condition="{video.url.poster}">
124+
<f:then>
125+
<img src="{video.url.poster.url}" alt="Mitte Bild" style="max-width: 100%; max-height: 100%;">
126+
</f:then>
127+
</f:if>
128+
</div>
129+
<div id="canvas1" class="hidden">
130+
<p>equalizer</p>
131+
<f:if condition="{settings.equalizer.enabled}">
132+
<f:then>
133+
<dlf-equalizer id="{settings.elementId}-equalizer" forPlayer="{settings.elementId}"></dlf-equalizer>
134+
</f:then>
135+
</f:if>
136+
</div>
137+
<div id="canvas2" class="hidden">
138+
<p>marker-table</p>
139+
<dlf-marker-table forPlayer="{settings.elementId}"></dlf-marker-table>
140+
</div>
141+
</div>
142+
143+
<script>
144+
function showCanvas(canvasId) {
145+
document.getElementById('imageCanvas').classList.add('hidden');
146+
document.getElementById('canvas1').classList.add('hidden');
147+
document.getElementById('canvas2').classList.add('hidden');
148+
document.getElementById(canvasId).classList.remove('hidden');
149+
}
150+
</script>
151+
</div>
152+
153+
<div id="tx-dlf-view" class="tx-dlf-view">
154+
<f:if condition="{video.url.waveform}">
155+
<f:then>
156+
<dlf-waveform hidden id="{settings.elementId}-waveform" forPlayer="{settings.elementId}" src="{video.url.waveform.url}" type="{video.url.waveform.mimeType}"></dlf-waveform>
157+
</f:then>
158+
</f:if>
39159

40-
<div id="tx-dlf-view" class="tx-dlf-view">
41-
<f:if condition="{video.url.waveform}">
42-
<f:then>
43-
<dlf-waveform hidden id="{settings.elementId}-waveform" forPlayer="{settings.elementId}" src="{video.url.waveform.url}" type="{video.url.waveform.mimeType}"></dlf-waveform>
44-
</f:then>
45-
</f:if>
46-
47-
<slub-media id="{settings.elementId}" player-view="combined-container" poster="{video.url.poster.url}" config="MEDIA_CONFIG" start="{video.start}" mode="auto" mode-fallback="{video.mode}">
48-
<f:comment>NOTE: If one of these doesn't exist, the player will try the next one.</f:comment>
49-
<f:for each="{video.sources}" as="source">
50-
<source src="{source.url}" type="{source.mimeType}" data-fps="{source.frameRate}" data-fileid="{source.fileId}">
51-
</f:for>
52-
53-
<f:for each="{video.chapters}" as="chapter">
54-
<dlf-chapter title="{chapter.title}" timecode="{chapter.timecode}" fileids="{chapter.fileIdsJoin}" pageNo="{chapter.pageNo}"></dlf-chapter>
55-
</f:for>
56-
57-
<f:for each="{video.metadata}" as="values" key="key">
58-
<f:for each="{values}" as="value">
59-
<dlf-meta key="{key}" value="{value}"></dlf-meta>
160+
<slub-media id="{settings.elementId}" player-view="combined-container" poster="{video.url.poster.url}" config="MEDIA_CONFIG" start="{video.start}" mode="auto" mode-fallback="{video.mode}">
161+
<f:comment>NOTE: If one of these doesn't exist, the player will try the next one.</f:comment>
162+
<f:for each="{video.sources}" as="source">
163+
<source src="{source.url}" type="{source.mimeType}" data-fps="{source.frameRate}" data-fileid="{source.fileId}">
60164
</f:for>
61-
</f:for>
62-
63-
<dlf-media-controls>
64-
<button data-type="volume"></button>
65-
<button data-type="mute"></button>
66-
<f:if condition="{video.url.waveform}">
67-
<f:then>
68-
<button class="material-icons-round sxnd-waveform-button" data-t-title="control.waveform.tooltip" data-action="sound_tools.waveform.toggle">graphic_eq</button>
69-
</f:then>
70-
</f:if>
71-
<button class="material-icons-round sxnd-screenshot-button" data-t-title="control.screenshot.tooltip" data-action="modal.screenshot.open">photo_camera</button>
72-
<button class="material-icons-round sxnd-bookmark-button" data-t-title="control.bookmark.tooltip" data-action="modal.bookmark.open">bookmark_border</button>
73-
<button data-type="fullscreen"></button>
74-
<button class="material-icons-round sxnd-help-button" data-t-title="control.help.tooltip" data-action="modal.help.open">info_outline</button>
75-
</dlf-media-controls>
76-
</slub-media>
165+
166+
<f:for each="{video.chapters}" as="chapter">
167+
<dlf-chapter title="{chapter.title}" timecode="{chapter.timecode}" fileids="{chapter.fileIdsJoin}" pageNo="{chapter.pageNo}"></dlf-chapter>
168+
</f:for>
169+
170+
<f:for each="{video.metadata}" as="values" key="key">
171+
<f:for each="{values}" as="value">
172+
<dlf-meta key="{key}" value="{value}"></dlf-meta>
173+
</f:for>
174+
</f:for>
175+
176+
<dlf-media-controls>
177+
<button data-type="volume"></button>
178+
<button data-type="mute"></button>
179+
<f:if condition="{video.url.waveform}">
180+
<f:then>
181+
<button class="material-icons-round sxnd-waveform-button" data-t-title="control.waveform.tooltip" data-action="sound_tools.waveform.toggle">graphic_eq</button>
182+
</f:then>
183+
</f:if>
184+
<button class="material-icons-round sxnd-screenshot-button" data-t-title="control.screenshot.tooltip" data-action="modal.screenshot.open">photo_camera</button>
185+
<button class="material-icons-round sxnd-bookmark-button" data-t-title="control.bookmark.tooltip" data-action="modal.bookmark.open">bookmark_border</button>
186+
<button data-type="fullscreen"></button>
187+
<button class="material-icons-round sxnd-help-button" data-t-title="control.help.tooltip" data-action="modal.help.open">info_outline</button>
188+
</dlf-media-controls>
189+
</slub-media>
190+
</div>
77191
</div>
78-
</div>
192+
</f:else>
193+
<f:else>
194+
<p>No video or audio found</p>
195+
</f:else>
196+
</f:if>
197+
198+
</f:then>
199+
<f:else>
200+
<p>This is no Mediaformat</p>
201+
</f:else>
202+
</f:if>
203+
204+
<f:if condition="{video}">
205+
<f:then>
206+
79207
</f:then>
80208
</f:if>
81209

0 commit comments

Comments
 (0)