Skip to content

Commit e0fa481

Browse files
beatrycze-volkbeatrycze-volk
authored
Merge pull request #376 from markusweigelt/midi-player
[FEATURE] Provide MIDI player
2 parents 615cb2b + 8733697 commit e0fa481

File tree

9 files changed

+50
-146
lines changed

9 files changed

+50
-146
lines changed

‎.github/workflows/npm-grunt.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929
working-directory: ./Build
3030
run: |
3131
npm install -g grunt-cli
32-
npm audit fix
32+
npm update grunt grunt-terser
3333
echo "Running `grunt less`"
3434
grunt less
3535
echo "Running `grunt terser`"
@@ -42,6 +42,6 @@ jobs:
4242
if [ -n "$(git status --porcelain -- ./Resources/Public/)" ]; then
4343
echo "Changes detected in compiled files"
4444
exit 1
45-
else
45+
else
4646
echo "No changes detected in compiled files"
4747
fi

‎Configuration/TypoScript/Plugins/kitodo.typoscript‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@ plugin.tx_dlf_scoretool < plugin.tx_dlf_toolbox
283283
plugin.tx_dlf_scoretool {
284284
settings {
285285
tools = scoretool
286+
midiPlayerSoundFont = default
286287
}
287288
}
288289

‎Resources/Private/Less/components/controls.less‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -256,15 +256,15 @@
256256
}
257257
}
258258
&.score {
259-
a#tx-dlf-tools-midi {
259+
a#tx-dlf-tools-score-midi {
260260
background-position: -640px 0;
261261

262-
.midi-active & {
262+
.tx-dlf-score-midi-active & {
263263
background-position: -680px 0;
264264
}
265265
}
266266

267-
a.score-visible.active:before {
267+
a.tx-dlf-score-visible.active:before {
268268
position: absolute;
269269
top: 2px;
270270
right: 0px;
@@ -510,7 +510,7 @@
510510
&.zoom {
511511
position: relative;
512512
display: inline-block;
513-
.score-visible & {
513+
.tx-dlf-score-visible & {
514514
.in, .out {
515515
display: none;
516516
}
@@ -785,7 +785,7 @@
785785
left: 50%;
786786
width: 300px;
787787
margin-left: -150px;
788-
.score-visible & {
788+
.tx-dlf-score-visible & {
789789
width: 340px;
790790
margin-left: -170px;
791791
}
@@ -798,7 +798,7 @@
798798
height: 100%;
799799
margin: 0;
800800
pointer-events: none;
801-
.score-visible & {
801+
.tx-dlf-score-visible & {
802802
width: 100%;
803803
margin: 0;
804804
}

‎Resources/Private/Less/modules/score.less‎

Lines changed: 31 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
display: none;
1616
border-left: 1px solid #eee;
1717

18-
&:has(> .score-visible) {
18+
&:has(> .tx-dlf-score-visible) {
1919
display: block;
2020
width: 50%;
2121
}
@@ -31,7 +31,7 @@
3131
background: rgb(243, 238, 230);
3232
}
3333

34-
.score-visible & {
34+
.tx-dlf-score-visible & {
3535
display: block;
3636
}
3737

@@ -75,145 +75,45 @@
7575
}
7676
}
7777

78-
79-
#player {
78+
#tx-dlf-score-midi-player {
8079
position: absolute;
80+
width: 300px;
81+
bottom: 50px;
82+
margin: 0;
8183
z-index: 10;
82-
inset: auto 15px 0 15px;
83-
background: white;
84-
padding: 7px;
85-
border-radius: 40px;
86-
opacity: 0;
87-
pointer-events: none;
88-
transition: all .25s ease-in-out;
89-
border: 1px solid #eee;
90-
91-
.midi-active.score-visible & {
92-
opacity: 1;
93-
pointer-events: auto;
94-
bottom: 80px;
95-
}
96-
97-
#midiPlayer_div {
98-
position: relative;
99-
display: flex;
100-
align-items: center;
101-
102-
#midiPlayer_playingTime,
103-
#midiPlayer_totalTime {
104-
font-size: 12px;
105-
color: #6887a3;
106-
margin: 0 5px;
107-
}
108-
109-
#midiPlayer_bar {
110-
position: relative;
111-
flex-grow: 1;
112-
margin: 0 5px;
113-
114-
&::before {
115-
position: absolute;
116-
inset: 50% 0 auto 0;
117-
height: 1px;
118-
background-color: #ccc;
119-
content: " ";
120-
}
84+
padding: 0;
85+
left: 50%;
86+
transform: translate(-50%, -12px);
87+
display: none;
12188

122-
#midiPlayer_progress {
123-
position: absolute;
124-
top: 50%;
125-
left: 0;
126-
height: 4px;
127-
margin-top: -2px;
128-
background-color: #ff9a23 !important;
129-
width: 0;
130-
131-
&::after {
132-
position: absolute;
133-
inset: -3px 0 -3px auto;
134-
width: 2px;
135-
background-color: #af742d;
136-
content: " ";
137-
border-radius: 2px;
138-
}
139-
}
140-
}
89+
.tx-dlf-score-midi-active.tx-dlf-score-visible & {
90+
display: block;
91+
}
14192

142-
a.icon {
143-
position: relative;
144-
display: inline-block;
145-
background: white;
146-
width: 30px;
147-
height: 30px;
148-
border-radius: 15px;
149-
border: 2px solid #6887a3;
150-
margin: 0 5px;
151-
152-
&.play::before {
153-
position: absolute;
154-
top: 50%;
155-
left: 50%;
156-
width: 0;
157-
height: 0;
158-
margin: -5px 0 0 -3px;
159-
border: solid transparent;
160-
border-width: 5px 0 5px 8px;
161-
border-left-color: #6887a3;
162-
content: " ";
163-
}
93+
&::part(control-panel) {
94+
background: white;
95+
border-radius: 40px;
96+
border: 1px solid #eee;
97+
}
16498

165-
&.pause {
166-
&::before, &::after {
167-
position: relative;
168-
width: 4px;
169-
height: 12px;
170-
margin: 7px 1px;
171-
background-color: #6887a3;
172-
display: inline-block;
173-
content: " ";
174-
border-radius: 2px;
175-
}
176-
}
99+
&::part(play-button) {
100+
color: #6887a3;
101+
border: 2px solid #6887a3;
102+
border-radius: 15px;
103+
}
177104

178-
&.stop::before {
179-
position: relative;
180-
width: 10px;
181-
height: 10px;
182-
background-color: #6887a3;
183-
margin-bottom: -4px;
184-
border-radius: 2px;
185-
display: inline-block;
186-
content: " ";
187-
}
105+
&::part(play-button):hover {
106+
background: white;
107+
transform: scale(1.1);
108+
}
188109

189-
&:last-child {
190-
margin-right: 0;
191-
}
192-
}
110+
&::part(time) {
111+
color: #6887a3;
193112
}
194113

195114
@media screen and (min-width: @tabletLandscapeViewportWidth) {
196-
inset: auto calc(25% + 40px + 12px) 0 calc(25% + 40px + 12px);
197-
198-
.midi-active.score-visible & {
199-
bottom: 20px;
200-
}
201-
202-
#midiPlayer_div {
203-
a.icon {
204-
width: 26px;
205-
height: 26px;
206-
207-
&.pause {
208-
&::before, &::after {
209-
margin-top: 5px;
210-
}
211-
}
212-
213-
&.stop::before {
214-
margin-bottom: -2px;
215-
}
216-
}
115+
.tx-dlf-score-midi-active.tx-dlf-score-visible & {
116+
bottom: 0;
217117
}
218118
}
219119
}

‎Resources/Private/Less/structure.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,7 @@ a {
310310
padding: 0;
311311
.tx-dlf-map {
312312
top: 0;
313-
.score-visible & {
313+
.tx-dlf-score-visible & {
314314
.custom-zoom {
315315
position: absolute;
316316
inset: auto 50% 20px auto;

‎Resources/Private/Partials/PageView.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,6 @@ <h2>
7878
<div class="fulltext-container">
7979
<div id="tx-dlf-fulltextselection"></div>
8080
</div>
81-
<div class="score-container">
82-
<div id="tx-dlf-score-0"></div>
83-
</div>
8481
</f:else>
8582
</f:if>
8683

‎Resources/Private/Plugins/Kitodo/Templates/PageView/Main.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727

2828
<div id="tx-dfgviewer-map-0" class="tx-dlf-map"></div>
2929

30-
<kitodo:jsFooter inlineCode="{viewerConfiguration}" />
30+
<f:if condition="{scores}">
31+
<div class="score-container">
32+
<div id="tx-dlf-score-0"></div>
33+
</div>
34+
<midi-player id="tx-dlf-score-midi-player"></midi-player>
35+
</f:if>
3136

37+
<kitodo:jsFooter inlineCode="{viewerConfiguration}" />
3238
</html>

‎Resources/Public/Css/allStyles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Resources/Public/Css/webStyles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)