feat: update embed player design with transparent background and overlay stats

- Removed background colors from `embed.html` for transparency.
- Added a hover-triggered overlay with "Watch on BitVid" button and stats (views, likes, dislikes).
- Updated `js/ui/components/EmbedPlayerModal.js` to implement stats update methods and handle the overlay elements.
- Updated `js/embed.js` to set the share URL on the overlay after video resolution.
- Verified visual changes with Playwright.
This commit is contained in:
google-labs-jules[bot] committed 2026-01-24 22:41:56 +00:00
1 parent a9bd7ec79e
commit d621e6f21a
6 files changed
+715 -25

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

+43
View File
@@ -0,0 +1,43 @@
from playwright.sync_api import sync_playwright
import time
def verify_embed_overlay():
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
context = browser.new_context()
# Inject disclaimer bypass
context.add_init_script("localStorage.setItem('hasSeenDisclaimer', 'true');")
page = context.new_page()
# Go to embed page
# Note: We don't have a valid pointer, so video won't load, but UI should be there.
page.goto("http://localhost:3000/embed.html")
# Wait for page load
time.sleep(2)
# Force hover on the container to show overlay
container = page.locator("#embedRoot section")
container.hover()
# Wait for transition
time.sleep(1)
# Check elements visibility
overlay = page.locator("#embedOverlay")
watch_btn = page.locator("#embedWatchButton")
stats = page.locator("#embedViewCount")
print(f"Overlay visible: {overlay.is_visible()}")
print(f"Watch button visible: {watch_btn.is_visible()}")
print(f"Stats visible: {stats.is_visible()}")
# Screenshot
page.screenshot(path="verification/embed_verification.png")
browser.close()
if __name__ == "__main__":
verify_embed_overlay()