Skip to content

Commit 2270a85

Browse files
ablazejukablazejuk
committed
Simplify controls and fix floating point rounding
1 parent 3c7152e commit 2270a85

File tree

3 files changed

+122
-47
lines changed

3 files changed

+122
-47
lines changed

‎index.html‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,103 +9,97 @@
99
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
1010

1111
<!-- Styles -->
12-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
13-
<link rel="stylesheet" href="styles.css">
14-
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
13+
<link rel="stylesheet" href="styles.css"> <!-- Link to your updated CSS file -->
14+
1515
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1616
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
1818
</head>
1919
<body>
2020
<div class="container-fluid">
21-
<div class="text-center py-5">
21+
<div class="text-center py-3">
2222
<h2>Musicians' Helper - Repeater</h2>
23-
<h3>A tool used by musicians to learn new songs.</h3>
24-
<p>
25-
Insert a YouTube video URL below and, by default, the loop
26-
will start at 0 seconds and restart at the end of the video.
27-
<br>
28-
Configure the loop start and end points to repeat specific parts of the song, saving time identifying notes and chords.
29-
</p>
23+
<p>Insert a YouTube URL and set loop points to repeat sections of a song.</p>
3024
</div>
3125

3226
<div class="row">
3327
<!-- Video URL and Controls Column -->
34-
<div class="col-md-6 col-sm-12 mb-4">
28+
<div class="col-md-6 col-sm-12">
3529
<form>
3630
<div class="form-group row">
3731
<label class="col-md-4 col-form-label" for="video_url">Video URL</label>
3832
<div class="col-md-8 col-sm-12">
39-
<input id="video-url" class="form-control" name="video_url" type="text" placeholder="https://www.youtube.com/watch?v=WqQKw8m-C2k">
33+
<input id="video-url" class="form-control" name="video_url" type="text" placeholder="https://...">
4034
<div id="url-invalid" class="invalid-feedback">
41-
Invalid URL. Please insert a valid YouTube video URL (https://www.youtube.com/watch?v={video_id}).
35+
Invalid URL. Insert a valid YouTube URL.
4236
</div>
4337
</div>
4438
</div>
4539

4640
<!-- Loop Start Control -->
4741
<div class="form-group row">
48-
<label class="col-md-4 col-form-label" for="start">Start <span class="text-muted">(seconds)</span></label>
42+
<label class="col-md-4 col-form-label" for="start">Start <span class="text-muted">(s)</span></label>
4943
<div class="col-md-8">
5044
<div class="input-group">
5145
<div class="input-group-prepend">
52-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10 s</button>
53-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1 s</button>
54-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-100 ms</button>
46+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
47+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
48+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
5549
</div>
5650
<input id="start" class="form-control" name="start" type="number" min="0" step=".1" placeholder="16.2">
5751
<div class="input-group-append">
58-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+100 ms</button>
59-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1 s</button>
60-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10 s</button>
52+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
53+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
54+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
6155
</div>
6256
</div>
6357
</div>
6458
</div>
6559

6660
<!-- Loop Duration Control -->
6761
<div class="form-group row">
68-
<label class="col-md-4 col-form-label" for="duration">Duration <span class="text-muted">(seconds)</span></label>
62+
<label class="col-md-4 col-form-label" for="duration">Duration <span class="text-muted">(s)</span></label>
6963
<div class="col-md-8">
7064
<div class="input-group">
7165
<div class="input-group-prepend">
72-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10 s</button>
73-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1 s</button>
74-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-100 ms</button>
66+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
67+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
68+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
7569
</div>
7670
<input id="duration" class="form-control" name="duration" type="number" min="0" step=".1" placeholder="42.8">
7771
<div class="input-group-append">
78-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+100 ms</button>
79-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1 s</button>
80-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10 s</button>
72+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
73+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
74+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
8175
</div>
8276
</div>
8377
</div>
8478
</div>
8579

8680
<!-- Loop End Control -->
8781
<div class="form-group row">
88-
<label class="col-md-4 col-form-label" for="end">End <span class="text-muted">(seconds)</span></label>
82+
<label class="col-md-4 col-form-label" for="end">End <span class="text-muted">(s)</span></label>
8983
<div class="col-md-8">
9084
<div class="input-group">
9185
<div class="input-group-prepend">
92-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10 s</button>
93-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1 s</button>
94-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-100 ms</button>
86+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
87+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
88+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
9589
</div>
9690
<input id="end" class="form-control" name="end" type="number" min="0" step=".1" placeholder="42.8">
9791
<div class="input-group-append">
98-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+100 ms</button>
99-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1 s</button>
100-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10 s</button>
92+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
93+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
94+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
10195
</div>
10296
</div>
10397
</div>
10498
</div>
10599

106100
<!-- Chords File Upload -->
107101
<div class="form-group row">
108-
<label class="col-md-4 col-form-label">Chords File <span class="text-muted">(.srt)</span></label>
102+
<label class="col-md-4 col-form-label">Chords File (.srt)</label>
109103
<div class="col-md-8 custom-file">
110104
<input type="file" class="custom-file-input" id="chords-file">
111105
<label class="custom-file-label" for="chords_file">Choose File</label>

‎scripts.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ function onPlayerStateChange(event) {
6969

7070
if (videoChanged) {
7171
duration = player.getDuration();
72-
$duration.val(duration);
72+
$duration.val(duration.toFixed(1));
7373
$('#start').val(0);
74-
$('#end').val(duration);
74+
$('#end').val(duration.toFixed(1));
7575
videoChanged = false;
7676
}
7777

@@ -182,18 +182,18 @@ $('#start').change( function () {
182182

183183
if (start > duration) {
184184
start = duration;
185-
$this.val(duration);
185+
$this.val(duration.toFixed(1));
186186
}
187187

188188
let duration_value = $('#duration').val();
189189

190190
if (parseFloat(start) + parseFloat(duration_value) > duration) {
191191
let new_duration = duration - start;
192-
$('#duration').val(duration - start);
192+
$('#duration').val((duration - start).toFixed(1));
193193
duration_value = new_duration;
194194
}
195195

196-
$('#end').val(parseFloat(start) + parseFloat(duration_value));
196+
$('#end').val((parseFloat(start) + parseFloat(duration_value)).toFixed(1));
197197

198198
applyChanges(duration_value)
199199
});
@@ -206,10 +206,10 @@ $('#duration').change( function () {
206206
if (new_end > duration) {
207207
new_end = duration;
208208
new_duration = new_end - start;
209-
$(this).val(new_duration);
209+
$(this).val(new_duration.toFixed(1));
210210
}
211211

212-
$('#end').val(new_end);
212+
$('#end').val(new_end.toFixed(1));
213213

214214
applyChanges(new_duration)
215215
});
@@ -219,7 +219,7 @@ $('#end').change( function () {
219219

220220
if (parseFloat(new_end) > duration) {
221221
new_end = duration;
222-
$(this).val(duration);
222+
$(this).val(duration.toFixed(1));
223223
}
224224

225225
let new_duration = new_end - $('#start').val();
@@ -229,7 +229,7 @@ $('#end').change( function () {
229229
new_duration = 0;
230230
}
231231

232-
$duration.val(new_duration);
232+
$duration.val(new_duration.toFixed(1));
233233
$duration.trigger('change');
234234
});
235235

‎styles.css‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Existing styles */
12
.chords {
23
font-family: monospace;
34
white-space: pre;
@@ -21,4 +22,84 @@
2122

2223
#chords p {
2324
margin-left: 1em;
24-
}
25+
}
26+
27+
/* New styles for responsiveness */
28+
.container-fluid {
29+
padding: 1rem;
30+
}
31+
32+
.text-center h2, .text-center h3, .text-center p {
33+
font-size: 1rem;
34+
}
35+
36+
.form-group .col-form-label {
37+
font-weight: 600;
38+
}
39+
40+
.input-group {
41+
display: flex;
42+
flex-wrap: wrap;
43+
}
44+
45+
.input-group .input-group-prepend,
46+
.input-group .input-group-append {
47+
display: flex;
48+
flex-wrap: nowrap;
49+
}
50+
51+
.input-group .input-group-prepend button,
52+
.input-group .input-group-append button {
53+
flex: 1;
54+
font-size: 0.9rem;
55+
}
56+
57+
.input-group input {
58+
width: 100%;
59+
}
60+
61+
.col-6 {
62+
flex: 1 1 100%;
63+
max-width: 100%;
64+
}
65+
66+
@media (min-width: 576px) {
67+
.col-6 {
68+
flex: 1 1 50%;
69+
max-width: 50%;
70+
}
71+
}
72+
73+
@media (max-width: 576px) {
74+
.text-center h2 {
75+
font-size: 1.5rem;
76+
}
77+
78+
.text-center h3 {
79+
font-size: 1.2rem;
80+
}
81+
82+
.text-center p {
83+
font-size: 0.9rem;
84+
}
85+
86+
.form-group .col-form-label {
87+
font-size: 0.9rem;
88+
text-align: left;
89+
}
90+
91+
.input-group-prepend button,
92+
.input-group-append button {
93+
padding: 0.25rem 0.5rem;
94+
font-size: 0.8rem;
95+
}
96+
97+
#video-url, #start, #duration, #end {
98+
font-size: 0.9rem;
99+
padding: 0.5rem;
100+
}
101+
102+
.custom-file-label, .custom-file-input {
103+
font-size: 0.9rem;
104+
}
105+
}

0 commit comments

Comments
 (0)