☰

YouTube Float Input Box for Playback Speed

Adds a float input box to adjust playback speed on YouTube after 2 seconds of user input

Author
Cigi
Daily installs
0
Total installs
8
Ratings
0 0 0
Version
2024-10-17
Created
2024-10-17
Updated
2024-10-17
License
MIT
Applies to

YouTube Float Input Box for Playback Speed

Purpose

This userscript is designed to enhance the YouTube user experience by adding a float input box near the like button, allowing users to adjust the video playback speed easily. It waits 2 seconds after user input to apply the playback speed change to avoid unintended rapid adjustments.

Script Metadata

  • @name: YouTube Float Input Box for Playback Speed
  • @namespace: http://tampermonkey.net/
  • @version: 2024-10-17
  • @description: Adds a float input box to adjust playback speed on YouTube after 2 seconds of user input.
  • @icon: Uses an icon from Icons8 for the script.
  • @match: Targets all pages on YouTube (https://www.youtube.com/*).

Key Features

  1. Default Playback Speed: Sets the default playback speed to 1.064 when the page loads.
  2. Float Input Box: Adds a user-friendly float input box to the YouTube interface that allows input values ranging from 0.1 to 2 in steps of 0.1.
  3. Visual Styles: Uses CSS styles to make the input box blend into the YouTube interface with a clean, modern design.
  4. Validation: Ensures that the input value remains within the range of 0.1 to 2.
  5. Playback Speed Adjustment: Applies the new playback speed to the video with a delay of 2 seconds after the user's last input.
  6. Mutation Observer: Uses a MutationObserver to ensure the float input box is added dynamically, even when navigating between different videos on YouTube.

Detailed Description of the Code Components

1. Initialization and Default Speed Setting

let playbackTimer;
const defaultSpeed = 1.064;
  • playbackTimer: A variable to manage the delay timer for setting the playback speed.
  • defaultSpeed: The initial playback speed value, set to 1.064.

2. Adding the Float Input Box

function addFloatInputBox() {
    const likeButtonContainer = document.querySelector('#top-level-buttons-computed');
    // Logic for creating and styling the input box
}
  • Element Targeting: The script checks if the likeButtonContainer exists. This container is where the float input box will be inserted.
  • Element Creation: An input element is created with type number, step size 0.1, and a default value of 1.064.
  • Styling: The input box is styled to match the YouTube interface, with features like border-radius, padding, and transition effects to enhance the user experience.
  • Input Validation: Validates that the playback speed entered by the user is between 0.1 and 2, adjusting the value if it falls outside this range.

3. Event Listeners

  • Focus and Blur Events: Enhances user interaction by changing the border and shadow of the input box when focused or blurred.
  • Input Event: Triggers a 2-second delay before applying the playback speed to the video. This helps prevent excessive or unintended speed adjustments if the user is still typing.

4. Applying Playback Speed to the Video

const video = document.querySelector('video');
if (video) {
    video.playbackRate = defaultSpeed;
}
  • Checks if a video element is present on the page and sets its playback speed to the default value of 1.064 when the page loads.

5. Mutation Observer

const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
        addFloatInputBox();
    });
});
observer.observe(document.body, { childList: true, subtree: true });
  • The MutationObserver ensures that the float input box is added automatically when navigating between different videos on YouTube.
  • It monitors changes in the DOM, and if the relevant elements are modified, it reinserts the input box to the correct location.

6. Immediate Call to addFloatInputBox

addFloatInputBox();
  • Calls the function immediately to add the float input box when the script first runs.

User Experience Enhancements

  • Delayed Speed Update: The 2-second delay after user input prevents accidental or frequent speed changes, giving users a smoother experience.
  • Visual Feedback: The input box provides visual cues on focus and blur, making it more intuitive and interactive.
  • Responsive Placement: Ensures the input box remains in place even when YouTube dynamically loads new content.

Possible Improvements

  • Customization Options: Allow users to set their preferred maximum and minimum speed limits.
  • Storage of Settings: Save the last used playback speed in local storage so it persists across page reloads.
  • Dark Mode Support: Adjust the input box styling to blend better with YouTube's dark mode.

This script significantly improves the way users interact with YouTube's playback speed settings, offering a more intuitive and responsive control directly within the video player interface.