Skip to content

Commit c6a1064

Browse files
ablazejukablazejuk
authored
Merge pull request #4 from ablazejuk/editor-tab
Create editor tab, allow inserting lines at specific index and exporting a new updated file
2 parents 3a49c8b + 7a67197 commit c6a1064

File tree

2 files changed

+234
-88
lines changed

2 files changed

+234
-88
lines changed

‎editor.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
let selectedFile = null;
2+
3+
$('#chords-file-editor').change(function (event) {
4+
selectedFile = event.target.files[0];
5+
});
6+
7+
$('#add-empty-line-button').click(function () {
8+
if (!selectedFile) {
9+
return;
10+
}
11+
12+
const reader = new FileReader();
13+
14+
reader.onload = function (e) {
15+
const lineNumber = $('#line-number').val();
16+
17+
if (lineNumber === '') {
18+
return;
19+
}
20+
21+
insertEmptyLineAtIndex(e.target.result, lineNumber);
22+
};
23+
24+
reader.onerror = function () {
25+
console.error("Error reading file");
26+
};
27+
28+
reader.readAsText(selectedFile);
29+
});
30+
31+
function insertEmptyLineAtIndex(fileContent, index) {
32+
const inputFileContentArray = fileContent.split(/\r?\n/);
33+
let afterIndex = false;
34+
let elementRowIndex = 0;
35+
const outputFileContentArray = [];
36+
let lastInterval = '';
37+
38+
inputFileContentArray.forEach(function (line) {
39+
if (!line.startsWith('#')) {
40+
elementRowIndex++
41+
}
42+
43+
if (line === index) {
44+
afterIndex = true;
45+
outputFileContentArray.push(index);
46+
47+
const lastIntervalEnd = lastInterval.split(' --> ')[1];
48+
const updatedInterval = lastIntervalEnd + ' --> ' + lastIntervalEnd;
49+
outputFileContentArray.push(updatedInterval);
50+
outputFileContentArray.push('');
51+
outputFileContentArray.push('');
52+
outputFileContentArray.push('');
53+
}
54+
55+
let updatedLine = line;
56+
57+
switch (elementRowIndex) {
58+
case 1:
59+
if (afterIndex) {
60+
updatedLine = String(Number(line) + 1);
61+
}
62+
break;
63+
case 2:
64+
lastInterval = line;
65+
break;
66+
case 3:
67+
case 4:
68+
break;
69+
default:
70+
elementRowIndex = 0;
71+
}
72+
73+
outputFileContentArray.push(updatedLine);
74+
});
75+
76+
const filename = getFilenameWithoutExtension(selectedFile.name) + ' (new).srt';
77+
exportToSrtFile(filename, outputFileContentArray)
78+
}
79+
80+
function exportToSrtFile(filename, fileContentArray) {
81+
const fileContent = fileContentArray.join('\n');
82+
const blob = new Blob([fileContent], { type: 'text/plain' });
83+
const link = document.createElement('a');
84+
85+
link.href = URL.createObjectURL(blob);
86+
link.download = filename;
87+
88+
document.body.appendChild(link);
89+
link.click();
90+
91+
document.body.removeChild(link);
92+
URL.revokeObjectURL(link.href);
93+
}
94+
95+
function getFilenameWithoutExtension(filename) {
96+
return filename.substring(0, filename.lastIndexOf('.')) || filename;
97+
}

‎index.html‎

Lines changed: 137 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -17,114 +17,163 @@
1717
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
1818
</head>
1919
<body>
20-
<div class="container-fluid">
21-
<div class="text-center py-3">
22-
<h2>Musicians' Helper - Repeater</h2>
23-
<p>Insert a YouTube URL and set loop points to repeat sections of a song.</p>
20+
<nav>
21+
<div class="nav nav-tabs justify-content-end" role="tablist">
22+
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#repeater" type="button" role="tab">Repeater</button>
23+
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#editor" type="button" role="tab">Editor</button>
2424
</div>
25-
26-
<div class="row">
27-
<!-- Video URL and Controls Column -->
28-
<div class="col-md-6 col-sm-12">
29-
<form>
30-
<div class="form-group row">
31-
<label class="col-md-4 col-form-label" for="chords-file">Chords File (.srt)</label>
32-
<div class="col-md-8">
33-
<div class="custom-file">
34-
<input type="file" class="custom-file-input" id="chords-file">
35-
<label class="custom-file-label" for="chords-file">Choose File</label>
25+
</nav>
26+
<div class="tab-content">
27+
<div class="tab-pane fade show active" id="repeater">
28+
<div class="container-fluid">
29+
<div class="text-center py-3">
30+
<h2>Musicians' Helper - Repeater</h2>
31+
<p>Insert a YouTube URL and set loop points to repeat sections of a song.</p>
32+
</div>
33+
34+
<div class="row">
35+
<!-- Video URL and Controls Column -->
36+
<div class="col-md-6 col-sm-12">
37+
<form>
38+
<div class="form-group row">
39+
<label class="col-md-4 col-form-label" for="chords-file">Chords File (.srt)</label>
40+
<div class="col-md-8">
41+
<div class="custom-file">
42+
<input type="file" class="custom-file-input" id="chords-file">
43+
<label class="custom-file-label" for="chords-file">Choose File</label>
44+
</div>
45+
</div>
3646
</div>
37-
</div>
38-
</div>
39-
40-
<div class="form-group row">
41-
<label class="col-md-4 col-form-label" for="video-url">Video URL</label>
42-
<div class="col-md-8 col-sm-12">
43-
<input id="video-url" class="form-control" name="video-url" type="text" placeholder="https://...">
44-
<div id="url-invalid" class="invalid-feedback">
45-
Invalid URL. Insert a valid YouTube URL.
47+
48+
<div class="form-group row">
49+
<label class="col-md-4 col-form-label" for="video-url">Video URL</label>
50+
<div class="col-md-8 col-sm-12">
51+
<input id="video-url" class="form-control" name="video-url" type="text" placeholder="https://...">
52+
<div id="url-invalid" class="invalid-feedback">
53+
Invalid URL. Insert a valid YouTube URL.
54+
</div>
55+
</div>
4656
</div>
47-
</div>
48-
</div>
49-
50-
<!-- Loop Start Control -->
51-
<div class="form-group row">
52-
<label class="col-md-4 col-form-label" for="start">Start <span class="text-muted">(s)</span></label>
53-
<div class="col-md-8">
54-
<div class="input-group">
55-
<div class="input-group-prepend">
56-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
57-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
58-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
57+
58+
<!-- Loop Start Control -->
59+
<div class="form-group row">
60+
<label class="col-md-4 col-form-label" for="start">Start <span class="text-muted">(s)</span></label>
61+
<div class="col-md-8">
62+
<div class="input-group">
63+
<div class="input-group-prepend">
64+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
65+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
66+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
67+
</div>
68+
<input id="start" class="form-control" name="start" type="number" min="0" step=".1" placeholder="16.2">
69+
<div class="input-group-append">
70+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
71+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
72+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
73+
</div>
74+
</div>
5975
</div>
60-
<input id="start" class="form-control" name="start" type="number" min="0" step=".1" placeholder="16.2">
61-
<div class="input-group-append">
62-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
63-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
64-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
76+
</div>
77+
78+
<!-- Loop Duration Control -->
79+
<div class="form-group row">
80+
<label class="col-md-4 col-form-label" for="duration">Duration <span class="text-muted">(s)</span></label>
81+
<div class="col-md-8">
82+
<div class="input-group">
83+
<div class="input-group-prepend">
84+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
85+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
86+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
87+
</div>
88+
<input id="duration" class="form-control" name="duration" type="number" min="0" step=".1" placeholder="42.8">
89+
<div class="input-group-append">
90+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
91+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
92+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
98+
<!-- Loop End Control -->
99+
<div class="form-group row">
100+
<label class="col-md-4 col-form-label" for="end">End <span class="text-muted">(s)</span></label>
101+
<div class="col-md-8">
102+
<div class="input-group">
103+
<div class="input-group-prepend">
104+
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
105+
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
106+
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
107+
</div>
108+
<input id="end" class="form-control" name="end" type="number" min="0" step=".1" placeholder="42.8">
109+
<div class="input-group-append">
110+
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
111+
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
112+
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
113+
</div>
114+
</div>
65115
</div>
66116
</div>
117+
</form>
118+
119+
<!-- Mobile Video Player -->
120+
<div class="sticky text-center">
121+
<div id="mobile-player" style="display:none"></div>
122+
</div>
123+
124+
<div id="chords"></div>
125+
</div>
126+
127+
<!-- Desktop Video Player Column -->
128+
<div class="col-md-6 col-sm-12 text-center">
129+
<div class="sticky">
130+
<div id="desktop-player" style="display:none"></div>
67131
</div>
68132
</div>
133+
</div>
134+
</div>
135+
</div>
136+
<div class="tab-pane fade" id="editor">
137+
<div class="container-fluid">
138+
<div class="text-center py-3">
139+
<h2>Musicians' Helper - Editor</h2>
140+
<p>Upload your SRT file and add a line at any position, shifting the next lines.</p>
141+
</div>
69142

70-
<!-- Loop Duration Control -->
71-
<div class="form-group row">
72-
<label class="col-md-4 col-form-label" for="duration">Duration <span class="text-muted">(s)</span></label>
73-
<div class="col-md-8">
74-
<div class="input-group">
75-
<div class="input-group-prepend">
76-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
77-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
78-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
79-
</div>
80-
<input id="duration" class="form-control" name="duration" type="number" min="0" step=".1" placeholder="42.8">
81-
<div class="input-group-append">
82-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
83-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
84-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
143+
<div class="row">
144+
<div class="col-md-8 offset-md-2">
145+
<form>
146+
<div class="form-group row">
147+
<label class="col-md-4 col-form-label" for="chords-file-editor">Chords File (.srt)</label>
148+
<div class="col-md-8">
149+
<div class="custom-file">
150+
<input type="file" class="custom-file-input" id="chords-file-editor">
151+
<label class="custom-file-label" for="chords-file-editor">Choose File</label>
152+
</div>
85153
</div>
86154
</div>
87-
</div>
88-
</div>
89155

90-
<!-- Loop End Control -->
91-
<div class="form-group row">
92-
<label class="col-md-4 col-form-label" for="end">End <span class="text-muted">(s)</span></label>
93-
<div class="col-md-8">
94-
<div class="input-group">
95-
<div class="input-group-prepend">
96-
<button class="btn btn-outline-secondary subtract" data-amount="10" type="button">-10</button>
97-
<button class="btn btn-outline-secondary subtract" data-amount="1" type="button">-1</button>
98-
<button class="btn btn-outline-secondary subtract" data-amount="0.1" type="button">-0.1</button>
156+
<div class="form-group row">
157+
<label class="col-md-4 col-form-label" for="line-number">Line Number</label>
158+
<div class="col-md-8">
159+
<input id="line-number" class="form-control" name="line-number" type="number" min="0" step="1" placeholder="30">
99160
</div>
100-
<input id="end" class="form-control" name="end" type="number" min="0" step=".1" placeholder="42.8">
101-
<div class="input-group-append">
102-
<button class="btn btn-outline-secondary sum" data-amount="0.1" type="button">+0.1</button>
103-
<button class="btn btn-outline-secondary sum" data-amount="1" type="button">+1</button>
104-
<button class="btn btn-outline-secondary sum" data-amount="10" type="button">+10</button>
161+
</div>
162+
163+
<div class="form-group row">
164+
<div class="col-md-12 text-center">
165+
<button id="add-empty-line-button" type="button">Add Empty Line</button>
105166
</div>
106167
</div>
107-
</div>
168+
</form>
108169
</div>
109-
</form>
110-
111-
<!-- Mobile Video Player -->
112-
<div class="sticky text-center">
113-
<div id="mobile-player" style="display:none"></div>
114-
</div>
115-
116-
<div id="chords"></div>
117-
</div>
118-
119-
<!-- Desktop Video Player Column -->
120-
<div class="col-md-6 col-sm-12 text-center">
121-
<div class="sticky">
122-
<div id="desktop-player" style="display:none"></div>
123170
</div>
124171
</div>
125172
</div>
126173
</div>
127-
174+
128175
<script src="scripts.js"></script>
176+
<script src="editor.js"></script>
177+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
129178
</body>
130179
</html>

0 commit comments

Comments
 (0)