series-player/editor.html at master · althropic/series-player · 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
<!DOCTYPE html>
<html>
<head>
    <title>Watch Progress Editor</title>
    <style>
        body { font-family: sans-serif; background: #f4f4f9; padding: 20px; color: #333; }
        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        textarea { width: 100%; height: 100px; margin-bottom: 10px; font-family: monospace; }
        .episode-card { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
        .episode-info { flex-grow: 1; }
        .episode-title { font-weight: bold; font-size: 0.9em; color: #555; }
        .inputs { display: flex; gap: 10px; align-items: center; }
        input[type="number"] { width: 60px; padding: 5px; }
        button { cursor: pointer; padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 4px; }
        button:hover { background: #0056b3; }
        .export-area { margin-top: 20px; border-top: 2px solid #eee; pt: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h2>Office Watch Progress Editor</h2>
        <p>1. Paste your JSON content here:</p>
        <textarea id="jsonInput" placeholder="Paste .watch_progress.json content here..."></textarea>
        <button onclick="loadData()">Load Episodes</button>

        <div id="editor"></div>

        <div class="export-area" id="exportSection" style="display:none;">
            <h3>2. Get your updated file:</h3>
            <button onclick="exportJSON()">Copy Updated JSON</button>
            <textarea id="jsonOutput" readonly style="margin-top:10px; height: 150px;"></textarea>
        </div>
    </div>

    <script>
        let currentData = {};

        function loadData() {
            try {
                currentData = JSON.parse(document.getElementById('jsonInput').value);
                renderEditor();
                document.getElementById('exportSection').style.display = 'block';
            } catch (e) { alert("Invalid JSON format. Please check your file."); }
        }

        function renderEditor() {
            const container = document.getElementById('editor');
            container.innerHTML = '';
            for (const [filename, details] of Object.entries(currentData)) {
                const card = document.createElement('div');
                card.className = 'episode-card';
                card.innerHTML = `
                    <div class="episode-info">
                        <div class="episode-title">${filename}</div>
                        <small>Duration: ${details.duration}s</small>
                    </div>
                    <div class="inputs">
                        <label>Pos:</label>
                        <input type="number" value="${details.position}" onchange="updateVal('${filename}', 'position', this.value)">
                        <label>%:</label>
                        <input type="number" value="${details.percent_complete}" onchange="updateVal('${filename}', 'percent_complete', this.value)">
                        <label>Done:</label>
                        <input type="checkbox" ${details.is_complete ? 'checked' : ''} onchange="updateVal('${filename}', 'is_complete', this.checked)">
                    </div>
                `;
                container.appendChild(card);
            }
        }

        function updateVal(key, field, val) {
            currentData[key][field] = (field === 'is_complete') ? val : parseInt(val);
        }

        function exportJSON() {
            const output = JSON.stringify(currentData, null, 4);
            document.getElementById('jsonOutput').value = output;
            document.getElementById('jsonOutput').select();
            document.execCommand('copy');
            alert("Copied to clipboard! You can now paste this back into your .watch_progress.json file.");
        }
    </script>
</body>
</html>