From 7265842deb71bfae5754c774e0a92ea6c7efa35d Mon Sep 17 00:00:00 2001 From: Aiden <68633820+awils27@users.noreply.github.com> Date: Wed, 10 Jun 2026 10:53:06 +1000 Subject: [PATCH] UI update --- README.md | 5 +- src/vr180player/dom.ts | 53 ++++---- src/vr180player/icons.ts | 171 ++++++++++++++++++++++++ src/vr180player/three-utils.ts | 42 ++---- src/vr180player/vr180-player.ts | 63 +++------ vr180player/images/back-hover.png | Bin 4714 -> 0 bytes vr180player/images/back.png | Bin 1642 -> 0 bytes vr180player/images/forward-hover.png | Bin 4695 -> 0 bytes vr180player/images/forward.png | Bin 1638 -> 0 bytes vr180player/images/fullscreen-hover.png | Bin 3626 -> 0 bytes vr180player/images/fullscreen.png | Bin 796 -> 0 bytes vr180player/images/mute-hover.png | Bin 4431 -> 0 bytes vr180player/images/mute.png | Bin 1540 -> 0 bytes vr180player/images/pause-hover.png | Bin 3246 -> 0 bytes vr180player/images/pause.png | Bin 666 -> 0 bytes vr180player/images/play.png | Bin 7089 -> 0 bytes vr180player/images/play2-hover.png | Bin 3830 -> 0 bytes vr180player/images/play2.png | Bin 1167 -> 0 bytes vr180player/images/unmute-hover.png | Bin 3918 -> 0 bytes vr180player/images/unmute.png | Bin 1014 -> 0 bytes vr180player/vr180-player.css | 131 +++++------------- 21 files changed, 265 insertions(+), 200 deletions(-) create mode 100644 src/vr180player/icons.ts delete mode 100644 vr180player/images/back-hover.png delete mode 100644 vr180player/images/back.png delete mode 100644 vr180player/images/forward-hover.png delete mode 100644 vr180player/images/forward.png delete mode 100644 vr180player/images/fullscreen-hover.png delete mode 100644 vr180player/images/fullscreen.png delete mode 100644 vr180player/images/mute-hover.png delete mode 100644 vr180player/images/mute.png delete mode 100644 vr180player/images/pause-hover.png delete mode 100644 vr180player/images/pause.png delete mode 100644 vr180player/images/play.png delete mode 100644 vr180player/images/play2-hover.png delete mode 100644 vr180player/images/play2.png delete mode 100644 vr180player/images/unmute-hover.png delete mode 100644 vr180player/images/unmute.png diff --git a/README.md b/README.md index e040e60..2788b40 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ The player supports two projection modes: - `plane`: a flat stereoscopic video plane in WebXR, with a normal flat left-eye fallback on non-XR browsers. ## How to use it -Build the player first, then host the generated `vr180player/` directory on your CDN and include the module script. The script automatically loads its matching CSS file and image assets from the same folder, and it imports its helper modules with relative module paths. +Build the player first, then host the generated `vr180player/` directory on your CDN and include the module script. The script automatically loads its matching CSS file from the same folder, and it imports its helper modules with relative module paths. ```html
@@ -40,6 +40,7 @@ When the page loads, the video is embedded normally with a play button over the - In WebXR, `vr180` maps the left and right halves of the SBS video onto the matching eyes of a 180 degree sphere. - In WebXR, `plane` maps the left and right halves onto the matching eyes of a floating 16:9 video plane. - Outside WebXR, both modes render only the left half of the SBS video so viewers do not see the raw double image. +- Control icons are embedded from [Lucide](https://lucide.dev/) SVG definitions, so no PNG icon assets are required. ## Demo Run `npm run build`, then open this repository's `index.html` through a local web server and switch `data-projection` between `vr180` and `plane` to test both modes. @@ -52,4 +53,4 @@ npm install npm run build ``` -Edit the TypeScript source files rather than generated JavaScript. A typical CI/CD publish step should run `npm ci`, `npm run build`, then publish `vr180player/` with its generated `.js` files, CSS, and images. +Edit the TypeScript source files rather than generated JavaScript. A typical CI/CD publish step should run `npm ci`, `npm run build`, then publish `vr180player/` with its generated `.js` files and CSS. diff --git a/src/vr180player/dom.ts b/src/vr180player/dom.ts index 292e4d7..798e016 100644 --- a/src/vr180player/dom.ts +++ b/src/vr180player/dom.ts @@ -1,3 +1,5 @@ +import { createLucideIcon, type LucideIconName } from './icons.js'; + export function injectPlayerStyles(playerBase: string): void { if (document.querySelector('link[data-vr-web-player-stylesheet]')) { return; @@ -15,17 +17,12 @@ export function injectPlayerStyles(playerBase: string): void { } } -export function createPlayButton(playerBase: string): HTMLButtonElement { +export function createPlayButton(): HTMLButtonElement { const playButton = document.createElement('button'); playButton.type = 'button'; playButton.className = 'vrwp-play-button'; playButton.setAttribute('aria-label', 'Play video'); - - const playImg = document.createElement('img'); - playImg.src = playerBase + 'images/play.png'; - playImg.alt = 'Play'; - - playButton.appendChild(playImg); + playButton.appendChild(createLucideIcon('circle-play')); return playButton; } @@ -69,37 +66,22 @@ export function create2DControlPanel(): HTMLDivElement { const controls = document.createElement('div'); controls.className = 'vrwp-controls'; - const fullscreenBtn = document.createElement('button'); - fullscreenBtn.type = 'button'; - fullscreenBtn.className = 'vrwp-fullscreen'; - fullscreenBtn.setAttribute('aria-label', 'Toggle fullscreen'); + const fullscreenBtn = createControlButton('vrwp-fullscreen', 'Toggle fullscreen', 'maximize'); const nav = document.createElement('div'); nav.className = 'vrwp-nav'; - const backBtn = document.createElement('button'); - backBtn.type = 'button'; - backBtn.className = 'vrwp-back'; - backBtn.setAttribute('aria-label', 'Back 15 seconds'); + const backBtn = createControlButton('vrwp-back', 'Back 15 seconds', 'rotate-ccw', '15'); - const play2Btn = document.createElement('button'); - play2Btn.type = 'button'; - play2Btn.className = 'vrwp-play-toggle'; - play2Btn.setAttribute('aria-label', 'Play or pause'); + const play2Btn = createControlButton('vrwp-play-toggle', 'Play or pause', 'play'); - const forwardBtn = document.createElement('button'); - forwardBtn.type = 'button'; - forwardBtn.className = 'vrwp-forward'; - forwardBtn.setAttribute('aria-label', 'Forward 15 seconds'); + const forwardBtn = createControlButton('vrwp-forward', 'Forward 15 seconds', 'rotate-cw', '15'); nav.appendChild(backBtn); nav.appendChild(play2Btn); nav.appendChild(forwardBtn); - const muteBtn = document.createElement('button'); - muteBtn.type = 'button'; - muteBtn.className = 'vrwp-mute'; - muteBtn.setAttribute('aria-label', 'Toggle mute'); + const muteBtn = createControlButton('vrwp-mute', 'Toggle mute', 'volume-2'); controls.appendChild(fullscreenBtn); controls.appendChild(nav); @@ -110,3 +92,20 @@ export function create2DControlPanel(): HTMLDivElement { return panel; } + +function createControlButton(className: string, label: string, iconName: LucideIconName, skipLabel?: string): HTMLButtonElement { + const button = document.createElement('button'); + button.type = 'button'; + button.className = className; + button.setAttribute('aria-label', label); + button.appendChild(createLucideIcon(iconName)); + + if (skipLabel) { + const labelEl = document.createElement('span'); + labelEl.className = 'vrwp-skip-label'; + labelEl.textContent = skipLabel; + button.appendChild(labelEl); + } + + return button; +} diff --git a/src/vr180player/icons.ts b/src/vr180player/icons.ts new file mode 100644 index 0000000..fe3a17a --- /dev/null +++ b/src/vr180player/icons.ts @@ -0,0 +1,171 @@ +export type LucideIconName = + | 'circle-play' + | 'play' + | 'pause' + | 'maximize' + | 'rotate-ccw' + | 'rotate-cw' + | 'volume-2' + | 'volume-x' + | 'log-out'; + +type IconAttrs = Record; +type IconNode = readonly [tagName: string, attrs: IconAttrs]; + +const SVG_NS = 'http://www.w3.org/2000/svg'; + +const ICONS: Record = { + 'circle-play': [ + ['circle', { cx: '12', cy: '12', r: '10' }], + ['polygon', { points: '10 8 16 12 10 16 10 8' }] + ], + play: [ + ['polygon', { points: '6 3 20 12 6 21 6 3' }] + ], + pause: [ + ['rect', { x: '14', y: '4', width: '4', height: '16', rx: '1' }], + ['rect', { x: '6', y: '4', width: '4', height: '16', rx: '1' }] + ], + maximize: [ + ['path', { d: 'M8 3H5a2 2 0 0 0-2 2v3' }], + ['path', { d: 'M21 8V5a2 2 0 0 0-2-2h-3' }], + ['path', { d: 'M3 16v3a2 2 0 0 0 2 2h3' }], + ['path', { d: 'M16 21h3a2 2 0 0 0 2-2v-3' }] + ], + 'rotate-ccw': [ + ['path', { d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }], + ['path', { d: 'M3 3v5h5' }] + ], + 'rotate-cw': [ + ['path', { d: 'M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8' }], + ['path', { d: 'M21 3v5h-5' }] + ], + 'volume-2': [ + ['path', { d: 'M11 4.702a1 1 0 0 0-1.664-.747L5.5 7.5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1.5l3.836 3.545A1 1 0 0 0 11 19.298z' }], + ['path', { d: 'M16 9a5 5 0 0 1 0 6' }], + ['path', { d: 'M19.364 18.364a9 9 0 0 0 0-12.728' }] + ], + 'volume-x': [ + ['path', { d: 'M11 4.702a1 1 0 0 0-1.664-.747L5.5 7.5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1.5l3.836 3.545A1 1 0 0 0 11 19.298z' }], + ['line', { x1: '22', y1: '9', x2: '16', y2: '15' }], + ['line', { x1: '16', y1: '9', x2: '22', y2: '15' }] + ], + 'log-out': [ + ['path', { d: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' }], + ['polyline', { points: '16 17 21 12 16 7' }], + ['line', { x1: '21', y1: '12', x2: '9', y2: '12' }] + ] +}; + +export function createLucideIcon(name: LucideIconName, className = 'vrwp-icon'): SVGSVGElement { + const svg = document.createElementNS(SVG_NS, 'svg'); + svg.setAttribute('class', className); + svg.setAttribute('viewBox', '0 0 24 24'); + svg.setAttribute('fill', 'none'); + svg.setAttribute('stroke', 'currentColor'); + svg.setAttribute('stroke-width', '2'); + svg.setAttribute('stroke-linecap', 'round'); + svg.setAttribute('stroke-linejoin', 'round'); + svg.setAttribute('aria-hidden', 'true'); + svg.setAttribute('focusable', 'false'); + + for (const [tagName, attrs] of ICONS[name]) { + const node = document.createElementNS(SVG_NS, tagName); + for (const [key, value] of Object.entries(attrs)) { + node.setAttribute(key, value); + } + svg.appendChild(node); + } + + return svg; +} + +export function setLucideIcon(target: HTMLElement, name: LucideIconName): void { + const existingIcon = target.querySelector('.vrwp-icon'); + if (existingIcon) { + existingIcon.replaceWith(createLucideIcon(name)); + return; + } + target.prepend(createLucideIcon(name)); +} + +export function drawLucideIcon( + ctx: CanvasRenderingContext2D, + name: LucideIconName, + x: number, + y: number, + size: number, + color = '#ffffff', + strokeWidth = 2 +): void { + ctx.save(); + ctx.translate(x, y); + ctx.scale(size / 24, size / 24); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + + for (const [tagName, attrs] of ICONS[name]) { + drawIconNode(ctx, tagName, attrs); + } + + ctx.restore(); +} + +function drawIconNode(ctx: CanvasRenderingContext2D, tagName: string, attrs: IconAttrs): void { + switch (tagName) { + case 'path': + ctx.stroke(new Path2D(attrs.d)); + break; + case 'line': + ctx.beginPath(); + ctx.moveTo(Number(attrs.x1), Number(attrs.y1)); + ctx.lineTo(Number(attrs.x2), Number(attrs.y2)); + ctx.stroke(); + break; + case 'polyline': + case 'polygon': + drawPoints(ctx, attrs.points, tagName === 'polygon'); + break; + case 'rect': + drawRect(ctx, attrs); + break; + case 'circle': + ctx.beginPath(); + ctx.arc(Number(attrs.cx), Number(attrs.cy), Number(attrs.r), 0, Math.PI * 2); + ctx.stroke(); + break; + } +} + +function drawPoints(ctx: CanvasRenderingContext2D, pointsAttr: string, closePath: boolean): void { + const points = pointsAttr.trim().split(/\s+/).map((pair) => pair.split(',').map(Number)); + if (points.length === 0) return; + + ctx.beginPath(); + ctx.moveTo(points[0][0], points[0][1]); + for (const [x, y] of points.slice(1)) { + ctx.lineTo(x, y); + } + if (closePath) { + ctx.closePath(); + } + ctx.stroke(); +} + +function drawRect(ctx: CanvasRenderingContext2D, attrs: IconAttrs): void { + const x = Number(attrs.x); + const y = Number(attrs.y); + const width = Number(attrs.width); + const height = Number(attrs.height); + const radius = Number(attrs.rx || 0); + + ctx.beginPath(); + if (radius > 0 && typeof ctx.roundRect === 'function') { + ctx.roundRect(x, y, width, height, radius); + } else { + ctx.rect(x, y, width, height); + } + ctx.stroke(); +} diff --git a/src/vr180player/three-utils.ts b/src/vr180player/three-utils.ts index bf8db39..dc87388 100644 --- a/src/vr180player/three-utils.ts +++ b/src/vr180player/three-utils.ts @@ -1,4 +1,5 @@ import * as THREE from 'https://unpkg.com/three/build/three.module.js'; +import { drawLucideIcon, type LucideIconName } from './icons.js'; type Radius = number | { tl?: number; @@ -57,14 +58,12 @@ export function drawRoundedRect( } } -export function createButtonTexture( - textOrPathData: string, - textColor = 'white', - backgroundColor = 'rgba(0,0,0,0)', +export function createLucideButtonTexture( + iconName: LucideIconName, + color = '#ffffff', textureSize = 128, - fontSize = 48, - isSvgPath = false, - svgViewBoxSize = 44 + iconSize = 82, + skipLabel?: string ) { const canvas = document.createElement('canvas'); canvas.width = textureSize; @@ -72,33 +71,18 @@ export function createButtonTexture( const ctx = canvas.getContext('2d'); if (!ctx) { - throw new Error('Unable to create 2D canvas context for button texture.'); + throw new Error('Unable to create 2D canvas context for Lucide button texture.'); } - if (backgroundColor !== 'rgba(0,0,0,0)') { - ctx.fillStyle = backgroundColor; - ctx.fillRect(0, 0, textureSize, textureSize); - } + const iconOffset = (textureSize - iconSize) / 2; + drawLucideIcon(ctx, iconName, iconOffset, iconOffset, iconSize, color, 2); - ctx.fillStyle = textColor; - - if (isSvgPath) { - const path = new Path2D(textOrPathData); - const iconTargetSize = textureSize; - const scale = iconTargetSize / svgViewBoxSize; - const offsetX = (textureSize - (svgViewBoxSize * scale)) / 2; - const offsetY = (textureSize - (svgViewBoxSize * scale)) / 2; - - ctx.save(); - ctx.translate(offsetX, offsetY); - ctx.scale(scale, scale); - ctx.fill(path); - ctx.restore(); - } else { - ctx.font = `bold ${fontSize}px Helvetica, Arial, sans-serif`; + if (skipLabel) { + ctx.fillStyle = color; + ctx.font = `700 ${Math.round(textureSize * 0.18)}px Helvetica, Arial, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.fillText(textOrPathData, textureSize / 2, textureSize / 2); + ctx.fillText(skipLabel, textureSize / 2, textureSize / 2); } const texture = new THREE.CanvasTexture(canvas); diff --git a/src/vr180player/vr180-player.ts b/src/vr180player/vr180-player.ts index 96242c1..bffb245 100644 --- a/src/vr180player/vr180-player.ts +++ b/src/vr180player/vr180-player.ts @@ -17,10 +17,11 @@ import { showActiveContentMesh as showActiveContentMeshCore } from './projection.js'; import { - createButtonTexture, + createLucideButtonTexture, createVideoTexture as createVideoTextureCore, drawRoundedRect } from './three-utils.js'; +import { drawLucideIcon, setLucideIcon } from './icons.js'; const _playerBase = new URL('.', import.meta.url).href; @@ -124,9 +125,6 @@ let vrExitButtonMesh; let vrVolumeButtonMesh, vrVolumeButtonCanvas, vrVolumeButtonContext, vrVolumeButtonTexture; const VR_BUTTON_TEXTURE_SIZE = 128; -// SVG Path Data for Icons -const SOUND_ON_SVG_PATH = "M13.4844 0.956299C13.766 0.689292 14.2002 0.683249 14.4883 0.930908L14.5439 0.984619L14.9326 1.41431C18.8143 5.92858 18.6845 12.6488 14.5439 17.0159C14.259 17.3163 13.7849 17.329 13.4844 17.0442C13.1838 16.7592 13.1712 16.2852 13.4561 15.9846C17.0653 12.178 17.1776 6.32534 13.7939 2.39087L13.4561 2.01587L13.4062 1.95825C13.1736 1.6574 13.2025 1.22361 13.4844 0.956299ZM6.9082 2.89868C7.71642 2.4576 8.75 3.03449 8.75 4.00024V14.0002C8.74986 15.0302 7.57399 15.6181 6.75 15.0002L3.64746 12.6731L1.10449 11.8254C0.594287 11.6552 0.250089 11.1777 0.25 10.6399V7.3606C0.250012 6.82269 0.59426 6.34529 1.10449 6.17505L3.64746 5.32642L6.75 3.00024L6.9082 2.89868ZM12.6172 4.35474C12.9512 4.15679 13.3767 4.24825 13.6025 4.55396L13.6455 4.61743L13.7812 4.85864C14.4372 6.07858 14.75 7.55417 14.75 9.00024C14.75 10.5428 14.3943 12.1195 13.6455 13.3831C13.4343 13.7391 12.9734 13.8568 12.6172 13.6458C12.2611 13.4346 12.1435 12.9737 12.3545 12.6174C12.9389 11.6312 13.25 10.3324 13.25 9.00024C13.25 7.75133 12.9766 6.53179 12.4609 5.57153L12.3545 5.38306L12.3193 5.3147C12.1595 4.96983 12.2833 4.55281 12.6172 4.35474ZM4.51465 6.552C4.40729 6.63245 4.28743 6.69512 4.16016 6.73755L1.75 7.54028V10.4592L4.16016 11.2629C4.25561 11.2948 4.34674 11.3383 4.43164 11.3918L4.51465 11.4485L7.25 13.4993V4.50024L4.51465 6.552ZM10.1699 7.46997C10.4445 7.1954 10.8793 7.17791 11.1738 7.41821L11.2305 7.46997L11.377 7.63501C11.6931 8.03702 11.8252 8.54177 11.8252 9.00024C11.8252 9.52404 11.6529 10.1081 11.2305 10.5305C10.9376 10.8233 10.4628 10.8232 10.1699 10.5305C9.87703 10.2376 9.87703 9.76286 10.1699 9.46997C10.2474 9.39246 10.3252 9.22626 10.3252 9.00024C10.3252 8.83065 10.2811 8.69473 10.2266 8.60474L10.1699 8.53052L10.1182 8.47388C9.87786 8.1793 9.89532 7.74457 10.1699 7.46997Z"; -const SOUND_MUTED_SVG_PATH = "M6.9082 2.8985C7.71639 2.45747 8.74994 3.03437 8.75 4.00006V14.0001C8.75 15.0301 7.57405 15.6181 6.75 15.0001L3.64746 12.6729L1.10449 11.8253C0.594245 11.655 0.250012 11.1776 0.25 10.6397V7.36041C0.25005 6.82252 0.594258 6.34508 1.10449 6.17486L3.64746 5.32623L6.75 3.00006L6.9082 2.8985ZM4.51465 6.55182C4.4341 6.61218 4.34631 6.66193 4.25391 6.70123L4.16016 6.73736L1.75 7.5401V10.459L4.16016 11.2628L4.25391 11.2989C4.31551 11.3251 4.37502 11.356 4.43164 11.3917L4.51465 11.4483L7.25 13.4991V4.50006L4.51465 6.55182ZM9.60156 5.53033C9.89446 5.23755 10.3693 5.23748 10.6621 5.53033L13.1318 8.00006L15.541 5.59088C15.8339 5.29821 16.3087 5.29806 16.6016 5.59088C16.8944 5.8837 16.8942 6.35852 16.6016 6.65143L14.1924 9.06061L16.6729 11.5411C16.9654 11.834 16.9655 12.3088 16.6729 12.6016C16.38 12.8945 15.9042 12.8945 15.6113 12.6016L13.1309 10.1212L10.5908 12.6622C10.2979 12.9549 9.82313 12.955 9.53027 12.6622C9.23742 12.3693 9.23749 11.8945 9.53027 11.6016L12.0703 9.06061L9.60156 6.59088C9.30867 6.29799 9.30867 5.82323 9.60156 5.53033Z"; injectPlayerStyles(_playerBase); @@ -162,7 +160,7 @@ document.addEventListener('DOMContentLoaded', () => { videoElement.classList.add('vrwp-video'); // Create and insert play button - playBtn = createPlayButton(_playerBase); + playBtn = createPlayButton(); playerContainer.appendChild(playBtn); // Create and insert 2D control panel @@ -425,8 +423,7 @@ function init() { uiElements.push(vrPlayPauseButtonMesh); const rewindButtonWorldSize = FIGMA_REWIND_BUTTON_SIZE_PX * SCALE_FACTOR; - const rewindSVGPath = "M20.5021 19.1818V25H19.0987V20.4943H19.0646L17.7635 21.2898V20.0739L19.1982 19.1818H20.5021ZM24.0156 25.0795C23.5914 25.0795 23.2145 25.0028 22.8849 24.8494C22.5554 24.696 22.295 24.4848 22.1037 24.2159C21.9143 23.947 21.8158 23.6383 21.8082 23.2898H23.1719C23.1832 23.5038 23.2704 23.6761 23.4332 23.8068C23.5961 23.9356 23.7902 24 24.0156 24C24.1918 24 24.348 23.9612 24.4844 23.8835C24.6207 23.8059 24.7277 23.697 24.8054 23.5568C24.883 23.4148 24.9209 23.2519 24.919 23.0682C24.9209 22.8807 24.8821 22.7169 24.8026 22.5767C24.7249 22.4366 24.617 22.3277 24.4787 22.25C24.3423 22.1705 24.1851 22.1307 24.0071 22.1307C23.8385 22.1288 23.6785 22.1657 23.527 22.2415C23.3774 22.3172 23.2637 22.4205 23.1861 22.5511L21.9446 22.3182L22.1974 19.1818H25.9304V20.3153H23.3537L23.2202 21.6875H23.2543C23.3509 21.5265 23.5062 21.3939 23.7202 21.2898C23.9361 21.1837 24.1813 21.1307 24.456 21.1307C24.8045 21.1307 25.1151 21.2121 25.3878 21.375C25.6624 21.536 25.8783 21.7595 26.0355 22.0455C26.1946 22.3314 26.2741 22.6591 26.2741 23.0284C26.2741 23.428 26.1795 23.7822 25.9901 24.0909C25.8026 24.3996 25.5393 24.642 25.2003 24.8182C24.8632 24.9924 24.4683 25.0795 24.0156 25.0795Z M22 14.25C26.2802 14.25 29.75 17.7198 29.75 22C29.75 26.2802 26.2802 29.75 22 29.75C17.7198 29.75 14.25 26.2802 14.25 22C14.25 21.661 14.2742 21.3275 14.3164 21H15.8311C15.7787 21.3257 15.75 21.6595 15.75 22C15.75 25.4518 18.5482 28.25 22 28.25C25.4518 28.25 28.25 25.4518 28.25 22C28.25 18.5482 25.4518 15.75 22 15.75C20.5176 15.75 19.1563 16.2666 18.085 17.1289L18.459 17.4775C18.5996 17.6088 18.5452 17.8431 18.3613 17.8994L15.877 18.6592C15.693 18.7154 15.5166 18.5516 15.5596 18.3643L16.1445 15.832C16.1881 15.6449 16.418 15.5749 16.5586 15.7061L16.9785 16.0977C18.3312 14.9459 20.0842 14.25 22 14.25Z"; - const rewindButtonTexture = createButtonTexture(rewindSVGPath, '#ffffff', 'rgba(0,0,0,0)', VR_BUTTON_TEXTURE_SIZE, 0, true, FIGMA_REWIND_BUTTON_SIZE_PX); + const rewindButtonTexture = createLucideButtonTexture('rotate-ccw', '#ffffff', VR_BUTTON_TEXTURE_SIZE, 82, '15'); const rewindButtonMaterial = new THREE.MeshBasicMaterial({ map: rewindButtonTexture, transparent: true, opacity: 0, depthWrite: false }); const rewindButtonGeometry = new THREE.PlaneGeometry(rewindButtonWorldSize, rewindButtonWorldSize); vrRewindButtonMesh = new THREE.Mesh(rewindButtonGeometry, rewindButtonMaterial); @@ -441,8 +438,7 @@ function init() { uiElements.push(vrRewindButtonMesh); const forwardButtonWorldSize = FIGMA_FORWARD_BUTTON_SIZE_PX * SCALE_FACTOR; - const forwardSVGPath = "M20.5021 19.1818V25H19.0987V20.4943H19.0646L17.7635 21.2898V20.0739L19.1982 19.1818H20.5021ZM24.0156 25.0795C23.5914 25.0795 23.2145 25.0028 22.8849 24.8494C22.5554 24.696 22.295 24.4848 22.1037 24.2159C21.9143 23.947 21.8158 23.6383 21.8082 23.2898H23.1719C23.1832 23.5038 23.2704 23.6761 23.4332 23.8068C23.5961 23.9356 23.7902 24 24.0156 24C24.1918 24 24.348 23.9612 24.4844 23.8835C24.6207 23.8059 24.7277 23.697 24.8054 23.5568C24.883 23.4148 24.9209 23.2519 24.919 23.0682C24.9209 22.8807 24.8821 22.7169 24.8026 22.5767C24.7249 22.4366 24.617 22.3277 24.4787 22.25C24.3423 22.1705 24.1851 22.1307 24.0071 22.1307C23.8385 22.1288 23.6785 22.1657 23.527 22.2415C23.3774 22.3172 23.2637 22.4205 23.1861 22.5511L21.9446 22.3182L22.1974 19.1818H25.9304V20.3153H23.3537L23.2202 21.6875H23.2543C23.3509 21.5265 23.5062 21.3939 23.7202 21.2898C23.9361 21.1837 24.1813 21.1307 24.456 21.1307C24.8045 21.1307 25.1151 21.2121 25.3878 21.375C25.6624 21.536 25.8783 21.7595 26.0355 22.0455C26.1946 22.3314 26.2741 22.6591 26.2741 23.0284C26.2741 23.428 26.1795 23.7822 25.9901 24.0909C25.8026 24.3996 25.5393 24.642 25.2003 24.8182C24.8632 24.9924 24.4683 25.0795 24.0156 25.0795Z M22 14.25C17.7198 14.25 14.25 17.7198 14.25 22C14.25 26.2802 17.7198 29.75 22 29.75C26.2802 29.75 29.75 26.2802 29.75 22C29.75 21.661 29.7258 21.3275 29.6836 21H28.1689C28.2213 21.3257 28.25 21.6595 28.25 22C28.25 25.4518 25.4518 28.25 22 28.25C18.5482 28.25 15.75 25.4518 15.75 22C15.75 18.5482 18.5482 15.75 22 15.75C23.4824 15.75 24.8437 16.2666 25.915 17.1289L25.541 17.4775C25.4004 17.6088 25.4548 17.8431 25.6387 17.8994L28.123 18.6592C28.307 18.7154 28.4834 18.5516 28.4404 18.3643L27.8555 15.832C27.8119 15.6449 27.582 15.5749 27.4414 15.7061L27.0215 16.0977C25.6688 14.9459 23.9158 14.25 22 14.25Z"; - const forwardButtonTexture = createButtonTexture(forwardSVGPath, '#ffffff', 'rgba(0,0,0,0)', VR_BUTTON_TEXTURE_SIZE, 0, true, FIGMA_FORWARD_BUTTON_SIZE_PX); + const forwardButtonTexture = createLucideButtonTexture('rotate-cw', '#ffffff', VR_BUTTON_TEXTURE_SIZE, 82, '15'); const forwardButtonMaterial = new THREE.MeshBasicMaterial({ map: forwardButtonTexture, transparent: true, opacity: 0, depthWrite: false }); const forwardButtonGeometry = new THREE.PlaneGeometry(forwardButtonWorldSize, forwardButtonWorldSize); vrForwardButtonMesh = new THREE.Mesh(forwardButtonGeometry, forwardButtonMaterial); @@ -457,8 +453,7 @@ function init() { uiElements.push(vrForwardButtonMesh); const exitButtonWorldSize = FIGMA_EXIT_BUTTON_SIZE_PX * SCALE_FACTOR; - const exitSVGPath = "M17.5264 17.418C17.8209 17.1778 18.2557 17.1953 18.5303 17.4698C18.8049 17.7444 18.8223 18.1791 18.582 18.4737L18.5303 18.5303L15.8105 21.2501H26C26.4142 21.2501 26.7499 21.5859 26.75 22.0001C26.75 22.4143 26.4142 22.7501 26 22.7501H15.8105L18.5303 25.4698L18.582 25.5264C18.8223 25.821 18.8048 26.2557 18.5303 26.5303C18.2557 26.8049 17.8209 26.8224 17.5264 26.5821L17.4697 26.5303L13.4697 22.5303L13.418 22.4737C13.4075 22.4608 13.3982 22.4471 13.3887 22.4337C13.3787 22.4196 13.3704 22.4045 13.3613 22.3897C13.3475 22.3671 13.3354 22.344 13.3242 22.3204C13.3187 22.3088 13.3115 22.2981 13.3066 22.2862C13.3029 22.2772 13.3002 22.2679 13.2969 22.2589C13.2874 22.2329 13.281 22.2064 13.2744 22.1798C13.2721 22.1702 13.2676 22.1611 13.2656 22.1514L13.2637 22.1436C13.2632 22.1414 13.2631 22.139 13.2627 22.1368C13.2616 22.1309 13.2607 22.1251 13.2598 22.1192C13.258 22.1081 13.2561 22.0971 13.2549 22.086C13.2517 22.0578 13.25 22.0291 13.25 22.0001C13.25 21.9912 13.2507 21.9825 13.251 21.9737C13.2512 21.9669 13.2515 21.96 13.252 21.9532C13.2537 21.9244 13.2568 21.896 13.2617 21.8682C13.2629 21.8617 13.2643 21.8552 13.2656 21.8487C13.2662 21.8458 13.2669 21.8428 13.2676 21.8399C13.2748 21.8067 13.286 21.7745 13.2979 21.7423C13.3012 21.733 13.3029 21.7231 13.3066 21.7139C13.3079 21.7108 13.3082 21.7073 13.3096 21.7042C13.3234 21.6718 13.3427 21.6419 13.3613 21.6114C13.3667 21.6026 13.3702 21.5927 13.376 21.584C13.3784 21.5804 13.3813 21.5769 13.3838 21.5733C13.409 21.537 13.4374 21.5021 13.4697 21.4698L17.4697 17.4698L17.5264 17.418Z M25.0381 16.0322H28.5C29.7425 16.0322 30.7498 17.0398 30.75 18.2822V25.7168C30.75 26.9594 29.7426 27.9668 28.5 27.9668H23V27.9648L22.9229 27.9609C22.5449 27.9223 22.25 27.603 22.25 27.2148C22.2501 26.8007 22.5859 26.4648 23 26.4648H25C25.0128 26.4648 25.0255 26.4662 25.0381 26.4668H28.5C28.9142 26.4668 29.25 26.131 29.25 25.7168V18.2822C29.2498 17.8682 28.9141 17.5322 28.5 17.5322H23V17.5303L22.9229 17.5264C22.5449 17.4878 22.2501 17.1683 22.25 16.7803C22.25 16.3661 22.5858 16.0303 23 16.0303H25C25.0128 16.0303 25.0254 16.0316 25.0381 16.0322Z"; - const exitButtonTexture = createButtonTexture(exitSVGPath, '#ffffff', 'rgba(0,0,0,0)', VR_BUTTON_TEXTURE_SIZE, 0, true, FIGMA_EXIT_BUTTON_SIZE_PX); + const exitButtonTexture = createLucideButtonTexture('log-out', '#ffffff', VR_BUTTON_TEXTURE_SIZE, 82); const exitButtonMaterial = new THREE.MeshBasicMaterial({ map: exitButtonTexture, transparent: true, opacity: 0, depthWrite: false }); const exitButtonGeometry = new THREE.PlaneGeometry(exitButtonWorldSize, exitButtonWorldSize); vrExitButtonMesh = new THREE.Mesh(exitButtonGeometry, exitButtonMaterial); @@ -571,25 +566,10 @@ function updateVRPlayPauseButtonIcon() { } const ctx = vrPlayPauseButtonContext; const canvas = vrPlayPauseButtonCanvas; - const tempViewBoxSize = 44; - const iconScale = canvas.width / tempViewBoxSize; ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "#ffffff"; - ctx.save(); - const scaledIconSize = tempViewBoxSize * iconScale; - ctx.translate((canvas.width - scaledIconSize) / 2, (canvas.height - scaledIconSize) / 2); - ctx.scale(iconScale, iconScale); - if (video.paused || video.ended) { - const playPath = new Path2D("M32.3859 20.4038C33.4457 21.204 33.4457 22.796 32.3859 23.5962L18.2051 34.3026C16.8874 35.2974 15 34.3575 15 32.7064V11.2936C15 9.64253 16.8874 8.70258 18.2051 9.69741L32.3859 20.4038Z"); - ctx.fill(playPath); - } else { - const rectX1 = 16; const rectX2 = 23; - const rectY = 9; const rectWidth = 5; const rectHeight = 26; - const rectRx = 2; - drawRoundedRect(ctx, rectX1, rectY, rectWidth, rectHeight, rectRx, true, false); - drawRoundedRect(ctx, rectX2, rectY, rectWidth, rectHeight, rectRx, true, false); - } - ctx.restore(); + const iconSize = 82; + const iconOffset = (canvas.width - iconSize) / 2; + drawLucideIcon(ctx, video.paused || video.ended ? 'play' : 'pause', iconOffset, iconOffset, iconSize, '#ffffff', 2); vrPlayPauseButtonTexture.needsUpdate = true; } @@ -599,25 +579,10 @@ function updateVRVolumeButtonIcon() { } const ctx = vrVolumeButtonContext; const canvas = vrVolumeButtonCanvas; - const svgPathNaturalViewBoxSize = 24; - const referenceDisplayViewBoxSize = 44; - const iconScale = canvas.width / referenceDisplayViewBoxSize; ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "#ffffff"; - ctx.save(); - const pathRenderScale = iconScale; - const pathOffsetX = (canvas.width - (svgPathNaturalViewBoxSize * pathRenderScale)) / 2; - const pathOffsetY = (canvas.height - (svgPathNaturalViewBoxSize * pathRenderScale)) / 2; - ctx.translate(pathOffsetX, pathOffsetY); - ctx.scale(pathRenderScale, pathRenderScale); - if (video.muted || video.volume === 0) { - const mutedPath = new Path2D(SOUND_MUTED_SVG_PATH); - ctx.fill(mutedPath); - } else { - const soundOnPath = new Path2D(SOUND_ON_SVG_PATH); - ctx.fill(soundOnPath); - } - ctx.restore(); + const iconSize = 82; + const iconOffset = (canvas.width - iconSize) / 2; + drawLucideIcon(ctx, video.muted || video.volume === 0 ? 'volume-x' : 'volume-2', iconOffset, iconOffset, iconSize, '#ffffff', 2); vrVolumeButtonTexture.needsUpdate = true; } @@ -1010,9 +975,11 @@ function update2DPlayPauseButton() { if (video.paused || video.ended) { play2Btn.classList.remove('playing'); play2Btn.classList.add('paused'); + setLucideIcon(play2Btn, 'play'); } else { play2Btn.classList.remove('paused'); play2Btn.classList.add('playing'); + setLucideIcon(play2Btn, 'pause'); } } @@ -1023,10 +990,12 @@ function update2DMuteButton() { // Video is muted, show unmute icon (user can click to unmute) muteBtn.classList.remove('muted'); muteBtn.classList.add('unmuted'); + setLucideIcon(muteBtn, 'volume-x'); } else { // Video is unmuted, show mute icon (user can click to mute) muteBtn.classList.remove('unmuted'); muteBtn.classList.add('muted'); + setLucideIcon(muteBtn, 'volume-2'); } } diff --git a/vr180player/images/back-hover.png b/vr180player/images/back-hover.png deleted file mode 100644 index b1bc87929d0d1469afe5fdbcb3f61d0748b71889..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4714 zcmV-w5|!@~0drDELIAGL9O(c600d`2O+f$vv5yPG#ZWG)z#JB&d$zl zEKCTu8Y0fLS>)GR;@3Qb$1L#0W5Vz{>FMbiG7O_d z?1=Y}B~e!wMCS=UPMZ>)jTEtnR|{jThEXCG@g`=B2ZOU^6|)f{7V)M+osT1&(U_o; zQECw*+i>~v<-;uAK@!rU&cDy`G7SJrE8>0o_8s8S_L!~NhOFV=>r7eva_K}oG&I!9 z{_U_>hg?|VW4!1Vqf{au9v(i#r!f-p28~D07d0xELc}N$bL2fC(YLJ>HYyih#QXQ} zA6Q*ooe=L^4B(Z!ySoogOiV0MK`69{**+ZR(g(0yc)W4EWkEViB-$(+SN3|i zAo3|?KrSLiF9cmLB}*roy*!pxi8^x;!w;>jteoYCRT6Bc#zMZxLjE_UNamgx6FEr) zEc~An&O38zWGZ3|Y=q>4g*ZIi zYT7N;NX#|@W#uXfLOf2iVk=S;v6K57BSDByPb=Aq)I{t|u@{7-j5_0~*rX!jp`oEc zk~JcP7Qq_Rlz>!3+|kjITH;!;7p%3HBpSCYVkZh$Nf1(iZE5V3TT3Z6XE28sm6V#0 z7CqayZ@;v#u%Nv;drOfRJ93glVIgJW+S69;#2^Vm`cxg8szqWEix(EMBu+F=EMmz> z2pLn=%~T{3u|#1Z4|Ma!i9}qfR0c>8GDbIV99zWBjEx!zLJqLj_C`G?_A*xc_U$_% z^XB}y&pu=sD&w=wbV~JP> zbk~7cpMLsjdg`gCw1uk!ZU`LU?Afz71Z_K<3EM*f`LcHK+ApY)mLAoC!TmBSMhqmAQ8TM zb#;}#`|dlk4c1;4i+I-ebEJt4R^qkSUTb<%_|ch}nPvoh;e{7sSqHrBBVwupk<&d$ z!}q%V_S>81yYIf69(w4Z=4-}z4g7o`e)wTCyI~VSmO@*^!^6YBk>M?u$B!Ss@fgt< zBGUoFy>Q_IojZ3fv9KUyL|Ta2o09VbH^#f~zH3z$gM;YH)6>&4-s@V~2~Ol<%zd%-#*Bv8W{|P z^T;EQXgwEVgWdS-v(Hi&5D#FQ?*h0%@EDOf2nZe?esOWpmH{7jF8zo1qE^|NP4$yx zIALN@z$(CtBKl>W^1^F<^2sOk`s=TU-Y6;}>sSy2=;1;3x(UfzBDSGQr%J?O%+Ag> zqi>!-zz}lS>#7Wj4RCg*=Dijv;-qTihj#!JJ%WIT$IoXv>-VM0bh#ydbY4L?^9DPkM^uc&1+C_Q(*{CT zygftAO1NbJKR0sKNU!+;A>;EV;vL+DdScV7bPBxnV)S3Oc1P7j??;>_{j$Lp_a=7` z<%wmb%Mf5gyh2ev+7I`Pj<~2PO_JtE?p zfe_FV`T6Icry`29g#};i=Ye4&K&V)C$lLIa z>*!1in=l$Aa?@7|vP#53-Zzi8TL=}YIUMfS^+sL@4h`>qooP|kH@{*EFmz3dx_V%h zod}9ZSvBTF5o8_kbD}}tOVrI46p4TS`DZejFcH_uFjQ5`3;y^fq@jW$wdu=TS?7s= z{q0`aW#HcSz>S~9P=w7IF|Fk6B~Zj%Vugr}6LP!yZv7%Igo?#j)NE_KLtuhu z&;l)CA`WU3MHSD)>;y;Rx_TUCCm>>@dMH$?%Zu8+E33((NR9bT-o(wLa|1=Kz!?

9aAImrcImb>T#5vsFQ)9-~jLG1p>}` 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 Z{s&~`oz0KZ_!0mB002ovPDHLkV1lEH!Jq&D diff --git a/vr180player/images/forward.png b/vr180player/images/forward.png deleted file mode 100644 index 682682e32d31ef3b4c17844ca148c7580b81c3e7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1638 zcmbVM_g4}M6b8ecD;lOE`dpEtp@~Wl&@9DVxpS`~L@@Q?c$zzVo}Th@3uZYG%T#cY zVyUU6SwU$_#Z_ohm^o52@zKA~J?FdM`R+O2y+7P@z8qI)I|Vs4IRF5lfU&oA6Ejl` zhK!WBqehS%g^?SXEaIJ-gP;1O@;cuv?R^J*NfK@#OPiH%=g8(63MYRwI(2xzwQd1=jebv@ z`AoRBG*;+I=J@>B_Fp9U$uL|37RU826VQS7F338lBMgjc5k15M<3<(AXg-3TnUhsd51(^S!x%0iWypy84i$*Um7?pKd z7^u1E1U^=rwsKNGTOq$(`OQC8+rW|Mi9&$ZJrG2bzdu&d_95%#rA2I`LX1t~%gctz zF*wj{O3Cg`tpHG<=s5NHVazxg0&k43X}`FIl}#mTZ+qN%a&`BHd(>AiAD-TfXE5~h zVBGrHlnwV2d}xG@-VXD_V>5<`_<5MWL;UVk2s&;dD++h2gxqc0-ZDOs!=`pL#b@;L zOTnC7Yo59#ZNO)*8Q`KY<(-3dJMgZdU>y3T>-xC~wY`K2Nyh5hK>E$$LGzWdq_aWZ z5v)9(VFrAd8RiWVxcgeMLpcqw)ZMM29IvH|=V@Sp{u48r)Ogmhceya=R^ID~6>dP= zdgpUCf%&zimzRh$B)K1>o(UvAe@G0kiW$zij=rL&f-E&Z{u3J&R;@YL=HL%N+Ecji z!(UbZ(IFXKmuWtS(YPW-hGRhDGt#G!sFU3Kq+Mj};`ugK7N`+)xgX}`?;{)j(Dvl-Dv4hnn6|S|*?oT2qwe7%ShDy9`Olwo^0{C3hNHh6voM+;CS{YO(FDpOLwAl>(?&pJpzq zvhL&n`VBZpRl}}UNavq}#=FvmE(yLe%hg2NY5u4mD+{2XJ6M)&P)ODs6uj6^P|67} zGj5%Gf`Gvz6%!rXS2q8;i#l4a<>Ys2W17?Ej;c1E@o~^gJ4avOcmyg!&`G`2;~yG4 zBviG>gfr84Qa$IutAft@sCWu8Aa;~qUXfp>WzV}@6cBoMSb6-+#OP4e?BaaA8gYnq zfwf3^a5dG0hwO7^bYE;nXZC!iDpjXcKe&$^T>_;~DI(JC;C*65kS{ordz?i}E@ zUU5V8USFxiDJi%x+0;Ifg^vYe*BJw;nr^Qo)JTewATKm|J+-4v^Eb0r bY^(hujVL#D!0cJW{aS)K?QGj<6P)osg~;F1 diff --git a/vr180player/images/fullscreen-hover.png b/vr180player/images/fullscreen-hover.png deleted file mode 100644 index 582407b80e8820f074a0a940c47849c08dc56d9f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3626 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 diff --git a/vr180player/images/fullscreen.png b/vr180player/images/fullscreen.png deleted file mode 100644 index a4ce1265bd668c6d03b0d4363dc011807f07ac42..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 796 zcmeAS@N?(olHy`uVBq!ia0vp^8-aKO2OE%dDD6)GQk(@Ik;M!QI^H16xYTyqN}wQP zage(c!@6@aFM%AEbVpxDpw52oKZ&di3``q6T^vIy7~kG~7rRf)a|- zQ~Uzl5}04Gyk#qC-X`3_`-1Hp+Xc>$pOftGs9w0Faa`T@{N3_9KifN(UQgHFxP}90 zHX*RUdg+wSQQ=$nU7wX@JLP)h^{8W$d*cE5;uyCL*%v2d=9o89ND$@}(Z zREb(Hedio=*G+nMRQbhg{Ta!TueBfjzaUzkQD!^jlLJY$f|* z%3IDqZ(9}go44nRUvdsJZ20u&L4m03i@)=JTzK&GdD6xm-HcZr&v{?V&+9P#Vq>85 zAMImB;lZ6K zc86Ji*ktp5*R{%$v^u{XInxjQ{dDMKdHI{WGp$!{*{G*JOEPfYxf2%4G*2Xo?+{yd zsUpqgroHmxh`hzZ$~mck{gc(}Ny!Q3Z(o(&^G6Q|Z2Xmf Z8JV9;)Ohkb0uwI-gQu&X%Q~loCIAA=Ri*#{ diff --git a/vr180player/images/mute-hover.png b/vr180player/images/mute-hover.png deleted file mode 100644 index 480d6dd2ce5ddde578a03b85aaaea29c2949c989..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4431 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 VJtOvnkT(DT002ovPDHLkV1j=AF*pDK diff --git a/vr180player/images/mute.png b/vr180player/images/mute.png deleted file mode 100644 index 6bd5db014e7595f18d2069d9c09d1c10204e5d57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1540 zcmbVM`9Bj37#|n2`Dt+J52gO(w!IfpIF zoJ)9(oNc4XUavHApR;%Vg`UsndA`r}eV)(f`Qf>L#mQDiN>K^`0La+e*|-R>UZ8an zVgh?1IvXhf$tXL|+W>&>}@PvUN@T+7hmo`BL4o1FpzQVSD*2HSJEKR^pem0WLxu zsYkKm{f3TTbwS4J?CCJEAcoYrY&ZlM{FXOVclLnrb#jcL6mIK7+v0**-A zKXpOL3z$5W=@(_;^`nL%u9p(YGxBrr{Cka3$5zeQ^7u4w+j@TMk2&V~5R$MV4on>x zN#KP~Y^P5nQnkE_fQ%>ld8!dG9<;Z~&{7eirmM4%OMjo;A{_U`4^Bsq*?H+&K zgso3GPGKl@pu-b(uDs=b`$C?Os{hpZ8s=iy?+GmoR2|+u&40eP*vP7J`hGBdljiH= zv#-P32`B9Vyw9Lhl(-ZZmw^#DS+T4Wwj?@1rYe&;p zaWmB93{w-aXG-rqLL`Fd*EUr;rq+bsK~dO2YvsW`yq;Bc%#YZ#h2ez!0K)v4{(E#ZaBpR8c82qP zLxUwX9>Fm3Mp02y;2u^wGn%jxlIQ09tc7hM=V0p(^z!v##CfbWW{f+qD^QVGc6NwK zp6bA)%wjX{p9uo?Y|?gq_&y%9{-t2p2{TM+$t`U#ViI}8)!*|<)VsSHR7aE4iQ*so z!Wmvm&dyoOAbP3v*Zy&XNpLx@p_~W4cNDn%ZulTiT~dQScWidXQw~@rVlT0h+Bvz> zw~Y=U@dHWjDqIV*j5v=LM623yox`dr%%+k?y!ucuHfytwj9~p(qW;-_zz9Ke>O7nv*clj9I__T>9OT7AjUJpRdF%8HR7~{->{p10NKV{g+JmYu7nL zu)n(15Qzb#c|>cI$DPNaYJn3Y@_~#8p6DI(p^_uIqg|Ah5JFh;2%2y2W#jlgjfzfz z_Qs>DyQqZ$p3-T4ohhSQ6v5@HdXvkOB~l8^2MS2@pFcFKL>W@fR?i4mG0JV-g(8|tO5j8>A5!vmE-Rdm_PLi4@t5~ XVvSG7)@8tsnunqNMJJmYD`eXLNjk|a diff --git a/vr180player/images/pause-hover.png b/vr180player/images/pause-hover.png deleted file mode 100644 index 1197a2fef3815024a69c694541c2977b1e0b6043..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3246 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 diff --git a/vr180player/images/pause.png b/vr180player/images/pause.png deleted file mode 100644 index 5c98f69c47fd6078ec106ce8737d0012dc6f6c7e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 666 zcmeAS@N?(olHy`uVBq!ia0vp^8-aKO2OE%dDD6)GQk(@Ik;M!QI^H16xYTyqN}wQP zage(c!@6@aFM%AEbVpxDpw52oKZ&di3{3i-E{-7;jBl@B^py@2alPoSwSZ;1180el z6{qS_W(`GI3)u;LYRN|@I&eAOP|p5Vq5HD#=B1xEtEL?XnuZ-%%v$!cY+wFo+q2(| z{@yMSSRHC(s+argIo-W5OoB+hwxsTzB<0#n)Ld}9r9kH_D)q=1xoy85}Sb4q9e E06p^%>cd%yr9q1b5BQF;+2fOG-|Pz02K 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 A+yDRo diff --git a/vr180player/images/play2-hover.png b/vr180player/images/play2-hover.png deleted file mode 100644 index 15fa59ce8d99e385388fba3fd166b986c0c600fe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3830 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 diff --git a/vr180player/images/play2.png b/vr180player/images/play2.png deleted file mode 100644 index 1ad8a8f2fde40780e68b56cc85bc3e4508bffa9a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1167 zcmZuwYfMuI6mCI5K`6D=I#Fvo9&;i^5D>X5(A)|Lx5#603@C-EjAWE{z_8}>kYx52 z#Hu)KftInrm`m2mB=R(h)IFf1AafleYA-_R)CydrR1kLg?@7M%<@<8ZcYYn&abC2W z%T5;pf#4P!1190zhU3O2C%i`%$ptuV7R96%5D0#8>mas#QhOaYi3Lf~9D-(OmjxFa za-yIpd{gealC=?+Ua??Q${FIT2~(nH^p4+6CzRAk=dP_++(jGDxnIS5+y1>Nf+V7q zkRCM?X*@U4cPiBRgH)$;!?DFZHXtY*9&CO3a^*wS5E)N@e^F17;no-3qYGwR;r!E@ z!bgSH(XP+^w&&eVX*p8{nQx6-laD}m|85R2Jg`5yJ@m0NJz$&t^aSHsQJGVG-+mum zNT^EEr`RJjmHcu9%T9^7->bU6T35Jg(YyY3>0XcZ{G01RtcyZx=-hCv<*|#s69jsF zRNqO&0F&K7n!YbamTuH$@pm;KB(1EJpT5DFflhY83Yu@<_aK};I1`a9tms3Qmg)jn zPTuI;bBQ>Y|1v>0IndE2Y4at^wKDce46OzMH%XF$mhXk;9%Ma<)QygU^!dOu+sFyY zYO1~J^58QrQ+=ySntAb1-%SuGffTefS?3lxb}wik!9$$NR?s50iY0Y3jfs4xHL_TV z-&^%Xe^t^L=*~kUhAPIBrbI8Yu_@MkT7z+PMSo)1-x&BvC)<8obhD1e)Fe}a)+tR* zdw9pj(Y*<;F6B2IZ2r$eq}gCTdJRM=kGUT%pcs-pHyWgn z5Vd#3nKKR$bC~LDauU{5U8$g8!$-MTR!x0pX>sBh{I3_H6Jw!<<8lWpxMtE6M zKrx#A-{#P***;+UwN$+nng(~D4yK26$p(w*LG`41F#Q%luRObG^U%uzr|g&R^nQef ziljd1{BygAZ5uCEg(YssOq-eh{gZI#rcwbfzR^DG5IWbM!Cjl>c>;qF07=-rtf?vQ zFDP>h?WV;ES=hk?686$URd~J!Z>6c$Ykr?-y70dW@>1NR8+1qT@oe|1A8XyPOoGlO{h;Gsd0d zZPB`6rk@_``UB}l18j)&!e8*SrEX35tHq9iHC1_AGacnte|7JFdMWBx@wz$2@SqVcjct{!c1c+lSdGOkzyEV_R}iq~P_uWa S$@~0drDELIAGL9O(c600d`2O+f$vv5yPv!( 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 diff --git a/vr180player/vr180-player.css b/vr180player/vr180-player.css index beccec8..d4cfb7b 100644 --- a/vr180player/vr180-player.css +++ b/vr180player/vr180-player.css @@ -39,9 +39,10 @@ pointer-events: none; } -.vrwp-play-button img { +.vrwp-play-button .vrwp-icon { width: 100%; height: 100%; + filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } @media (max-width: 600px) { @@ -135,52 +136,39 @@ cursor: pointer; border: none; background-color: transparent; + color: #fff; + display: grid; + place-items: center; + padding: 0; + position: relative; + transition: color 0.15s ease-in-out; +} + +.vrwp-panel button:hover { + color: #d8d8d8; +} + +.vrwp-icon { + width: 28px; + height: 28px; + stroke: currentColor; +} + +.vrwp-fullscreen, +.vrwp-mute, +.vrwp-back, +.vrwp-play-toggle, +.vrwp-forward { + width: 44px; + height: 44px; } .vrwp-fullscreen { grid-area: full; - width: 44px; - height: 44px; - background-image: url(images/fullscreen.png); - background-size: 44px 44px; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.15s ease-in-out; -} - -.vrwp-fullscreen:hover { - background-image: url(images/fullscreen-hover.png); } .vrwp-mute { grid-area: mute; - width: 44px; - height: 44px; - background-image: url(images/mute.png); - background-size: 44px 44px; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.15s ease-in-out; -} - -.vrwp-mute:hover { - background-image: url(images/mute-hover.png); -} - -.vrwp-mute.muted { - background-image: url(images/mute.png); -} - -.vrwp-mute.muted:hover { - background-image: url(images/mute-hover.png); -} - -.vrwp-mute.unmuted { - background-image: url(images/unmute.png); -} - -.vrwp-mute.unmuted:hover { - background-image: url(images/unmute-hover.png); } .vrwp-nav { @@ -191,60 +179,13 @@ height: 44px; } -.vrwp-back { - width: 44px; - height: 44px; - background-image: url(images/back.png); - background-size: 44px 44px; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.15s ease-in-out; -} - -.vrwp-back:hover { - background-image: url(images/back-hover.png); -} - -.vrwp-play-toggle { - width: 44px; - height: 44px; - background-image: url(images/play2.png); - background-size: 44px 44px; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.15s ease-in-out; -} - -.vrwp-play-toggle:hover { - background-image: url(images/play2-hover.png); -} - -.vrwp-play-toggle.paused { - background-image: url(images/play2.png); -} - -.vrwp-play-toggle.paused:hover { - background-image: url(images/play2-hover.png); -} - -.vrwp-play-toggle.playing { - background-image: url(images/pause.png); -} - -.vrwp-play-toggle.playing:hover { - background-image: url(images/pause-hover.png); -} - -.vrwp-forward { - width: 44px; - height: 44px; - background-image: url(images/forward.png); - background-size: 44px 44px; - background-repeat: no-repeat; - background-position: center; - transition: background-image 0.15s ease-in-out; -} - -.vrwp-forward:hover { - background-image: url(images/forward-hover.png); +.vrwp-skip-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -48%); + font-size: 0.625rem; + font-weight: 700; + line-height: 1; + pointer-events: none; }