New icon set, added overlay html, updated demo & various bugfixes

Author: alphanull

CHANGELOG.md

@@ -5,14 +5,44 @@ All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org) and follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) format.
 
 ---
+## [1.2.0] – 2025-10-26
+
+### Added
+
+- Playlist: prev / next icons will be greyed out when navigation is not possible (i.e. last segment is reached)
+- UI: new API `ui.resize` (which forces recalculating player width and height)
+- Overlays: added type `html` for HTML-based overlays
+- Overlays: added option `sanitizeHTML` to prevent XSS attacks from unsafe HTML (enabled by default and enforced in the secure build). This (severely) limits the allowed HTML.
+- Demo: added link on the logo to the new vision.player.io microsite
+- Added new default iconset
+- Added options in the UI component to change the iconset back to the filled version
+
+### Changed
+
+- Updated dev dependencies
+- More CSS resets to make player more resilient to outside CSS
+- Updated screenshot in README.md
+
+### Fixed
+
+- When UI autohide is enabled, the UI no longer reappears immediately when a popup was open at the time of hiding
+- Prevent default event handling in the keyboard component when an action is detected, so it does not interfere with scrolling etc.
+- Thumbnail positioning should now also work when using non pixel units for scrubber width
+- UI scale should now honor the respective player config setting
+- Additional minor CSS fixes
+- Fixed docs in Media.md and Media.js
+- Fixed links to docs in demo
+- Removed broken link in HLS demo
+- Additional fixes in demo
+
 ## [1.1.1] – 2025-10-15
 
 ### Fixed
 
 - Playlist title now retained when switching player language
 - Thumbnail positioning in scrubber should be properly centered now
 - Thumbnail positioning fixed when switching playlist media
-- small typo in english translation
+- Small typo in English translation
 - Fixed JSDocs in ScrubberTooltip.js
 
 ### Changed

README.md

@@ -13,7 +13,7 @@
 
 # VisionPlayer
 
-The **VisionPlayer** by **[alphanull](https://alphanull.de)** is a highly modular, lightweight, and feature-rich JavaScript video player for the modern web. Designed as a flexible component system, the player allows for deep customization, simple integration, and full control over both appearance and functionality. Whether you're building a minimal player for a single video or a complex interface supporting multilingual, multi-quality streaming with overlays and playlist management — this player adapts to your needs.
+The **VisionPlayer** by **[alphanull](https://alphanull.de)** is a highly modular, lightweight, and feature-rich JavaScript media player for the modern web. Designed as a flexible component system, the player allows for deep customization, simple integration, and full control over both appearance and functionality. Whether you're building a minimal player for a single video or a complex interface supporting multilingual, multi-quality streaming with overlays and playlist management — this player adapts to your needs.
 
 ## Features
 
@@ -51,7 +51,7 @@ The **VisionPlayer** by **[alphanull](https://alphanull.de)** is a highly modula
 
 ## Demo
 
-Just hop over to **[visionplayer.io](https://visionplayer.io)** to take a test drive! Right now, the page features demos identical to the ones coming with the development server, but in the future this site will deliver more information about the VisionPlayer, so stay tuned.
+Just hop over to **[visionplayer.io](https://visionplayer.io)** to take a test drive or watch some feature demos. The documentation is [also available there](https://visionplayer.io/docs/).
 
 ## Installation
 

assets/images/screenshot.jpg

@@ -3,6 +3,7 @@
 
 vision-player {
     .icon.airplay { @include icon-masked('player/airplay.svg', var(--vip-icon-height), var(--vip-icon-color)); }
+    &.icon-filled .icon.airplay { @include icon-masked('player-filled/airplay.svg', var(--vip-icon-height), var(--vip-icon-color)); }
     &.has-no-media .icon.airplay { @include disabled; }
     &.is-airplay .icon.airplay::before { background: var(--color-1st); }
 }

assets/scss/casting/airplay.scss

@@ -5,6 +5,7 @@
 vision-player {
 
     .icon.chromecast { @include icon-masked('player/chromecast.svg', var(--vip-icon-height), var(--vip-icon-color)); }
+    &.icon-filled .icon.chromecast { @include icon-masked('player-filled/chromecast.svg', var(--vip-icon-height), var(--vip-icon-color)); }
     &.has-no-media .icon.chromecast { @include disabled; }
 
     .vip-chromecast {
@@ -33,7 +34,10 @@ vision-player {
             button { min-width: 12em; }
         }
 
-        p { text-align: start; }
+        p {
+            margin: 0;
+            text-align: start;
+        }
     }
 
     .vip-chromecast-bg {

assets/scss/casting/chromecast.scss

@@ -83,4 +83,14 @@ vision-player {
         &.keySeekForward .icon-bg.forward { display: flex; }
         &.keyPlay .icon-bg.play { display: flex; }
     }
+
+    &.icon-filled .vip-keyboard-overlay .icon {
+        &.forward { @include icon-masked('player-filled/forward.svg', 100%, var(--vip-icon-color)); }
+        &.rewind { @include icon-masked('player-filled/rewind.svg', 100%, var(--vip-icon-color)); }
+        &.volume { @include icon-masked('player-filled/vol-full.svg', 100%, var(--vip-icon-color)); }
+        &.volume.is-half { @include icon-masked('player-filled/vol-half.svg', 100%, var(--vip-icon-color)); }
+        &.volume.is-muted { @include icon-masked('player-filled/vol-muted.svg', 100%, var(--vip-icon-color)); }
+        &.play { @include icon-masked('player-filled/play.svg', 100%, var(--vip-icon-color)); margin-left: 0.3em; }
+        &.pause { @include icon-masked('player-filled/pause.svg', 100%, var(--vip-icon-color)); }
+    }
 }

assets/scss/controller/keyboard.scss

@@ -41,6 +41,10 @@ vision-player {
         }
     }
 
+    &.icon-filled .vip-pip-bg {
+        @include icon-masked('player-filled/pip-bg.svg', 11vmin, var(--color-contrast5));
+    }
+
     &.is-rtl .vip-pip {
         direction: rtl;
     }

assets/scss/controller/pip.scss

@@ -39,6 +39,7 @@ vision-player {
         }
 
         .icon.play {
+            @include icon-masked('player/play-overlay.svg', var(--vip-icon-height), var(--vip-icon-color));
             @include transition('opacity, transform');
 
             position: absolute;

assets/scss/controller/playoverlay.scss

@@ -10,7 +10,7 @@ vision-player {
         width: 100%;
         height: var(--vip-scrubber-height);
         top: 0;
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-small);
         background: none;
         filter: brightness(80%) drop-shadow(0.001em 0 0 var(--vip-scrubber-buffered));
         pointer-events: none;

assets/scss/controller/scrubber.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable @stylistic/max-line-length */
+
 @use '../lib/mixins' as *;
 @use '../core/mixins' as *;
 @use '../core/vars' as *;
@@ -6,7 +8,6 @@ vision-player {
 
     .vip-volume-slider {
 
-        /* stylelint-disable-next-line @stylistic/max-line-length */
         @include icon-masked('player/vol-slider.svg', [var(--vip-volume-slider-width),  var(--vip-icon-height)], var(--color-contrast5), 0, '::after');
         @include transition('opacity, width, transform');
 
@@ -71,4 +72,10 @@ vision-player {
         > .icon.volume.is-half { @include icon-masked('player/vol-half.svg', var(--vip-icon-height), var(--vip-icon-color), 0 0 0 0); }
         > .icon.volume.is-muted { @include icon-masked('player/vol-muted.svg', var(--vip-icon-height), var(--vip-icon-color), 0 0 0 0); }
     }
+
+    &.icon-filled .vip-volume-wrapper {
+        > .icon.volume { @include icon-masked('player-filled/vol-full.svg', var(--vip-icon-height), var(--vip-icon-color), 0 0 0 0); }
+        > .icon.volume.is-half { @include icon-masked('player-filled/vol-half.svg', var(--vip-icon-height), var(--vip-icon-color), 0 0 0 0); }
+        > .icon.volume.is-muted { @include icon-masked('player-filled/vol-muted.svg', var(--vip-icon-height), var(--vip-icon-color), 0 0 0 0); }
+    }
 }