classtranscribe / classtranscribe/FrontEnd

Show preview of frame when hovering over seek bar

Open
#248 1 comment 4 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
24
Forks
29
PR merge metrics
No merged PRs in 30d

Description

Feature request to support showing a preview image of a point in the video when the seek bar is hovered over.

One way to do it is in the style of YouTube:

![cursor hovering over the seek bar in the YouTube player with a small preview of the video at that point](https://user-images.githubusercontent.com/32315760/97095084-bff1ee00-1620-11eb-881f-1a4660eaa1bb.png)

Or, since ClassTranscribe mostly hosts screen recordings of large amounts of text, instead of showing a small preview over the cursor, the preview image could take up most of the screen, to let users see finer details:

Before hover:
![normal classtranscribe interface](https://user-images.githubusercontent.com/32315760/97095160-a309ea80-1621-11eb-9996-2e68d560e266.png)

While hovering:
![classtranscribe interface with the proposed change. a preview image covers the current frame and the current frame is darkened](https://user-images.githubusercontent.com/32315760/97095185-f845fc00-1621-11eb-8e34-c04001b8b6e9.png)

Some way to visually navigate the video without having to do a binary search through clicking and waiting for the video to buffer would be super helpful for skimming videos.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the video player and seek-bar entry points in the React + Redux frontend, then review how seeking and hover interactions currently work. Define which preview presentation to implement from the alternatives in the issue, and consider the work done when users can visually inspect the video at hovered seek-bar positions without repeated buffering waits.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, redux
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.