Added Playlist Support

Author: Sravani289

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8] - 2025-09-18
+
+### New & Improved: Playlist
+- Added playlist APIs: `addPlaylist(playlist)`, `next()`, `previous()`, `selectEpisodeByPlaybackId(playbackId)`
+- Supported attributes: `default-playback-id`, `hide-default-playlist-panel`, `loop-next`
+- Events: `playbackidchange`, `playlisttoggle`
+- Custom navigation hooks: `customNext(handler)`, `customPrev(handler)`; call `i.next()`/`i.previous()` inside your handlers
+- Default playlist panel can be hidden to build a fully custom panel via `slot="playlist-panel"`
+- Introduced `destroy()` for lightweight teardown before custom source-switching flows
+
+### iOS Volume Behavior
+- When iOS-specific volume button is active, standard slider/button are hidden
+
+### Menu Bugs fixed
+- Fixed playlist panel toggle inconsistencies (open/close state and pointer events)
+- Ensured external custom panel shows/hides reliably with `playlisttoggle`
+- Resolved menu overlap by closing rate/audio/subtitle/resolution menus when opening playlist panel
+
 ## [1.0.7] - 2025-09-04
 
 - Fixed "OpenOnPlay" and "autoClose" issue for shoppable-video-player theme
@@ -85,4 +103,4 @@ All notable changes to this project will be documented in this file.
 - **Placeholder**: Added placeholder support for loading states.
 - **offline/online control**: Provided control mechanisms for offline/online scenarios.
 - **Title Display**: Implemented title display options for videos.
-- **Overriding Default Behaviors**: Allowed users to override default player behaviors.
+- **Overriding Default Behaviors**: Allowed users to override default player behaviors.

PLAYLIST_DEVELOPER_GUIDE.md

@@ -0,0 +1,10 @@
+## FastPix Player - Playlist Developer Guide
+
+For the complete and up-to-date playlist documentation (APIs, attributes, events, and examples), please refer to the Player Documentation.
+
+Quick notes:
+- Use `addPlaylist([...])` to load items (each requires `playbackId`).
+- Optional: `default-playback-id`, `loop-next`, `hide-default-playlist-panel`.
+- Events: `playbackidchange`, `playlisttoggle`.
+  - Lightweight teardown before switching sources. Usually not required for standard navigation (handled internally), but useful if you implement custom source-switching flows.
+- Advanced usage (custom panel via `slot="playlist-panel"`, `customNext`, `customPrev`) is covered in the Player Documentation. 

README.md

@@ -908,3 +908,58 @@ fastpix-player {
 
 
 Each of these features is designed to enhance both flexibility and user experience, providing complete control over video playback, appearance, and user interactions in FastPix-player.
+
+## Playlist Quick Start
+
+Add a playlist and navigate programmatically or with the default UI.
+
+```html
+<fastpix-player id="player" aspect-ratio="16/9"></fastpix-player>
+<script>
+  const playlist = [
+    { playbackId: 'playback-id-1', title: 'Intro', thumbnail: "https://via.placeholder.com/300x200/ffc107/000000?text=Episode+1"},
+    { playbackId: 'playback-id-2', title: 'Deep Dive', thumbnail: "https://via.placeholder.com/300x200/ffc107/000000?text=Episode+2" token='playback-token' },
+    { playbackId: 'playback-id-2', title: 'Deep Dive', thumbnail: "https://via.placeholder.com/300x200/ffc107/000000?text=Episode+3",drmToken:'drm-token' },
+
+  ];
+
+  const player = document.getElementById('player');
+  player.addPlaylist(playlist);
+
+  // Optional: start from a specific id
+  // <fastpix-player default-playback-id="7f847ed3-6688-482b-8043-67a35325fb00">
+
+  player.addEventListener('playbackidchange', (e) => {
+    const { playbackId, currentIndex, totalItems } = e.detail || {};
+    console.log('Now playing', playbackId, currentIndex, '/', totalItems);
+  });
+
+  // Programmatic navigation
+  // player.next();
+  // player.previous();
+
+  // destroy(): Lightweight teardown before switching sources
+  // Typically not needed for standard playlist navigation (handled internally),
+  // but useful if you implement custom source-switching flows.
+  // player.destroy();
+</script>
+```
+
+Hide the default playlist panel and build your own using the slot:
+
+```html
+<fastpix-player id="player" hide-default-playlist-panel>
+  <div slot="playlist-panel" id="myPlaylistPanel">Your custom UI here</div>
+</fastpix-player>
+<script>
+  // Toggle with player-dispatched events
+  const player = document.getElementById('player');
+  const panel = document.getElementById('myPlaylistPanel');
+  player.addEventListener('playlisttoggle', (e) => {
+    if ((e.detail?.hasPlaylist ?? false) === false) return;
+    panel.style.display = e.detail.open ? 'block' : 'none';
+  });
+</script>
+```
+
+For full details see `PLAYLIST_DEVELOPER_GUIDE.md`.

SHOPPABLE_VIDEO_DEVELOPER_GUIDE.md

@@ -720,3 +720,4 @@ if (player.getAttribute('theme') === 'shoppable-shorts') {
 3. **Check Network**: Ensure player.js is loading correctly
 4. **Inspect Element**: Check if cart button exists in DOM but is hidden
 5. **Force Show**: Use `player.showCartButton()` or `player.ensureShoppableShortsCartButton()` to debug visibility issues
+ 

package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "@fastpix/fp-player",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "FastPix Player SDK is a customizable video player for on-demand and live streaming.",
   "main": "./dist/player.js",
   "files": [
     "dist/*"
   ],
   "scripts": {
     "format": "prettier --write \"src/**/*.ts\"",
-    "build": "npm run format && esbuild src/player.ts --target=es2019 --bundle --outfile=./dist/player.js",
+    "build": "npm run format && esbuild src/player.ts --target=es2019 --bundle --minify --outfile=./dist/player.js",
     "format:css": "prettier --write \"src/utils/innerHtml.ts\""
   },
   "keywords": [
@@ -30,7 +30,7 @@
   "author": "FastPix, Inc",
   "license": "MIT",
   "dependencies": {
-    "@fastpix/video-data-core": "^1.0.3",
+    "@fastpix/video-data-core": "^1.0.5",
     "hls.js": "^1.5.15",
     "test-live-package": "^1.0.8"
   },

package.json

@@ -1,3 +1,3 @@
 export const NextIcon: string = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 33 33" fill="none">
-<path d="M24.2648 27.3409C23.9891 27.3409 23.7247 27.2314 23.5298 27.0365C23.3348 26.8415 23.2253 26.5771 23.2253 26.3014V6.84517C23.2253 6.56948 23.3348 6.30508 23.5298 6.11013C23.7247 5.91518 23.9891 5.80566 24.2648 5.80566H25.8394C26.1151 5.80566 26.3795 5.91518 26.5744 6.11013C26.7694 6.30508 26.8789 6.56948 26.8789 6.84517V26.3014C26.8789 26.5771 26.7694 26.8415 26.5744 27.0365C26.3795 27.2314 26.1151 27.3409 25.8394 27.3409H24.2648ZM5.04944 7.19029V25.8945C5.04944 26.7383 6.00215 27.2305 6.69057 26.7422L20.2364 17.1335C20.8297 16.7125 20.8186 15.8281 20.2143 15.4227L6.66848 6.32698C5.97798 5.86362 5.04944 6.35816 5.04944 7.19029Z" fill="white"/>
+<path d="M24.2648 27.3409C23.9891 27.3409 23.7247 27.2314 23.5298 27.0365C23.3348 26.8415 23.2253 26.5771 23.2253 26.3014V6.84517C23.2253 6.56948 23.3348 6.30508 23.5298 6.11013C23.7247 5.91518 23.9891 5.80566 24.2648 5.80566H25.8394C26.1151 5.80566 26.3795 5.91518 26.5744 6.11013C26.7694 6.30508 26.8789 6.56948 26.8789 6.84517V26.3014C26.8789 26.5771 26.7694 26.8415 26.5744 27.0365C26.3795 27.2314 26.1151 27.3409 25.8394 27.3409H24.2648ZM5.04944 7.19029V25.8945C5.04944 26.7383 6.00215 27.2305 6.69057 26.7422L20.2364 17.1335C20.8297 16.7125 20.8186 15.8281 20.2143 15.4227L6.66848 6.32698C5.97798 5.86362 5.04944 6.35816 5.04944 7.19029Z" fill="currentColor"/>
 </svg>`;

src/icons/NextIcon/index.ts

@@ -1,11 +1,11 @@
 export const PlaylistIcon: string = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 33 33" fill="none">
 <g clip-path="url(#clip0_13552_13979)">
-<path d="M27.3965 12.1973V9.57227C27.3965 8.87607 27.1199 8.20839 26.6276 7.71611C26.1354 7.22383 25.4677 6.94727 24.7715 6.94727V6.07227C24.7715 5.37607 24.4949 4.70839 24.0026 4.21611C23.5104 3.72383 22.8427 3.44727 22.1465 3.44727H11.6465C10.9503 3.44727 10.2826 3.72383 9.79033 4.21611C9.29805 4.70839 9.02148 5.37607 9.02148 6.07227V6.94727C8.32529 6.94727 7.65761 7.22383 7.16533 7.71611C6.67305 8.20839 6.39648 8.87607 6.39648 9.57227V12.1973C5.70029 12.1973 5.03261 12.4738 4.54033 12.9661C4.04805 13.4584 3.77148 14.1261 3.77148 14.8223V27.0723C3.77148 27.7685 4.04805 28.4361 4.54033 28.9284C5.03261 29.4207 5.70029 29.6973 6.39648 29.6973H27.3965C28.0927 29.6973 28.7604 29.4207 29.2526 28.9284C29.7449 28.4361 30.0215 27.7685 30.0215 27.0723V14.8223C30.0215 14.1261 29.7449 13.4584 29.2526 12.9661C28.7604 12.4738 28.0927 12.1973 27.3965 12.1973ZM10.7715 6.07227C10.7715 5.8402 10.8637 5.61764 11.0278 5.45355C11.1919 5.28945 11.4144 5.19727 11.6465 5.19727H22.1465C22.3785 5.19727 22.6011 5.28945 22.7652 5.45355C22.9293 5.61764 23.0215 5.8402 23.0215 6.07227V6.94727H10.7715V6.07227ZM8.14648 9.57227C8.14648 9.3402 8.23867 9.11764 8.40277 8.95355C8.56686 8.78945 8.78942 8.69727 9.02148 8.69727H24.7715C25.0035 8.69727 25.2261 8.78945 25.3902 8.95355C25.5543 9.11764 25.6465 9.3402 25.6465 9.57227V12.1973H8.14648V9.57227ZM28.2715 27.0723C28.2715 27.3043 28.1793 27.5269 28.0152 27.691C27.8511 27.8551 27.6285 27.9473 27.3965 27.9473H6.39648C6.16442 27.9473 5.94186 27.8551 5.77777 27.691C5.61367 27.5269 5.52148 27.3043 5.52148 27.0723V14.8223C5.52148 14.5902 5.61367 14.3676 5.77777 14.2035C5.94186 14.0395 6.16442 13.9473 6.39648 13.9473H27.3965C27.6285 13.9473 27.8511 14.0395 28.0152 14.2035C28.1793 14.3676 28.2715 14.5902 28.2715 14.8223V27.0723Z" fill="white"/>
-<path d="M21.2715 19.3723L16.2402 16.2223C15.958 16.0478 15.6344 15.9519 15.3027 15.9443C14.971 15.9368 14.6433 16.0179 14.3534 16.1793C14.0636 16.3408 13.8221 16.5766 13.6538 16.8626C13.4856 17.1486 13.3968 17.4743 13.3965 17.8061V24.0886C13.3954 24.4203 13.4833 24.7463 13.6511 25.0326C13.8188 25.3188 14.0603 25.5549 14.3502 25.7161C14.6406 25.878 14.9689 25.9593 15.3012 25.9516C15.6335 25.9439 15.9577 25.8475 16.2402 25.6723L21.2715 22.5223C21.5392 22.3558 21.76 22.1237 21.9131 21.8482C22.0662 21.5726 22.1465 21.2625 22.1465 20.9473C22.1465 20.6321 22.0662 20.322 21.9131 20.0464C21.76 19.7709 21.5392 19.5388 21.2715 19.3723ZM20.344 21.0436L15.3127 24.1848C15.2958 24.1937 15.2768 24.1981 15.2576 24.1977C15.2385 24.1972 15.2197 24.192 15.2032 24.1824C15.1866 24.1728 15.1727 24.1591 15.1628 24.1427C15.1529 24.1263 15.1473 24.1077 15.1465 24.0886V17.8061C15.1444 17.7866 15.1483 17.7669 15.1577 17.7497C15.1671 17.7325 15.1815 17.7186 15.199 17.7098C15.2189 17.7031 15.2404 17.7031 15.2602 17.7098H15.3127L20.344 20.8511C20.3603 20.8613 20.3737 20.8755 20.383 20.8923C20.3922 20.9092 20.3971 20.9281 20.3971 20.9473C20.3971 20.9665 20.3922 20.9854 20.383 21.0023C20.3737 21.0191 20.3603 21.0333 20.344 21.0436Z" fill="white"/>
+<path d="M27.3965 12.1973V9.57227C27.3965 8.87607 27.1199 8.20839 26.6276 7.71611C26.1354 7.22383 25.4677 6.94727 24.7715 6.94727V6.07227C24.7715 5.37607 24.4949 4.70839 24.0026 4.21611C23.5104 3.72383 22.8427 3.44727 22.1465 3.44727H11.6465C10.9503 3.44727 10.2826 3.72383 9.79033 4.21611C9.29805 4.70839 9.02148 5.37607 9.02148 6.07227V6.94727C8.32529 6.94727 7.65761 7.22383 7.16533 7.71611C6.67305 8.20839 6.39648 8.87607 6.39648 9.57227V12.1973C5.70029 12.1973 5.03261 12.4738 4.54033 12.9661C4.04805 13.4584 3.77148 14.1261 3.77148 14.8223V27.0723C3.77148 27.7685 4.04805 28.4361 4.54033 28.9284C5.03261 29.4207 5.70029 29.6973 6.39648 29.6973H27.3965C28.0927 29.6973 28.7604 29.4207 29.2526 28.9284C29.7449 28.4361 30.0215 27.7685 30.0215 27.0723V14.8223C30.0215 14.1261 29.7449 13.4584 29.2526 12.9661C28.7604 12.4738 28.0927 12.1973 27.3965 12.1973ZM10.7715 6.07227C10.7715 5.8402 10.8637 5.61764 11.0278 5.45355C11.1919 5.28945 11.4144 5.19727 11.6465 5.19727H22.1465C22.3785 5.19727 22.6011 5.28945 22.7652 5.45355C22.9293 5.61764 23.0215 5.8402 23.0215 6.07227V6.94727H10.7715V6.07227ZM8.14648 9.57227C8.14648 9.3402 8.23867 9.11764 8.40277 8.95355C8.56686 8.78945 8.78942 8.69727 9.02148 8.69727H24.7715C25.0035 8.69727 25.2261 8.78945 25.3902 8.95355C25.5543 9.11764 25.6465 9.3402 25.6465 9.57227V12.1973H8.14648V9.57227ZM28.2715 27.0723C28.2715 27.3043 28.1793 27.5269 28.0152 27.691C27.8511 27.8551 27.6285 27.9473 27.3965 27.9473H6.39648C6.16442 27.9473 5.94186 27.8551 5.77777 27.691C5.61367 27.5269 5.52148 27.3043 5.52148 27.0723V14.8223C5.52148 14.5902 5.61367 14.3676 5.77777 14.2035C5.94186 14.0395 6.16442 13.9473 6.39648 13.9473H27.3965C27.6285 13.9473 27.8511 14.0395 28.0152 14.2035C28.1793 14.3676 28.2715 14.5902 28.2715 14.8223V27.0723Z" fill="currentColor"/>
+<path d="M21.2715 19.3723L16.2402 16.2223C15.958 16.0478 15.6344 15.9519 15.3027 15.9443C14.971 15.9368 14.6433 16.0179 14.3534 16.1793C14.0636 16.3408 13.8221 16.5766 13.6538 16.8626C13.4856 17.1486 13.3968 17.4743 13.3965 17.8061V24.0886C13.3954 24.4203 13.4833 24.7463 13.6511 25.0326C13.8188 25.3188 14.0603 25.5549 14.3502 25.7161C14.6406 25.878 14.9689 25.9593 15.3012 25.9516C15.6335 25.9439 15.9577 25.8475 16.2402 25.6723L21.2715 22.5223C21.5392 22.3558 21.76 22.1237 21.9131 21.8482C22.0662 21.5726 22.1465 21.2625 22.1465 20.9473C22.1465 20.6321 22.0662 20.322 21.9131 20.0464C21.76 19.7709 21.5392 19.5388 21.2715 19.3723ZM20.344 21.0436L15.3127 24.1848C15.2958 24.1937 15.2768 24.1981 15.2576 24.1977C15.2385 24.1972 15.2197 24.192 15.2032 24.1824C15.1866 24.1728 15.1727 24.1591 15.1628 24.1427C15.1529 24.1263 15.1473 24.1077 15.1465 24.0886V17.8061C15.1444 17.7866 15.1483 17.7669 15.1577 17.7497C15.1671 17.7325 15.1815 17.7186 15.199 17.7098C15.2189 17.7031 15.2404 17.7031 15.2602 17.7098H15.3127L20.344 20.8511C20.3603 20.8613 20.3737 20.8755 20.383 20.8923C20.3922 20.9092 20.3971 20.9281 20.3971 20.9473C20.3971 20.9665 20.3922 20.9854 20.383 21.0023C20.3737 21.0191 20.3603 21.0333 20.344 21.0436Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_13552_13979">
-<rect width="28" height="28" fill="white" transform="translate(2.89648 2.57227)"/>
+<rect width="28" height="28" fill="currentColor" transform="translate(2.89648 2.57227)"/>
 </clipPath>
 </defs>
 </svg>`;

src/icons/PlaylistIcon/index.ts

@@ -1,2 +1,2 @@
 export const PrevButtonIcon: string = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 33 33" fill="none">
-<path d="M7.90513 27.3409C8.18082 27.3409 8.44522 27.2314 8.64017 27.0365C8.83512 26.8415 8.94464 26.5771 8.94464 26.3014V6.84517C8.94464 6.56948 8.83512 6.30508 8.64017 6.11013C8.44522 5.91518 8.18082 5.80566 7.90513 5.80566H6.33053C6.05483 5.80566 5.79043 5.91518 5.59548 6.11013C5.40054 6.30508 5.29102 6.56948 5.29102 6.84517V26.3014C5.29102 26.5771 5.40054 26.8415 5.59548 27.0365C5.79043 27.2314 6.05483 27.3409 6.33053 27.3409H7.90513ZM27.1205 7.19029V25.8945C27.1205 26.7383 26.1678 27.2305 25.4794 26.7422L11.9335 17.1335C11.3402 16.7125 11.3514 15.8281 11.9556 15.4227L25.5014 6.32698C26.1919 5.86362 27.1205 6.35816 27.1205 7.19029Z" fill="white"/>`;
+<path d="M7.90513 27.3409C8.18082 27.3409 8.44522 27.2314 8.64017 27.0365C8.83512 26.8415 8.94464 26.5771 8.94464 26.3014V6.84517C8.94464 6.56948 8.83512 6.30508 8.64017 6.11013C8.44522 5.91518 8.18082 5.80566 7.90513 5.80566H6.33053C6.05483 5.80566 5.79043 5.91518 5.59548 6.11013C5.40054 6.30508 5.29102 6.56948 5.29102 6.84517V26.3014C5.29102 26.5771 5.40054 26.8415 5.59548 27.0365C5.79043 27.2314 6.05483 27.3409 6.33053 27.3409H7.90513ZM27.1205 7.19029V25.8945C27.1205 26.7383 26.1678 27.2305 25.4794 26.7422L11.9335 17.1335C11.3402 16.7125 11.3514 15.8281 11.9556 15.4227L25.5014 6.32698C26.1919 5.86362 27.1205 6.35816 27.1205 7.19029Z" fill="currentColor"/>`;