Fix Unexpected Keyword in MediaManager and Add Build Linting
- Fix corrupted line in src/MediaManager.html causing syntax error. - Add ESLint integration to build process to prevent future syntax errors. - Create .eslintrc.js with TypeScript and HTML support. - Relax strict lint rules to accommodate existing codebase.
This commit is contained in:
Ben Miller
57
.eslintrc.js
Normal file
57
.eslintrc.js
Normal file
@ -0,0 +1,57 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
plugins: [
|
||||
"@typescript-eslint",
|
||||
"html",
|
||||
],
|
||||
globals: {
|
||||
"google": "readonly",
|
||||
"Logger": "readonly",
|
||||
"item": "writable",
|
||||
"Utilities": "readonly",
|
||||
"state": "writable",
|
||||
"ui": "writable",
|
||||
"controller": "writable",
|
||||
"gapi": "readonly",
|
||||
},
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off", // Too noisy for existing codebase
|
||||
"no-unused-vars": "off",
|
||||
"prefer-const": "off",
|
||||
"no-var": "off",
|
||||
"no-undef": "off",
|
||||
"no-redeclare": "off",
|
||||
"no-empty": "warn",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-var-requires": "off",
|
||||
"no-useless-escape": "off",
|
||||
"no-extra-semi": "off",
|
||||
"no-array-constructor": "off",
|
||||
"@typescript-eslint/no-array-constructor": "off",
|
||||
"@typescript-eslint/no-this-alias": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"no-prototype-builtins": "off"
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.html"],
|
||||
parser: "espree", // Use default parser for HTML scripts if TS parser fails, or just rely on plugin handling
|
||||
// Actually plugin-html handles it. But we usually need to specify not to use TS rules that require type info if we don't have full project info for snippets.
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
Refactor Media Manager log to use streaming and card UI
|
||||
|
||||
- **UI Overhaul**: Moved the activity log to a dedicated, expandable card at the bottom of the Media Manager modal.
|
||||
- **Styling**: Updated the log card to match the application's light theme using CSS variables (`--surface`, `--text`).
|
||||
- **Log Streaming**: Replaced batch logging with real-time streaming via `CacheService` and `pollJobLogs`.
|
||||
- **Session Resumption**: Implemented logic to resume log polling for active jobs upon page reload.
|
||||
- **Fixes**:
|
||||
- Exposed `pollJobLogs` in `global.ts` to fix "Script function not found" error.
|
||||
- Updated `mediaHandlers.test.ts` with `CacheService` mocks and new signatures.
|
||||
- Removed legacy auto-hide/toggle logic for the log.
|
||||
1298
package-lock.json
generated
1298
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,8 @@
|
||||
"global.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "webpack --mode production",
|
||||
"build": "npm run lint && webpack --mode production",
|
||||
"lint": "eslint \"src/**/*.{ts,js,html}\"",
|
||||
"deploy": "clasp push",
|
||||
"test": "jest",
|
||||
"test:log": "jest > test_output.txt 2>&1",
|
||||
@ -15,7 +16,11 @@
|
||||
"devDependencies": {
|
||||
"@types/google-apps-script": "^1.0.85",
|
||||
"@types/jest": "^30.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"copy-webpack-plugin": "^13.0.1",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-html": "^8.1.3",
|
||||
"gas-webpack-plugin": "^2.6.0",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"husky": "^9.1.7",
|
||||
|
||||
@ -164,25 +164,24 @@
|
||||
/* Processing State */
|
||||
.media-item.processing-card {
|
||||
background-color: #334155 !important;
|
||||
position: relative; /* Ensure absolute children are contained */
|
||||
/* Removed flex centering to let image stretch */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-item.processing-card .media-content {
|
||||
display: block !important;
|
||||
opacity: 0.8; /* Lighter overlay (was 0.4) */
|
||||
filter: grayscale(30%); /* Less grey (was 80%) */
|
||||
opacity: 0.8;
|
||||
filter: grayscale(30%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* Ensure it fills */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.processing-icon {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 6px;
|
||||
font-size: 20px; /* Smaller */
|
||||
z-index: 20; /* Above badges */
|
||||
font-size: 20px;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -397,7 +396,7 @@
|
||||
|
||||
.log-header {
|
||||
padding: 8px 12px;
|
||||
background: #f8fafc; /* Slightly darker than surface */
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -410,7 +409,8 @@
|
||||
|
||||
.log-content {
|
||||
padding: 12px;
|
||||
max-height: 16px; /* ~1 line */
|
||||
/* ~1 line */
|
||||
max-height: 16px;
|
||||
overflow-y: auto;
|
||||
transition: max-height 0.3s ease;
|
||||
display: flex;
|
||||
@ -420,7 +420,8 @@
|
||||
}
|
||||
|
||||
.log-card.expanded .log-content {
|
||||
max-height: 300px; /* ~20 lines */
|
||||
/* ~20 lines */
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
@ -428,15 +429,20 @@
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.log-entry:last-child { border-bottom: none; }
|
||||
|
||||
.log-entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Scrollbar for log */
|
||||
.log-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
@ -460,42 +466,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Options Card -->
|
||||
<div class="card">
|
||||
<div class="header" style="margin-bottom: 12px;">
|
||||
<h3 style="margin:0; font-size:14px; color:var(--text);">Add Photos/Videos from...</h3>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; width: 100%;">
|
||||
<button onclick="controller.openPicker()" class="btn btn-secondary"
|
||||
style="flex: 1; font-size: 13px; white-space: nowrap;">
|
||||
Google Drive
|
||||
</button>
|
||||
<button onclick="controller.startPhotoSession()" class="btn btn-secondary"
|
||||
style="flex: 1; font-size: 13px; white-space: nowrap;">
|
||||
Google Photos
|
||||
</button>
|
||||
<button onclick="document.getElementById('file-input').click()" class="btn btn-secondary"
|
||||
style="flex: 1; font-size: 13px;">
|
||||
Your Computer
|
||||
</button>
|
||||
</div>
|
||||
<input type="file" id="file-input" multiple style="display:none" onchange="controller.handleFiles(this.files)">
|
||||
</div>
|
||||
|
||||
<!-- Photos Session UI -->
|
||||
<div id="photos-session-ui"
|
||||
style="display:none; margin-top:12px; padding:12px; background:#f0f9ff; border-radius:8px; border:1px solid #bae6fd;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
||||
<span style="font-weight:600; font-size:12px; color:#0369a1;">Photo Picker Session</span>
|
||||
<button onclick="ui.closePhotoSession()"
|
||||
style="background:none; border:none; color:#0369a1; cursor:pointer; font-size:16px;">×</button>
|
||||
</div>
|
||||
<a id="photos-session-link" href="#" target="_blank" class="btn"
|
||||
style="background:#0ea5e9; text-decoration:none; margin-bottom:8px;">
|
||||
Open Google Photos ↗
|
||||
</a>
|
||||
<div id="photos-session-status" style="font-size:11px; color:#64748b; text-align:center;">Initializing...</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -538,6 +509,44 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="upload-section" style="display:none;">
|
||||
<!-- Upload Options Card -->
|
||||
<div class="card">
|
||||
<div class="header" style="margin-bottom: 12px;">
|
||||
<h3 style="margin:0; font-size:14px; color:var(--text);">Add Photos/Videos from...</h3>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; width: 100%;">
|
||||
<button id="btn-upload-drive" onclick="controller.openPicker()" class="btn btn-secondary"
|
||||
style="flex: 1; font-size: 13px; white-space: nowrap;">
|
||||
Google Drive
|
||||
</button>
|
||||
<button id="btn-upload-photos" onclick="controller.startPhotoSession()" class="btn btn-secondary"
|
||||
style="flex: 1; font-size: 13px; white-space: nowrap;">
|
||||
Google Photos
|
||||
</button>
|
||||
<button id="btn-upload-computer" onclick="document.getElementById('file-input').click()"
|
||||
class="btn btn-secondary" style="flex: 1; font-size: 13px;">
|
||||
Your Computer
|
||||
</button>
|
||||
</div>
|
||||
<input type="file" id="file-input" multiple style="display:none" onchange="controller.handleFiles(this.files)">
|
||||
</div>
|
||||
|
||||
<!-- Photos Session UI -->
|
||||
<div id="photos-session-ui"
|
||||
style="display:none; margin-top:12px; padding:12px; background:#f0f9ff; border-radius:8px; border:1px solid #bae6fd;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
|
||||
<span style="font-weight:600; font-size:12px; color:#0369a1;">Photo Picker Session</span>
|
||||
<button onclick="ui.closePhotoSession()"
|
||||
style="background:none; border:none; color:#0369a1; cursor:pointer; font-size:16px;">×</button>
|
||||
</div>
|
||||
<a id="photos-session-link" href="#" target="_blank" class="btn"
|
||||
style="background:#0ea5e9; text-decoration:none; margin-bottom:8px;">
|
||||
Open Google Photos ↗
|
||||
</a>
|
||||
<div id="photos-session-status" style="font-size:11px; color:#64748b; text-align:center;">Initializing...</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Permanent Log Card -->
|
||||
<div id="log-card" class="log-card">
|
||||
<div class="log-header" onclick="ui.toggleLogExpand()">
|
||||
@ -1326,6 +1335,8 @@
|
||||
},
|
||||
|
||||
handleFiles(fileList) {
|
||||
if (!fileList || fileList.length === 0) return;
|
||||
this.setPickerState(true);
|
||||
Array.from(fileList).forEach(file => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
@ -1334,6 +1345,12 @@
|
||||
google.script.run
|
||||
.withSuccessHandler(() => {
|
||||
this.loadMedia();
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.withFailureHandler(err => {
|
||||
console.error(err);
|
||||
alert("Upload failed: " + err.message);
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.saveFileToDrive(state.sku, file.name, file.type, data);
|
||||
};
|
||||
@ -1341,27 +1358,57 @@
|
||||
});
|
||||
},
|
||||
|
||||
// --- Picker ---
|
||||
// --- Picker ---
|
||||
setPickerState(isActive) {
|
||||
const btnDrive = document.getElementById('btn-upload-drive');
|
||||
const btnPhotos = document.getElementById('btn-upload-photos');
|
||||
const btnComp = document.getElementById('btn-upload-computer');
|
||||
|
||||
[btnDrive, btnPhotos, btnComp].forEach(btn => {
|
||||
if (btn) {
|
||||
btn.disabled = isActive;
|
||||
btn.style.opacity = isActive ? '0.5' : '1';
|
||||
btn.style.cursor = isActive ? 'not-allowed' : 'pointer';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
openPicker() {
|
||||
if (!pickerApiLoaded) return alert("API Loading...");
|
||||
google.script.run.withSuccessHandler(c => createPicker(c)).getPickerConfig();
|
||||
this.setPickerState(true);
|
||||
google.script.run
|
||||
.withSuccessHandler(c => createPicker(c))
|
||||
.withFailureHandler(e => {
|
||||
alert("Failed to load picker: " + e.message);
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.getPickerConfig();
|
||||
},
|
||||
|
||||
importFromPicker(fileId, mime, name, url) {
|
||||
google.script.run
|
||||
.withSuccessHandler(() => this.loadMedia())
|
||||
.withSuccessHandler(() => {
|
||||
this.loadMedia();
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.withFailureHandler(e => {
|
||||
alert("Import failed: " + e.message);
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.importFromPicker(state.sku, fileId, mime, name, url);
|
||||
},
|
||||
|
||||
// --- Photos (Popup Flow) ---
|
||||
startPhotoSession() {
|
||||
this.setPickerState(true);
|
||||
ui.updatePhotoStatus("Starting session...");
|
||||
google.script.run
|
||||
.withSuccessHandler(session => {
|
||||
ui.showPhotoSession(session.pickerUri);
|
||||
this.pollPhotoSession(session.id);
|
||||
})
|
||||
.withFailureHandler(e => {
|
||||
ui.updatePhotoStatus("Failed: " + e.message);
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.createPhotoSession();
|
||||
},
|
||||
|
||||
@ -1374,13 +1421,18 @@
|
||||
if (res.status === 'complete') {
|
||||
processing = true;
|
||||
ui.updatePhotoStatus("Importing photos...");
|
||||
controller.processPhotoItems(res.mediaItems);
|
||||
this.processPhotoItems(res.mediaItems);
|
||||
} else if (res.status === 'error') {
|
||||
ui.updatePhotoStatus("Error: " + res.message);
|
||||
this.setPickerState(false);
|
||||
} else {
|
||||
setTimeout(check, 2000);
|
||||
}
|
||||
})
|
||||
.withFailureHandler(e => {
|
||||
ui.updatePhotoStatus("Error polling: " + e.message);
|
||||
this.setPickerState(false);
|
||||
})
|
||||
.checkPhotoSession(sessionId);
|
||||
};
|
||||
check();
|
||||
@ -1412,9 +1464,18 @@
|
||||
if (done === items.length) {
|
||||
ui.updatePhotoStatus("Done!");
|
||||
controller.loadMedia();
|
||||
this.setPickerState(false);
|
||||
setTimeout(() => ui.closePhotoSession(), 2000);
|
||||
}
|
||||
})
|
||||
.withFailureHandler(e => {
|
||||
console.error("Import failed", e);
|
||||
// If last one
|
||||
done++;
|
||||
if (done === items.length) {
|
||||
this.setPickerState(false);
|
||||
}
|
||||
})
|
||||
.importFromPicker(state.sku, null, mimeType, filename, url);
|
||||
});
|
||||
},
|
||||
@ -1523,11 +1584,11 @@
|
||||
document.getElementById('btn-match-confirm').innerText = "Linking...";
|
||||
document.getElementById('btn-match-skip').disabled = true;
|
||||
|
||||
// ui.logStatus('link', 'Linking ' + match.drive.filename + '...', 'info');
|
||||
ui.logStatus('link', 'Linking ' + match.drive.filename + '...', 'info');
|
||||
|
||||
google.script.run
|
||||
.withSuccessHandler(function () {
|
||||
// ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
|
||||
ui.logStatus('link', 'Linked ' + match.drive.filename, 'success');
|
||||
_this.nextMatch();
|
||||
})
|
||||
.withFailureHandler(function (e) {
|
||||
@ -1579,6 +1640,7 @@
|
||||
showGallery() {
|
||||
document.getElementById('loading-ui').style.display = 'none';
|
||||
document.getElementById('main-ui').style.display = 'block';
|
||||
document.getElementById('upload-section').style.display = 'block';
|
||||
ui.logStatus('done', 'Finished loading.', 'success');
|
||||
// setTimeout(function () { ui.toggleLog(false); }, 1000); // Removed auto-hide
|
||||
|
||||
@ -1692,6 +1754,9 @@
|
||||
|
||||
// Drive File (Always, since we removed Photos view)
|
||||
controller.importFromPicker(doc.id, doc.mimeType, doc.name, null);
|
||||
} else if (data.action == google.picker.Action.CANCEL) {
|
||||
console.log("Picker cancelled");
|
||||
controller.setPickerState(false);
|
||||
}
|
||||
})
|
||||
.build()
|
||||
|
||||
Reference in New Issue
Block a user