## Issue
The 15s saving interval (hijacking the position-saving code) is too far apart, causing rescys data to be lost when tab is closed/refreshed.
## Change
While I think it is fine to save to redux every second, it is still best to avoid that since a state change will always cause the map-to-props to evaluate.
Chose 5s as the interval and moved away from the position-saving code (the recsys videojs plugin is a better choice to handle this).
Also save it on `t=1` so that at least we know it played prior to the tab refreshing/closing.
## Considered
- Didn't want to do `beforeunload` again since it is unreliable and a pain to test in mobile.
Ticket: 1751
## Issue
The `totalPlayTime` resides in the videojs plugin and is only sent to the recsys object in `onPlayerDispose`, so it missed the redux rehydration in the browser close/refresh scenario.
## Change
Update the recsys value for `totalPlayTime` immediately so that it'll be part of the redux stashing (and later, rehydration).
Note that recsys data is currently being saved to redux in a 15s interval. Will change that in the next commit.
* Remove ad-handling in videojs.jsx
Primary impetus is to remove unnecessary IntersectionObserver usage, but it should be removed anyway because:
- no longer relevant today with Adnimation's script.
- we also globally hide floating ads now, so no more invisible divs.
- the code is wrongly placed -- it's not the responsibility of the Videojs component.
* use-lazy-loaded: skip if IntersectionObserver is not supported
## Issue
Page not loading in older Safari (e.g. ipad air 2)
## Approach
Instead of using a polyfill (which comes with implementation caveats), just not apply the lazy-loading for those old browsers. Not lazy-loading is better than not loading at all, plus this is way easier to test (even by just reading the code) than testing out the polyfill implementation's caveats.
The cons is we would need the polyfill if we use it in other places in the future.
## Code Changes
Factor out the src-setting code, and use it directly when IntersectionObserver is not found.
Fixed the title that did not update from stale closure because we no longer re-initialize the plugin.
We still continue to sever the connection when switching sources for now (although videojs is now single-instance) due to a problem that stops the next remote playback after 5-10 seconds. Unclear whether it is the plugin problem or due to our changes (although I don't see this issue in their repo).
* Playback-rate: fix popup behavior
- Part of 1637 - invokes the popup menu when clicked.
- This also makes the button consistent with other `MenuButton`s, i.e. to invoke a menu popup when clicked instead of hovered.
* Adjust CSS
Co-authored-by: Raphael Wickihalder <raphael.wickihalder@odysee.com>
* add mobile plugin back on ios
* further touchups and fix ios
* finish mobile functionality
* dont show big play button on mobile
* remove logs
* proof of concept
* dont go full screen on rotate
* add back functionality
* replace dispose event with navigate away
* bugfix
* turn off show if you liked button and nag only on homepage
* add back old functionality
* ending event not working
* test here
* working but needs cleanup
* more player touchups
* bugfix
* add settings button on mobile
* more touchups
* more cleanups
* touchup loading functionality
* fix hover thumbnails
* touchup and eslint fix
* fix repopulation bug
* change recsys event name
* bugfix events
* change the way buttons are removed and added
* finish chapters button
* refactor to use videojs methods
* refactor to fix autoplay next
* ux touchups
* seems to be behaving properly
* control bar behaving how it should
* fix control bar on ios
* working on flow and eslint errors
* bugfix and flow fixes
* bring back nudge
* fix playlist button bug
* remove chapter markers properly
* show big play button
* bugfix recsys closed event
* fix analytics bug
* fix embeds
* bugfix
* possible bugfix for kp
* bugfix playlist buttons
* fix issue with mobile ui plugin
* fix firefox autoplay issue
* fix bug for play on floating player closed
* bugfix volume control for ios
* instantiate new player if switching between claim types
* fix flow and lint errors
* fix control bar not showing up when switching sources
* dispose old player if recreating
* bugfix save position
* reset recsys data between videos
* fix audio upload posters
* clear claimSrcVhs on reload
* bugfix errant image previews showing up
* reset player value of having already switched quality
* fix watch position not being used
* bugfix switching between sources not perserving position
* fix save position bug
* fix playlist buttons
* bugfix
* code cleanup and add back 5 second feature
- The function name is good and self-documenting, so removed the redundant comment. Whether it's 'precise' or not, it could change in the future and not worth maintaining a comment like that.
- Focused on the non-obvious reason for SHIFT key instead.
- Fixed "on scroll" variable naming since it is not just for scrolling (it applies to keyboard up/down too)
* Redesign form elements with background
* Adjust list ads
* Fix progress bar in mini player
* Fix progress bar on mobile
* Fix progress bar in theater mode
* Redesign repost modal
* Update channel selector in modal
* Remove border radius from embedded media
* Adjust quality selector
* Adjust updated player theme for light mode
* Rename wrapper class
- Add ability to store `entries` into Redux.
- Sync to redux in the same interval as when playing position is saved (re-use timer).
- On startup, send any stashed entries and clear them.
working example
use my forked package
touchups to presentation
Make progress bar thumbnail sprite pixel perfect
add vtt path
fix progress bar a bit
add a black background
use odysee team package
fix two issues for merge
more analytics + refactor
- passes player with time to start (until we move this api to watchman)
- supports livestream metrics for buffering
- fixes bug with buffering over 10 second period
- less head calls by moving to videojs-events
* review fixes
## Issue
I couldn't find where the i18n went because the "events" refactor is just as confusing as the original -- unrelated things are still lumped together in a file.
Also, factoring based on events isn't useful -- it is features that drive what events are needed, not the other way around. This forces features to register events here, and do other things elsewhere? It will be more intuitive to have a one-file-per-feature structure.
## Change
Use existing frameworks to encapsulate things to manageable units/features:
(1) the React useEffect files (can be used isolate out React features like 'tap-to-mute' handling).
(2) the videojs plugins framework.
- Make the chapters button appear consistently.
- Previously, it was only appearing for Original.
- We still hide it for mobile, as per previous explanation.
- Changed the Chapters button position and popup aesthetics.
- Deemed not useful in mobile, unless you have an S-pen that can hover.
- The chapters button (that invokes the chapters popup) would make more sense in Mobile, but we need to deal with the limited controlbar space first (e.g. overflow menu system)
