webvtt/timecodes.html at main · dvorkanton/webvtt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VTT Timecode Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px auto;
            max-width: 800px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .textarea-container {
            display: flex;
            justify-content: space-between;
        }
        textarea {
            flex: 1;
            height: 300px;
            margin: 10px;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button, input[type="file"] {
            display: inline-block;
            margin: 10px 5px;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #007BFF;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
        }
        button:hover, input[type="file"]:hover {
            background-color: #0056b3;
        }
        input[type="file"] {
            text-align: center;
            cursor: pointer;
        }
        .frame-rate {
            margin: 10px 5px;
            font-size: 16px;
        }
        .controls {
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>VTT Timecode Converter</h1>

    <!-- Controls Section -->
    <div class="controls">
        <label for="frameRate" class="frame-rate">Frame Rate (FPS):</label>
        <input type="number" id="frameRate" value="25" min="1" max="120">
        <input type="file" id="fileInput" accept=".xlsx">
        <button onclick="convertContent()">Convert</button>
    </div>

    <!-- Textarea Conversion Section -->
    <div class="textarea-container">
        <textarea id="input" placeholder="Original WEBVTT content"></textarea>
        <textarea id="output" placeholder="Converted WEBVTT content" readonly></textarea>
    </div>

    <script>
        let uploadedFile = null;

        document.getElementById('fileInput').addEventListener('change', handleFileUpload);

        async function handleFileUpload(event) {
            const file = event.target.files[0];
            if (!file) return;

            const workbook = await file.arrayBuffer().then(buffer => XLSX.read(buffer, { type: 'array' }));
            const sheetName = workbook.SheetNames[0];
            const sheet = workbook.Sheets[sheetName];
            const rows = XLSX.utils.sheet_to_json(sheet, { header: 1 });

            const originalContent = rows.map(row => row[0] || '').join('\n');
            document.getElementById('input').value = originalContent;
            document.getElementById('output').value = ''; // Clear output
            uploadedFile = { file, rows }; // Save file and rows for later conversion
        }

        function convertContent() {
            const frameRate = parseFloat(document.getElementById('frameRate').value) || 25;
            const input = document.getElementById('input').value;
            const lines = input.split('\n');

            const convertedContent = lines.map(line => convertTimecodes(line, frameRate)).join('\n');
            document.getElementById('output').value = convertedContent;

            if (uploadedFile) {
                // Process the uploaded file's rows with the updated frame rate
                const convertedRows = uploadedFile.rows.map(row => {
                    if (row.length > 0) {
                        return [convertTimecodes(row[0], frameRate)];
                    }
                    return [''];
                });

                const outputWorkbook = XLSX.utils.book_new();
                const outputSheet = XLSX.utils.aoa_to_sheet(convertedRows);
                XLSX.utils.book_append_sheet(outputWorkbook, outputSheet, 'Converted');

                // Write as an array and wrap in a Blob
                const arrayBuffer = XLSX.write(outputWorkbook, { bookType: 'xlsx', type: 'array' });
                const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = uploadedFile.file.name.replace(/\.xlsx$/, '-converted.xlsx');
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            }
        }


        function convertTimecodes(line, frameRate) {
            return line.replace(/(\d{2}:\d{2}:\d{2})\.(\d{3})/g, (match, time, milliseconds) => {
                const totalMilliseconds = parseInt(milliseconds, 10);
                const frames = Math.floor((totalMilliseconds / 1000) * frameRate);
                return `${time}:${frames.toString().padStart(2, '0')}`;
            });
        }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</body>
</html>