gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-08-06 09:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dev): implement extended video metadata and data-attribute inspector

Browse Source
This commit is contained in:
MacBook
2026-04-22 18:22:59 +02:00
parent 0e7b57ce71
commit e40e2e5101
3 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/content.js
+22 -1
View File
@@ -191,6 +191,22 @@
if (message.type === 'GET_VIDEO_STATE') {
const video = findVideo();
if (video) {
const dataAttributes = {};
if (video.attributes) {
for (const attr of video.attributes) {
if (attr.name.startsWith('data-')) {
dataAttributes[attr.name] = attr.value;
}
}
}
const metadata = (navigator.mediaSession && navigator.mediaSession.metadata) ? {
title: navigator.mediaSession.metadata.title,
artist: navigator.mediaSession.metadata.artist,
album: navigator.mediaSession.metadata.album,
artwork: Array.from(navigator.mediaSession.metadata.artwork || []).map(a => a.src)
} : null;
sendResponse({
paused: video.paused,
currentTime: video.currentTime,
@@ -199,7 +215,12 @@
muted: video.muted,
playbackRate: video.playbackRate,
url: window.location.href,
id: video.id || 'none'
id: video.id || 'none',
className: video.className || 'none',
src: video.src || 'none',
currentSrc: video.currentSrc || 'none',
dataAttributes,
metadata
});
} else {
sendResponse({ error: 'No video found' });
extension/popup.html
+1 -1
View File
@@ -328,7 +328,7 @@
</div>
<label>Video Debug Info</label>
<div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); min-height: 60px; line-height: 1.4;">
<div id="videoDebug" class="info-card" style="font-size: 10px; font-family: monospace; color: var(--text-muted); max-height: 250px; overflow-y: auto; line-height: 1.4;">
No tab selected or video detected.
</div>
extension/popup.js
+49 -23
View File
@@ -806,31 +806,57 @@ function refreshDebugInfo() {
if (elements.videoDebug) {
elements.videoDebug.innerHTML = '';
const status = document.createElement('div');
status.style.cssText = 'color:var(--accent); margin-bottom:4px;';
status.textContent = `VIDEO STATE: ${state.paused ? 'PAUSED' : 'PLAYING'}`;
const addField = (label, value, color = null) => {
const row = document.createElement('div');
row.style.marginBottom = '4px';
if (color) row.style.color = color;
const b = document.createElement('b');
b.textContent = `${label}: `;
b.style.color = 'var(--text-muted)';
const span = document.createElement('span');
span.textContent = value;
span.style.wordBreak = 'break-all';
row.appendChild(b);
row.appendChild(span);
elements.videoDebug.appendChild(row);
};
const addSection = (title) => {
const div = document.createElement('div');
div.style.cssText = 'margin: 8px 0 4px 0; border-bottom: 1px solid #334155; padding-bottom: 2px; color: var(--accent); font-weight: bold; font-size: 9px;';
div.textContent = title.toUpperCase();
elements.videoDebug.appendChild(div);
};
addField('STATE', state.paused ? 'PAUSED' : 'PLAYING', 'var(--accent)');
addField('TIME', `${state.currentTime.toFixed(2)}s / ${state.duration.toFixed(2)}s`);
addField('READY', state.readyState);
const time = document.createElement('div');
time.style.fontSize = '11px';
time.textContent = `Time: ${state.currentTime.toFixed(2)}s / ${state.duration.toFixed(2)}s`;
addSection('Identification');
addField('URL', state.url);
addField('ID', state.id);
addField('CLASS', state.className);
const readyState = document.createElement('div');
readyState.style.fontSize = '11px';
readyState.textContent = `ReadyState: ${state.readyState}`;
const misc = document.createElement('div');
misc.style.fontSize = '11px';
misc.textContent = `Muted: ${state.muted} | PlaybackRate: ${state.playbackRate}`;
const url = document.createElement('div');
url.style.cssText = 'font-size:9px; margin-top:4px; opacity:0.7;';
url.textContent = `URL: ${state.url.substring(0, 40)}...`;
elements.videoDebug.appendChild(status);
elements.videoDebug.appendChild(time);
elements.videoDebug.appendChild(readyState);
elements.videoDebug.appendChild(misc);
elements.videoDebug.appendChild(url);
addSection('Media Source');
addField('CURRENT_SRC', state.currentSrc);
addField('SRC', state.src);
if (state.metadata) {
addSection('Media Session API');
addField('TITLE', state.metadata.title || 'n/a');
addField('ARTIST', state.metadata.artist || 'n/a');
addField('ALBUM', state.metadata.album || 'n/a');
}
if (state.dataAttributes && Object.keys(state.dataAttributes).length > 0) {
addSection('Data Attributes');
for (const [key, val] of Object.entries(state.dataAttributes)) {
addField(key.replace('data-', '').toUpperCase(), val);
}
}
}
});
});