- **Preload Thumbnails**: Implemented image preloading in the media matching wizard to ensure instant rendering of candidate matches.
- **Async Linking**: Refactored the linking confirmation to be asynchronous. The UI now optimistically advances to the next match immediately, performing the backend linking in the background.
- **Completion Gate**: Added a check to ensure all pending background linking operations verify completion before the wizard closes and reloading occurs.
- **Video Support**: Verified that filename-based matching correctly handles video files by extracting filenames from Shopify video URLs.
- Unified transfer session UI layout with instructions at the top and footer controls.
- Implemented side-by-side 'Re-open Popup' and 'Cancel' buttons with proper state management (disabled/enabled).
- Added dynamic service context to instructions (e.g., 'Importing from Google Photos').
- Refactored UI class to handle new DOM structure and button logic.
- Updated controller to support new UI interactions and improved cancellation flow.
- 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.
- **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.
Updates logic to detect processing state (including READY-but-no-sources race condition) and propagates contentUrl updates to the frontend immediately.
- Implemented "sidecar" thumbnail logic: imports video thumbnails from Google Photos as hidden Drive files to display immediately while videos process.
- Updated MediaService to serve sidecar thumbnails via server-side Base64 encoding, bypassing CORS restrictions.
- Implemented lifecycle management: detects video processing completion to automatically cleanup sidecar files and fallback to native Drive thumbnails.
- Enhanced Media Manager UI: added processing warning banner and refined processing tile styling (centered, lighter overlay).
- Upgraded Drive API to v3 and improved file creation robustness with Advanced API fallbacks.
This commit adds robust handling for Google Drive videos that are still processing (lacking thumbnails). Changes include: 1. Backend (MediaService.ts): Implement try/catch around thumbnail generation. If it fails, return a placeholder and flag the item as 'isProcessing'. 2. Frontend (MediaManager.html): - Add polling logic to check for updates on processing items every 15s. - Add UI support for processing state: slate background, centered animated hourglass emoji. - Implement sand animation (toggling hourglass state) and rotation animation (180deg flip on poll event). - Fix badges and positioning issues.
This commit fixes a bug where videos imported from the Google Photos Picker were being downloaded as static thumbnails. Changes include: 1. Frontend (MediaManager.html): Correctly access nested 'mediaFile' properties from the Picker API response to ensure valid mimeType and filename are passed to the backend. Restored logic to force 'video/mp4' mimeType if 'mediaMetadata.video' is present. Added debug logging. 2. Backend (mediaHandlers.ts): Restored missing 'else if' block for URL handling that was causing 'No File ID' errors. Implemented logic to append '=dv' parameter for video downloads. Added safeguard to rename downloaded files to '.mp4' if the content type is video but the extension is wrong.
- Revert 'Unified Embedded Picker' which caused 403 errors due to iframe restrictions on the Google Photos Picker.
- Implement a 'Popup Window' flow for Google Photos selections, keeping the Media Manager active.
- Restore 'Classic' Embedded Picker for Google Drive (DocsView) as it is compatible with iframes.
- Update ppsscript.json with drive.photos.readonly scope for correct permissions.
- Update Media Manager UI to separate Drive and Photos buttons.
- Update \MediaService.ts\ to populate \ humbnail\ and \contentUrl\ from Shopify media when a Drive file is synced.
- Enable \synced\ videos to use the Shopify video URL for playback/hover.
- Update \MediaManager.html\ to allow \synced\ items to render as \<video>\ tags if they have a valid \contentUrl\.
- Add regression tests in \MediaService.test.ts\ for thumbnail and video sync behavior.
- Added matching wizard to MediaManager.html for linking Drive files to orphaned Shopify media on load.
- Updated MediaService.ts to extract filenames from Shopify URLs for better matching.
- Added linkDriveFileToShopifyMedia method to MediaService and exposed it via mediaHandlers and global.ts.
- Improved UX in MediaManager with image transition clearing and button state feedback.
- Added UI and logic to handle cases where the Media Manager is opened for a row without a SKU.
- Displays a user-friendly error message with a Close button.
- Fixed an issue where the Gallery card was not properly hidden in the error state.
Updated drag event listeners in MediaManager.html to check for 'Files' in dataTransfer.types. This ensures the upload overlay only appears when files are dragged from the OS, preventing interference with SortableJS reordering.
- Resolved persistent 'SyntaxError: Unexpected token class' by refactoring 'MediaState' and 'UI' classes in MediaManager.html to standard ES5 function constructors.
- Resolved 'SyntaxError: Unexpected identifier src' by rewriting 'createCard' to use 'document.createElement' instead of template strings for dynamic media elements.
- Consolidated script tags in MediaManager.html to prevent Apps Script parser merge issues.
- Updated docs/ARCHITECTURE.md and MEMORY.md to formally document client-side constraints (No ES6 classes, strict DOM manipulation for media).
- Note: Google Drive video animate-on-hover functionality is implemented but currently pending verification/fix.
- **UI Refactor**:
- Split Media Manager header into two distinct cards: 'Product Info' and 'Upload Options'.
- 'Product Info' now displays the Product Title and SKU.
- Renamed upload buttons to 'Google Drive', 'Google Photos', and 'Your Computer' for clarity.
- Added global drag-and-drop support with overlay.
- Replaced full-screen 'Connecting' overlay with an inline spinner for better UX and log visibility.
- **Backend**:
- Renamed getSelectedSku to getSelectedProductInfo in mediaHandlers.ts to fetch and return both SKU and Title.
- Updated global.ts exports and mediaHandlers.test.ts to support the new signature.
- **Fixes**:
- Resolved an infinite loop issue in loadMedia caused by incorrect SKU state handling.
- Removed the full-screen 'Connecting' overlay in MediaManager.html
- Implemented an inline loading spinner control
- Ensure log container is visible immediately during initialization so users can track progress
- Backend (MediaService):
- Implemented robust contentUrl generation for Drive files using drive.google.com/uc pattern.
- Added mimeType exposure to unified media state.
- Frontend (MediaManager):
- Replaced video tag with iframe embedding the Google Drive Preview player (/preview) for reliable playback.
- Fixed syntax error in console logging causing UI freeze.
- Updated gallery card logic to prioritize video content URLs.
- Tests (Integration):
- Refactored mediaManager.integration.test.ts to align with new logic.
- Mocked DriveApp completely to support orphan adoption flows.
- Updated file renaming expectations to support timestamped filenames.
- Documentation:
- Updated MEMORY.md with video preview strategy.
This major refactor addresses improper image matching and duplication:
- Implemented strict ID-based matching in 'MediaService', removing the greedy filename matching fallback.
- Redesigned synchronization pipeline to treat Google Drive as the Source of Truth, supporting orphan adoption (Shopify -> Drive) and secure uploads.
- Implemented 'gallery_order' using Drive file properties (supporting both v2 and v3 APIs) for stable, drag-and-drop global ordering.
- Added conditional file renaming using timestamps to enforce '_' naming convention without unnecessary renames.
- Fixed runtime errors in 'MediaService' loops and updated 'ShopifyMediaService' GraphQL mutations to match correctly schema.
- Rewrote 'MediaService.test.ts' with robust test cases for strict matching, adoption, sorting, and reordering.
- Renamed src/MediaSidebar.html to src/MediaManager.html to align with modal UI.
- Fixed race condition in Photo Picker polling preventing duplicate imports.
- Updated global.ts, initMenu.ts, and mediaHandlers.ts used in the fix.
- Fixed unit tests for mediaHandlers.