Giter VIP home page Giter VIP logo

youtube-timestamps's Introduction

Hello Friend, my name is Tyler! 🌇

I'm a Web Developer, I specialize mostly in the front-end & making accessible applications.

About Me 📖

I love building and learning, it's a part of the reason why I'm a web developer. With the vastness that is web development, I enjoy trying out new things which may improve my workflow, or to get a better perspective. Things like making sure something is accessible for all is always key when I'm building for the web.

Currently Working On 🚧

Blog Posts ✍🏽

Upcoming Posts

  1. How accessible are emojis?
  2. Let's build an accessible modal in React!

Me Around the Web 🛬

  1. Website: trjones.dev
  2. LinkedIn: Tyler Jones
  3. CodePen: TylerJDev

youtube-timestamps's People

Contributors

dependabot[bot] avatar tylerjdev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

uttaravadina

youtube-timestamps's Issues

Improve popup

Improving popup
Currently, I only use the plugin's popup for settings. I could enhance this by adding a feature which lists current active videos which has timestamps. We could add on to this feature even more by listing the current active timestamp on each video.

Implementing
Current active videos should be stacked on top of each other, and allow the user to skip the current timestamp, or go back to the previous one.

Timestamps stop updating

Occurrences

Steps to reproduce

  1. Proceed to video
  2. Observe current timestamp

Expected result
Timestamp should properly update based on current time & timestamp.

Actual Result
Timestamp appears to stop at first track, i.e, "Hellofriend ..." (In first occurrence example)

Comments
Within timeStampObj, it appears all links_tracks arrays are of the same link & timestamp text. Could possible be an issue in regards to the timestamp format, i.e 0:00:00 instead of 00:00:00.

Improve testing

Testing needs to be further improved
Currently, the tests does not cover much of the code base, which is an issue for maintenance and new features.

As an improvement, I should work on getting tests to cover current methods used in production, as well as ensure testing is done for any and all new features.

I should look for ways to better show the code coverage overall, and ensure a process is setup so no code is pushed into production unless all tests have passed.

Plugin throws error before first timestamp

Occurrences

Steps to reproduce

  1. Open Chrome Developer Tools
  2. Proceed to one of the URLs above
  3. Ensure that the video is playing from the start

Expected Result
No error should be thrown within the console

Actual Result
Error handleYoutube.js:67 Uncaught TypeError: Cannot read property '0' of undefined is thrown in the console

Comments
This is most likely caused because the first timestamp link in the URLs mentioned start after 00:00, i.e, (00:04). Will need to ensure that no error is thrown if the first timestamp link starts after 00:00.

Integrate new YouTube timestamp feature

Integrate new YouTube feature
YouTube has rolled out a "experimental" feature, one that tracks timestamps and separates them via the video player time bar. This can be reproduced here:

Example Video
Note: May need to be ran in incognito mode (Chrome) to reproduce

How to implement
I should see how the timestamps are being pulled, and if they are stored somewhere that the plugin may access. I could then improve this feature more so by implementing my current features (Next, Previous). Allowing a user to choose which time to pick, etc.

Additional notes
I should make note and see if this works on any other browser.. Firefox, etc, or if it's just a Chrome feature.

Further improve parsing

As of now, parsing of the track title properly grabs texts in most cases, but this can further be improved.

For example;

  1. '03. Track Title', should rather be 'Track Title'
  2. '[0:00 - 3:15] Track Title' should rather be 'Track Title'

Now these aren't exactly issues, but could be improved as to remove any unnecessary visual noise. There's also the consideration for AT users, the announcement of the current track title should be clear and understandable for any user using AT.

Below, I'll list various timestamp examples which could be improved on. This list is ongoing, so if there's any issues regarding the parsing of the track title, it should be mentioned here, with either the link to the timestamps, or the timestamp text itself.

Links:

Improper timestamps from comments

Occurrences

Steps to reproduce

  1. Proceed to video
  2. Go to comment section
  3. Wait for plugin to find timestamp
  4. Observe current track title

Expected Result
No timestamp should be found

Actual Result
Timestamp is found within comments which is improper

Comments
This could be fixed in a multitude of ways, but the simplest seems to be not grabbing a timestamp if only one is found in the comment section. This will require multiple use cases to ensure that this fix is enough for this issue.

Current Track text is undefined

Occurrences

Steps to reproduce

  1. Open Chrome Developer Tools
  2. Proceed to one of the URLs above
  3. Ensure that the video is playing from the start

Expected result
Title should be properly grabbed from description/comment content.

Actual Result
timestampObj.current_track equals undefined.

Comments
There may be a different cause of the issue in the mentioned URLs, though they both most likely stem from the same part within the code. Could possibly be caused via parsing of the related timestamp text.

Timestamps disappear

Occurrences
https://www.youtube.com/watch?v=DBToMwdYBME

Steps to reproduce

  1. Go to video above
  2. Proceed to comment section and wait until plugin finds the timestamps within the comments
  3. Proceed to a video with timestamps in the description (within the recommendation column)
  4. Proceed back to previous video

Expected result
Timestamps should stay on the video and be properly updated

Actual result
Timestamps are removed from the page (HTML)

Timestamps don't update from comments

Occurrences
https://www.youtube.com/watch?v=DBToMwdYBME

Steps to reproduce

  1. Proceed to video above
  2. Go to another video with timestamps within the comments (within recommendation column)
  3. Proceed back to previous video

Expected result
Timestamps should be proper, should list the current video's timestamps

Actual result
Timestamps are being carried over by the previous video, meaning that the timestamps are incorrect

Show active videos with timestamps in popup

Show all active videos with timestamps
I should show videos which are currently active in a users browsers and have timestamps, within the popup of the plugin.

This would contain the following features.

Describe the solution you'd like
The features for this would be:

  • Allows a user to go to previous/next track
  • Allows a user to pause the current track.
  • Shows the user a list of the songs in the current video.

This feature would greatly enhance usability of the plugin, I believe if implemented right, it would improve users ease of access.

What I'm supposed to see after installing the extension?

I know this seems like a really stupid question & as further inspection of the closed & open issues I seem to be the only one who is suffering from this issue!
so it seems like for me this extension isn't working
I'm trying to use it on this video which has the timestamps both in the comment section & in the description box!

& I can't seem to see any effect of this extension to make the timestamps more manageable.
I'm on Microsoft edge Version 84.0.522.63 (Official build) (64-bit)

Timestamp HTML stays on video

Occurrences
https://www.youtube.com/watch?v=7lERcfsqJSk

Steps to reproduce

  1. Proceed to video mentioned in occurrences
  2. Go to a video which does not contain timestamps
  3. Observe timestamp HTML (i.e, heading, buttons) is still present on page

Expected result
Timestamp HTML should be removed if current video does not have timestamps.

Actual Result
Timestamp HTML stays present on video regardless of if it has timestamps or not.

Add timestamp title to progress preview

Feature
When hovering over the progress bar, YouTube will display a preview of an image at the time hovered over. I could possibly add the timestamp title for that exact time.

Solution
The timestamps could be placed based on if that timestamp time is greater than the time that's currently displayed, while less than the very next timestamp. Determination of the timestamp should not be something which is done each time the user hovers over a new time, i.e 1:03 > 1:14.

This is to reduce the strain on performance which may be impacted if calculation is ran each time a user hovered through the progress bar.

Additional notes
This feature should be inspected more to see if it's possible and or plausible to be done.

Plugin displaying wrong current track

Occurrences

Steps to reproduce

  1. Visit link where issue is occurring, proceed to any time past first track, (after 3:10 for the first example above).
  2. Timestamp should display as the previous track, which is incorrect.

Expected result
Current timestamp should always be correct, even if there are multiple of the same timestamp time.

Actual Result
Current timestamp is the previous track.

Comments
Plugin is displaying wrong current track, most likely caused due to multiple same timestamps which refer to different tracks.

Current Timestamps are incorrect

Occurrences

Steps to reproduce

  1. Start from the beginning of the video above
  2. Observe current timestamp

Expected result
Current timestamp should be correct

Actual Result
Current timestamp appears to be one behind

Comments
It appears the timestamps after 00:29:31 are correct, also the highlighted timestamp within the description is correct.

Add dropdown listbox for timestamp options

Feature
A dropdown should be added to the timestamp "title" sections, this dropdown would allow a user to select a timestamp from the dropdown

Solution
I should create a dropdown which a user can activate, either within the progress bar, or the main timestamp title which is present next to the title of the video.

The dropdown would contain all of the timestamps found on the video.

An example of a dropdown

Add notifications

Add notification for each track
When a user is listening to a track, there is no notification of what song is currently playing, nor when a song has changed.

I could implement a notification system, which would allow the following features.

Features
Utilizing Chromes notification api, I could implement the following:

  • Notifications on each track change.
  • Allow notification pane to contain previous and next track buttons.

Notes
I should ensure that this is a feature that a user can turn on and off.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.