For the search transcript function, it is laggy because on any change to the search input, react will re-render the page, which can take a long time if the list of transcript items is long.
Instead we should render only a small subset of the list at any given time so that the user can see the search results right away. I used react-virtualized library to do this.
For the pictureinpicture feature, there is a pictureinpicture api, but it is currently supported by only Chrome and cannot be initiated through scrolling. Instead I opted for something simple, just using CSS position. When the video is playing and the user scrolls, the video sticks to the top on mobile and topright on larger screens.Unlike a real pictureinpicture feature, the user cannot move my pictureinpicture window around or have it be visible even if the user interacts with other sites or applications on their devices.
Issues 13, 16, 17
For the search transcript function, it is laggy because on any change to the search input, react will re-render the page, which can take a long time if the list of transcript items is long. Instead we should render only a small subset of the list at any given time so that the user can see the search results right away. I used react-virtualized library to do this.
For the pictureinpicture feature, there is a pictureinpicture api, but it is currently supported by only Chrome and cannot be initiated through scrolling. Instead I opted for something simple, just using CSS position. When the video is playing and the user scrolls, the video sticks to the top on mobile and topright on larger screens.Unlike a real pictureinpicture feature, the user cannot move my pictureinpicture window around or have it be visible even if the user interacts with other sites or applications on their devices.
Also, I made the video player responsive.