<video> Player buttons to be added</video>

[ImprovedTube]

• We can integrate / combine so many more features that we made already or that are avaiable free (no restrictions by copyright: https://greasyfork.org/en/scripts?sort=total_installs#:~:text=HTML5%20Video & collab /coop? - Dear fellow JS developers for extensions, youtube.com & <video> . . . #1881)
  • a better UI can be more efficient work than new features, as long as features are developed in the world, which don't make it to be knowm by many peoplem who should know them and would love to.

List of missing player buttons (Global and/or YouTube)

• Popout window player (removing the URL bar made it flash - not sure we can do it differently)
• PiP (Picture in picture)
• fit to window button features exist request: #556 solution: #1798 (yet our "fit to window" needs an update/rewrite. Until then it is only a 100% height button and the icon is misleading)
• Screenshot (usecase: memories / publishing)
  • .gif maker ( just how to develope? series of frames?)
• repeat
  • should be a 4- or 3-way toggle: (off | infinite or 5 times or custom duration or amount | only 1 time )
  • Right-click can result in adding a lock to the icon too, locking it (=always on, always the currently selected option) (and that code can be repurposed for more buttons sticky repeat button & sticky anything? #1491)
  • Refine our Repeat/Loop-feature ( Include popout player & Exclude ads?) #1504
• [Looper/Clip-selector] integrate our other extension?: todo looper#2
  • remember loop per video
  • multi-range slider (to select multiple key scenes / parts and share as a link)
    • key scene selection can also be semi automated Youtube's Timeline Histogram enables/improves a lot... #1463 (or fully automated in a context of speed-watching)
• Skip to next key scene data-source: #1463
• speed & [next/last] frame integrate our other extension?: https://github.com/code-for-charity/frame-by-frame
  • UI Plan below
  • Smart-Speed-Watching ( should later be content/context aware with some set&forget capability (Smarter Speed-up #1636) , or specifically:
• Skip to next word (based on transcript or auto-transcript)
  • skip (up to) all silent parts of the current video' ( Skip silence #921 )
    • ...
• Volume Boost: Adding a little red area to youtube's slider. 1)Plan 2)better global addon 3)combine with normalization#comment ( max. gain#comment ) ; ...
  - [ ] (And/or just a toggle on/off features exist )
• 'Play all' (=stay on current channel or playlist #1166 Not a player feature, just a playlist feature / This button/icon can appear near every channel name ADD "Play All" Videos button to Search Results #1280 (features exist)
• transpose. Compare: transpose pitch speed loop
• Mirror (for dancing along or play alone guitar, drums,.... & some other thus other HowTo's/DIY/Cooking (exists)
  • remember per video or per selection, if a loop is or will be set too for this video. (compare: mirrortube )
• "Readability": increase contrast + decrease saturation proportionally?
• download ( our unblob? )
• play in vlc (exists!);
• (chromeCast with custom APP?) Add chromecast support (Cast to TV) #1860; (and/or moved away behind ⋮ hamburg menu ? Discovery (and production) of small (~rare) but global features. #2037)
• Preload whole. Or pause preloading(exist/ed):https://smarter.yt), ... , ..?;
• Bandwidth? : Audio-only or 144p (features exist) We can integrate the method and icon of https://github.com/Ashish-Bansal/audio-only-youtube (asked him here: Bandwidth // Audio only  #566 (comment) )
• Rotate (who uses this tho actually?)

content-based buttons (youtube only) :

• not only button, but a universal (little) <Input> at once - for Search in Captions & Comments at once should appear in line with important buttons https://github.com/sonigy/YCS.

  • skip video to first matching line; open transcript; show comments filtered&marked up.
    - ( 2. Typing 'some words at start ... end can define a section/chapter/refrain/verse, if "..." becomes a .*? regex applied on the transcript of the video. So this can also defined a &start= &end= time mark for bookmarking or sharing) - and that section could then play in a loop and be seen in the looper element's icon...)

• Filtering 'too popular' stuff: Strategic blocking based on category, popularity & monoculture #1451
  (Many people want to "set & forget", but this should be accompanied by a a dynamic button. (It could be an slider on mouse-over (like volume. Ranging from 0-100), and indicate the value calculated for the current video/channel)

Player buttons Layout

• These Buttons can be enabled in one row by default, like Youtube Enhancer has by now too, but with decreasing size&opacity by relevance. They can also appear at all edges on mouse over and intentional mouse direction (not random)
  ( Without overlapping the video, buttons could stay permanently, but still can be a filtered / contextual selection / transparency. And optional only appear on mouse over (along with youtube's controls) )

Rationale

While usally temporary (one-time-use) on left click,
on right-click, every button could also allow to build specific sticky-rules! ( 'always for this channel' / ...category ...'keyword/tag:....' (added to a list 'my rules' - Such ideas will arise while experiencing content - not while staring at our menus) (abstract for non-developers)

• (in turn each button can later indicate auto-active state through such rule with a slightly pink frame/glow or so, to possibly remind of it incase a forgotten rule needs an refinemen/exception. Right click: 'exclude this video/channel/category [from my skipping rules(whitelist)]'

---

"I'd like that (popout button enabled by default). Otherwise as a new user (first install two days ago) I found it hard to know what the extension could do." (#860 (comment)) )

[ImprovedTube]

compact button-design for speed(+frames) - Can look just like:

<- (1.0) ->

A little input, with a button left & right('slower' & 'faster')

• Once video is paused (<[0.0]> - speed 0), the interval of the left&right buttons can be 1 frame only Then the buttons can (until unpausing)

• (the button-element can support scroll at mouse-over)

• This special input could also be draggable like a joystick ( like an invisible slider, only reflected by the number changing. just not to taking much space when inactive & avoiding misclicks, but fading in once dragged more than 1% (1vw) directionally

  • while - dragging much wrong/diagonally could be interpreted as accidental click all together (or intentional quit), after applying the speed momentarily (Like playing with a gas pedal) (edit 2024: youtube added: click&hold for speed.)

---

• the Input should remember the value at last usage, but only activate it for a future video when clicking the input again like a 'button' (Enough for most of all users. Some people also wish for muliple speeds, but then it could be automated by rules rather categories music 1x, news 1.5x, lengthy-walkthroughs 2x.)

[xiomaraR]

I'd like to help with one of the more beginner friendly tasks, which would you recommend?

[ImprovedTube]

hi & thanks! @xiomaraR
Depends what category you like to try.

Mentioning a lot, since each can be broken down into sub-tasks. And just publishing a note/blog can be valuable:

• Documentation / Writing down thoughts beneficial to the public. Or specifically here: How-To's (If no sufficient answer about something is found/published, then (as a side-effect) one should already have written down the final question title and keywords or title to publish. So after figuring out, then answering oneself, right-away, without forgetting the process can make it efficient.)

• Code navigation / searching in the repo (not always easy, potentially annoying, but often just one thing at a time)

  • Bugs
  • Updates after youtube's changes (CSS selectors, etc. )
    • Example: we already have a 'Play all' button on channel pages, but it might not appear anymore? (current version). It would be nice to appear in more places too, where people like it. Or with a shortcut key.

• Development / engineering

  • Classic: functionality code. Feature requests. Might has labels like set&forget, unique or plan-ready Not required to integrate into the UI immediately nor alone). Example | 2
  • "Rich-"Data: Working with data might be more powerful, inspiring (once working with any JSON and queries at all)
    example:

    • • Skip to next key scene data-source: #1463

• Code integration (there is a lot of free code, that isn't popular yet #1881)

  • Continuous integration : how to automatically include their future fixes/updates, etc.?

  • • [Looper/Clip-selector] integrate our other extension?: https://github.com/victor-savinov/looper/

• UX:

  • might starts with thinking of the typical use-case (or the whole spectrum if possible once) (and watching usage statistics/analytics if possible/available)
    • Structure
    • Example: Currently we allow (at most) these buttons, without setting specific order or position (the right ones can be collapsed including Youtube's the left ones cant.).
      • Optionally this can be compared with how others do it: YouTube enhancer, Magic Actions for Youtube.
    • Example 2
    • Example 3
  • UI: Who wants to implement the UX advantages?

---

---

• Mirror (for dancing along or play alone guitar, drums,.... & some other thus other HowTo's/DIY/Cooking (exists)

• Assessing / Re-evaluating plans :
  • An example from the list of buttons above: Mirror
    • easy CSS implementation basically only: transform: scaleX(-1) !important; -webkit-transform: scaleX(-1) !important; ( compare: https://github.com/ktsn/mirror-tube/blob/ef7021141c23c389186c1e1b86d4a3b3eb0cb5b7/css/transform.css#L1-L4 & + adding / removing a css class: https://github.com/ktsn/mirror-tube/blob/ef7021141c23c389186c1e1b86d4a3b3eb0cb5b7/js/adapters/youtube-adapter.js#L34-L36 )
      • DONE! (at doubt google or check compatibility at https://caniuse.com for the latest situation)
    • An existing solution: https://chromewebstore.google.com/detail/mirrortube/pdebhiihcebhmcpmdncgfodomdnhbehj
      
      (advanced for dancing/playing along. Yet it doesnt disable mirroring when clicking a related video (only after a new page-load). And then it doesn't remember the setting for the current video, where it should stay.
      • So we could either make a better version of the whole, or else just a quicker 1 click solution? (or one shortcut key) (sometimes people will want to just read something actually appearing mirrored, like a riddle. But that must be rare.)
        • or we could chose a task that many more people will use, unless we enjoy this little one
          • So we could also zoom out. "Burden of choice". Looking for comments and volunteers too: https://github.com/code-charity/History-Manager; https://github.com/code-charity/Bulk-Contributor; https://github.com/code-charity/Wish-Factory; https://github.com/code-charity/crowd-fixes; https://github.com/code-charity/Manifest-v3.

[xiomaraR]

@ImprovedTube thanks for the summary/outline! I will give it all some more consideration as I get more comfortable with the codebase. For now, I'd like to try updating the mirror button. Is there a specific ticket?

[ImprovedTube]

Aand two more types of tasks:

• just repo managment: reviewing PRs. And if you want you can join us to set https://github.com/code-charity/youtube/labels, closing issues, etc.
• managing (old & new) code: example

[ImprovedTube]

hi! @xiomaraR, thanks and glad if it wasn't too much to read. Let's make this list of types of tasks a wiki page here?
We don't have a mirror button yet. (closed #80. Once added, we can checkbox it above.)

• You could start with a copy of the rotate button, adjusting the names & CSS-injection.
  • The function in player.js is the main thing; in our menu Mirror can be listed below Rotate (and you don't have to add it to all the language files, but only to /en/messages.json; while the first search result ("core.js") is only for this: "// REACTION OR VISUAL FEEDBACK WHEN THE USER CHANGES A SETTING (already automated for our CSS features)" ) as written above it)
  • So while wanted & minimal, it is ultimately a task AI should do. And for you personally it might only serve to get familiar with webExtensions & this repo (i saw you have a github history👍). And mirror isn't immediately a unique feature (existing solution with 30 000 users, forgot to link it at first). So, while i initially though of suggesting Mirror as a beginner-friendly example, it ended up as an example for this type of task instead ( Assessing / Re-evaluating plans)
    and i added this sub-task: ( above )

    • • remember per video or per selection, if a loop is or will be set too for this video. (compare: mirrortube )

      • Once we will have that too, it will be a unique product, improvement to all users.
        • aand this makes me remember to add: " - [ ] transpose. Compare: transpose pitch speed loop (700 000 users) (Once we add all three things, that would apparently make this extension the best youtube extension for musicians already.)
    • So that will be amazing but take 2 or more tasks, which is why it wasn't among the first 3 examples i mentioned:
      AFAIK pause while typing will be unique. And moving Subtitles/Captions below the player will be unique too. (remembered these through checking the labels: #unique, #set&forget, #plan-ready)
      • and we can search more specifically: is:open milestone:"Little or easy(?)" label:"🧩Plan ready" -label:"Rare use-case?"
        • so (surprise!) we find the frequent wish of a shortcut for the rotate button!, part of which you can copy paste in our shortcuts.js.
      • More over the following player button will be a novelty, since YouTube didn't always provide the headmap:

        • • Skip to next key scene data-source: Youtube's Timeline Histogram enables/improves a lot... #1463

        • So this 3rd example, seemed best to suggest, since this one could (optionally) directly inspire various Development / engineering-thoughts. And i and we can join the work /your PRs
          • While working with the JSON will require some more lines of code, but it is typical work. (Q&A/stackoverlow & AI/ chatgpt will help at need); (and it doesn't help to know this repo yet since we are lacking a data framework.

            youtube/js&css/web-accessible/www.youtube.com/player.js

            Line 137 in 9266d8d

            //DATA (TO-DO: make the Data available to more/all features? #1452 #1763 (Then can replace ImprovedTube.elements.category === 'music', VideoID is also used elsewhere)

            )

Thanks!