classtranscribe / FrontEnd

The React + Redux Frontend for ClassTranscribe
https://classtranscribe.illinois.edu
Other
25 stars 27 forks source link

Support pinch zoom and XY drag gestures #767

Open angrave opened 6 months ago

angrave commented 6 months ago

To better support low vision (and mobile users) it would be useful to easily zoom, and move around the primary video. There is already support for zooming and translating built but. A double click might reset the zoom and translation. Translation should be constrained so edge cant significantly exceed the display area). For wide screens a vertical zoom control on the lower control bar would be useful.

Support pinch zoom and translation (multi-touch) gestures on primary video. See http://devdoc.net/web/developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures.html

Add vertical slider control for rapid change in zoom magnification, which opens after clicking a zoom icon on the lower left side, next to the volume. e.g., one of these- https://mui.com/material-ui/material-icons/?query=zoom