CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-10 09:28:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Enable smooth touch scrolling on mobile devices

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-18 10:29:17 +03:00
parent 127e3d2573
commit b95962cec8
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend-tools/video-js/src/components/controls/CustomChaptersOverlay.js
View File

@ -14,6 +14,7 @@ class CustomChaptersOverlay extends Component {
this.seriesTitle = options.seriesTitle || 'Chapters'; this.seriesTitle = options.seriesTitle || 'Chapters';
this.channelName = options.channelName || ''; this.channelName = options.channelName || '';
this.thumbnail = options.thumbnail || ''; this.thumbnail = options.thumbnail || '';
this.isScrolling = false;
// Bind methods // Bind methods
this.createOverlay = this.createOverlay.bind(this); this.createOverlay = this.createOverlay.bind(this);
@ -119,6 +120,12 @@ class CustomChaptersOverlay extends Component {
const body = document.createElement('div'); const body = document.createElement('div');
body.className = 'chapter-body'; body.className = 'chapter-body';
// Enable smooth touch scrolling on mobile devices
body.style.cssText += `
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
overscroll-behavior: contain;
`;
container.appendChild(body); container.appendChild(body);
const list = document.createElement('ul'); const list = document.createElement('ul');
@ -172,14 +179,38 @@ class CustomChaptersOverlay extends Component {
</svg>`; </svg>`;
action.appendChild(btn); action.appendChild(btn);
// Mobile & desktop click/touch // Handle click and touch events properly
const seekFn = () => { const seekFn = (e) => {
this.player().currentTime(chapter.startTime); // Prevent default only for navigation, not scrolling
this.overlay.style.display = 'none'; if (e.type === 'click' || (e.type === 'touchend' && !this.isScrolling)) {
this.updateActiveItem(index); e.preventDefault();
this.player().currentTime(chapter.startTime);
this.overlay.style.display = 'none';
this.updateActiveItem(index);
}
}; };
// Track scrolling state for touch devices
let touchStartY = 0;
let touchStartTime = 0;
item.addEventListener('touchstart', (e) => {
touchStartY = e.touches[0].clientY;
touchStartTime = Date.now();
this.isScrolling = false;
}, { passive: true });
item.addEventListener('touchmove', (e) => {
const touchMoveY = e.touches[0].clientY;
const deltaY = Math.abs(touchMoveY - touchStartY);
// If user moved more than 10px vertically, consider it scrolling
if (deltaY > 10) {
this.isScrolling = true;
}
}, { passive: true });
item.addEventListener('touchend', seekFn, { passive: false });
item.addEventListener('click', seekFn); item.addEventListener('click', seekFn);
item.addEventListener('touchstart', seekFn);
anchor.appendChild(drag); anchor.appendChild(drag);
anchor.appendChild(meta); anchor.appendChild(meta);