345 lines
17 KiB
HTML
345 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SRF Sport Recordings</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; padding: 20px; }
|
|
h1 { color: #fff; margin-bottom: 8px; font-size: 1.8em; }
|
|
h2 { color: #ccc; margin: 24px 0 12px; font-size: 1.3em; border-bottom: 1px solid #333; padding-bottom: 6px; }
|
|
.subtitle { color: #999; margin-bottom: 20px; font-size: 0.9em; }
|
|
table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; }
|
|
th { text-align: left; padding: 10px 8px; border-bottom: 2px solid #444; color: #aaa; font-size: 0.85em; text-transform: uppercase; }
|
|
td { padding: 10px 8px; border-bottom: 1px solid #2a2a3e; }
|
|
tr:hover { background: #2a2a3e; }
|
|
.btn { padding: 6px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85em; color: #fff; transition: opacity 0.2s; }
|
|
.btn:hover { opacity: 0.85; }
|
|
.btn-record { background: #4CAF50; }
|
|
.btn-stop { background: #FF9800; }
|
|
.btn-cancel { background: #9E9E9E; }
|
|
.btn-delete { background: #f44336; }
|
|
.btn-refresh { background: #2196F3; margin-bottom: 16px; }
|
|
.status { padding: 3px 8px; border-radius: 3px; font-size: 0.8em; font-weight: 600; }
|
|
.status-scheduled { background: #1565C0; }
|
|
.status-waiting { background: #E65100; }
|
|
.status-recording { background: #2E7D32; }
|
|
.status-failed { background: #C62828; }
|
|
.msg { padding: 12px; color: #999; font-style: italic; }
|
|
.error { color: #f44; }
|
|
.login-form { max-width: 400px; margin: 60px auto; }
|
|
.login-form input { width: 100%; padding: 10px; margin: 8px 0; background: #2a2a3e; border: 1px solid #444; color: #fff; border-radius: 4px; font-size: 1em; }
|
|
.login-form .btn { width: 100%; padding: 12px; font-size: 1em; margin-top: 12px; }
|
|
@media (max-width: 600px) { body { padding: 10px; } td, th { padding: 6px 4px; font-size: 0.85em; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="loginSection" style="display:none;">
|
|
<div class="login-form">
|
|
<h1>SRF Sport Recordings</h1>
|
|
<p class="subtitle">Sign in to your Jellyfin server</p>
|
|
<input type="text" id="loginServer" placeholder="Server URL (e.g. http://192.168.1.50:8096)" />
|
|
<input type="text" id="loginUser" placeholder="Username" />
|
|
<input type="password" id="loginPass" placeholder="Password" />
|
|
<button class="btn btn-record" onclick="SRFRec.login()">Sign In</button>
|
|
<p id="loginError" class="error" style="margin-top:10px;"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mainSection" style="display:none;">
|
|
<h1>SRF Sport Recordings</h1>
|
|
<p class="subtitle">Browse upcoming sport livestreams and schedule recordings. <span id="userInfo"></span></p>
|
|
|
|
<h2>Upcoming Sport Livestreams</h2>
|
|
<button class="btn btn-refresh" onclick="SRFRec.loadSchedule()">Refresh Schedule</button>
|
|
<div id="scheduleContainer"><p class="msg">Loading schedule...</p></div>
|
|
|
|
<h2>Scheduled & Active Recordings</h2>
|
|
<div id="activeRecordingsContainer"><p class="msg">Loading...</p></div>
|
|
|
|
<h2>Completed Recordings</h2>
|
|
<button class="btn btn-refresh" onclick="SRFRec.loadRecordings()">Refresh</button>
|
|
<div id="completedRecordingsContainer"><p class="msg">Loading...</p></div>
|
|
</div>
|
|
|
|
<script>
|
|
var SRFRec = {
|
|
serverUrl: '',
|
|
token: '',
|
|
|
|
init: function() {
|
|
// Check if we're inside Jellyfin's web client (ApiClient available)
|
|
if (typeof ApiClient !== 'undefined' && ApiClient.accessToken()) {
|
|
this.serverUrl = ApiClient.serverAddress();
|
|
this.token = ApiClient.accessToken();
|
|
this.showMain();
|
|
return;
|
|
}
|
|
|
|
// Check localStorage for saved session
|
|
var saved = localStorage.getItem('srfRecSession');
|
|
if (saved) {
|
|
try {
|
|
var session = JSON.parse(saved);
|
|
this.serverUrl = session.serverUrl;
|
|
this.token = session.token;
|
|
// Verify token still works
|
|
this.verifySession(session);
|
|
return;
|
|
} catch(e) { /* fall through to login */ }
|
|
}
|
|
|
|
// Show login form
|
|
var serverInput = document.getElementById('loginServer');
|
|
serverInput.value = window.location.origin;
|
|
document.getElementById('loginSection').style.display = 'block';
|
|
},
|
|
|
|
verifySession: function(session) {
|
|
var self = this;
|
|
fetch(this.serverUrl + '/System/Info', {
|
|
headers: { 'X-Emby-Token': this.token }
|
|
}).then(function(r) {
|
|
if (r.ok) {
|
|
document.getElementById('userInfo').textContent = '(Server: ' + self.serverUrl + ')';
|
|
self.showMain();
|
|
} else {
|
|
localStorage.removeItem('srfRecSession');
|
|
document.getElementById('loginSection').style.display = 'block';
|
|
}
|
|
}).catch(function() {
|
|
localStorage.removeItem('srfRecSession');
|
|
document.getElementById('loginSection').style.display = 'block';
|
|
});
|
|
},
|
|
|
|
login: function() {
|
|
var self = this;
|
|
var server = document.getElementById('loginServer').value.replace(/\/+$/, '');
|
|
var user = document.getElementById('loginUser').value;
|
|
var pass = document.getElementById('loginPass').value;
|
|
var errorEl = document.getElementById('loginError');
|
|
errorEl.textContent = '';
|
|
|
|
fetch(server + '/Users/AuthenticateByName', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Emby-Authorization': 'MediaBrowser Client="SRF Recordings", Device="Web", DeviceId="srfrec-' + Date.now() + '", Version="1.0.0"'
|
|
},
|
|
body: JSON.stringify({ Username: user, Pw: pass })
|
|
})
|
|
.then(function(r) {
|
|
if (!r.ok) throw new Error('Authentication failed');
|
|
return r.json();
|
|
})
|
|
.then(function(data) {
|
|
self.serverUrl = server;
|
|
self.token = data.AccessToken;
|
|
localStorage.setItem('srfRecSession', JSON.stringify({
|
|
serverUrl: server,
|
|
token: data.AccessToken,
|
|
userName: data.User.Name
|
|
}));
|
|
document.getElementById('userInfo').textContent = '(Signed in as ' + data.User.Name + ')';
|
|
self.showMain();
|
|
})
|
|
.catch(function(err) {
|
|
errorEl.textContent = err.message;
|
|
});
|
|
},
|
|
|
|
showMain: function() {
|
|
document.getElementById('loginSection').style.display = 'none';
|
|
document.getElementById('mainSection').style.display = 'block';
|
|
this.loadSchedule();
|
|
this.loadRecordings();
|
|
},
|
|
|
|
getHeaders: function() {
|
|
return { 'X-Emby-Token': this.token };
|
|
},
|
|
|
|
formatDate: function(dateStr) {
|
|
if (!dateStr) return 'N/A';
|
|
var d = new Date(dateStr);
|
|
return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
},
|
|
|
|
formatSize: function(bytes) {
|
|
if (!bytes) return '';
|
|
if (bytes > 1073741824) return (bytes / 1073741824).toFixed(1) + ' GB';
|
|
if (bytes > 1048576) return (bytes / 1048576).toFixed(0) + ' MB';
|
|
return (bytes / 1024).toFixed(0) + ' KB';
|
|
},
|
|
|
|
loadSchedule: function() {
|
|
var container = document.getElementById('scheduleContainer');
|
|
container.innerHTML = '<p class="msg">Loading schedule...</p>';
|
|
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Schedule', { headers: this.getHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(programs) {
|
|
if (!programs || programs.length === 0) {
|
|
container.innerHTML = '<p class="msg">No upcoming sport livestreams found.</p>';
|
|
return;
|
|
}
|
|
|
|
var html = '<table>';
|
|
html += '<thead><tr><th>Title</th><th>Start</th><th>End</th><th>Action</th></tr></thead><tbody>';
|
|
|
|
programs.forEach(function(p) {
|
|
html += '<tr>';
|
|
html += '<td>' + (p.title || 'Unknown') + '</td>';
|
|
html += '<td>' + SRFRec.formatDate(p.validFrom || p.date) + '</td>';
|
|
html += '<td>' + SRFRec.formatDate(p.validTo) + '</td>';
|
|
html += '<td><button class="btn btn-record" onclick="SRFRec.scheduleRecording(\'' + encodeURIComponent(p.urn) + '\')">Record</button></td>';
|
|
html += '</tr>';
|
|
});
|
|
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
})
|
|
.catch(function(err) {
|
|
container.innerHTML = '<p class="error">Error loading schedule: ' + err.message + '</p>';
|
|
});
|
|
},
|
|
|
|
scheduleRecording: function(encodedUrn) {
|
|
var self = this;
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Schedule/' + encodedUrn, {
|
|
method: 'POST',
|
|
headers: this.getHeaders()
|
|
})
|
|
.then(function(r) {
|
|
if (r.ok) {
|
|
alert('Recording scheduled!');
|
|
self.loadRecordings();
|
|
} else {
|
|
alert('Failed to schedule recording');
|
|
}
|
|
})
|
|
.catch(function(err) { alert('Error: ' + err.message); });
|
|
},
|
|
|
|
loadRecordings: function() {
|
|
this.loadActiveRecordings();
|
|
this.loadCompletedRecordings();
|
|
},
|
|
|
|
loadActiveRecordings: function() {
|
|
var container = document.getElementById('activeRecordingsContainer');
|
|
container.innerHTML = '<p class="msg">Loading...</p>';
|
|
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/All', { headers: this.getHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(recordings) {
|
|
var activeStates = ['Scheduled', 'WaitingForStream', 'Recording', 0, 1, 2];
|
|
var active = recordings.filter(function(r) {
|
|
return activeStates.indexOf(r.state) !== -1;
|
|
});
|
|
|
|
if (active.length === 0) {
|
|
container.innerHTML = '<p class="msg">No scheduled or active recordings.</p>';
|
|
return;
|
|
}
|
|
|
|
var stateMap = {
|
|
'Scheduled': {label: 'Scheduled', cls: 'status-scheduled'},
|
|
'WaitingForStream': {label: 'Waiting', cls: 'status-waiting'},
|
|
'Recording': {label: 'Recording', cls: 'status-recording'},
|
|
0: {label: 'Scheduled', cls: 'status-scheduled'},
|
|
1: {label: 'Waiting', cls: 'status-waiting'},
|
|
2: {label: 'Recording', cls: 'status-recording'}
|
|
};
|
|
|
|
var html = '<table>';
|
|
html += '<thead><tr><th>Title</th><th>Status</th><th>Start</th><th>Action</th></tr></thead><tbody>';
|
|
|
|
active.forEach(function(r) {
|
|
var st = stateMap[r.state] || {label: r.state, cls: ''};
|
|
html += '<tr>';
|
|
html += '<td>' + (r.title || 'Unknown') + '</td>';
|
|
html += '<td><span class="status ' + st.cls + '">' + st.label + '</span></td>';
|
|
html += '<td>' + SRFRec.formatDate(r.validFrom) + '</td>';
|
|
html += '<td>';
|
|
if (r.state === 2 || r.state === 'Recording') {
|
|
html += '<button class="btn btn-stop" onclick="SRFRec.stopRecording(\'' + r.id + '\')">Stop</button>';
|
|
} else {
|
|
html += '<button class="btn btn-cancel" onclick="SRFRec.cancelRecording(\'' + r.id + '\')">Cancel</button>';
|
|
}
|
|
html += '</td></tr>';
|
|
});
|
|
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
})
|
|
.catch(function(err) {
|
|
container.innerHTML = '<p class="error">Error: ' + err.message + '</p>';
|
|
});
|
|
},
|
|
|
|
loadCompletedRecordings: function() {
|
|
var container = document.getElementById('completedRecordingsContainer');
|
|
container.innerHTML = '<p class="msg">Loading...</p>';
|
|
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Completed', { headers: this.getHeaders() })
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(recordings) {
|
|
if (!recordings || recordings.length === 0) {
|
|
container.innerHTML = '<p class="msg">No completed recordings.</p>';
|
|
return;
|
|
}
|
|
|
|
var html = '<table>';
|
|
html += '<thead><tr><th>Title</th><th>Recorded</th><th>Size</th><th>Action</th></tr></thead><tbody>';
|
|
|
|
recordings.forEach(function(r) {
|
|
html += '<tr>';
|
|
html += '<td>' + (r.title || 'Unknown') + '</td>';
|
|
html += '<td>' + SRFRec.formatDate(r.recordingStartedAt) + '</td>';
|
|
html += '<td>' + SRFRec.formatSize(r.fileSizeBytes) + '</td>';
|
|
html += '<td><button class="btn btn-delete" onclick="SRFRec.deleteRecording(\'' + r.id + '\')">Delete</button></td>';
|
|
html += '</tr>';
|
|
});
|
|
|
|
html += '</tbody></table>';
|
|
container.innerHTML = html;
|
|
})
|
|
.catch(function(err) {
|
|
container.innerHTML = '<p class="error">Error: ' + err.message + '</p>';
|
|
});
|
|
},
|
|
|
|
stopRecording: function(id) {
|
|
var self = this;
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Active/' + id + '/Stop', {
|
|
method: 'POST',
|
|
headers: this.getHeaders()
|
|
}).then(function() { self.loadRecordings(); });
|
|
},
|
|
|
|
cancelRecording: function(id) {
|
|
var self = this;
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Schedule/' + id, {
|
|
method: 'DELETE',
|
|
headers: this.getHeaders()
|
|
}).then(function() { self.loadRecordings(); });
|
|
},
|
|
|
|
deleteRecording: function(id) {
|
|
if (!confirm('Delete this recording and its file?')) return;
|
|
var self = this;
|
|
fetch(this.serverUrl + '/Plugins/SRFPlay/Recording/Completed/' + id + '?deleteFile=true', {
|
|
method: 'DELETE',
|
|
headers: this.getHeaders()
|
|
}).then(function() { self.loadRecordings(); });
|
|
}
|
|
};
|
|
|
|
SRFRec.init();
|
|
</script>
|
|
</body>
|
|
</html>
|