YouTube downloader

A simple userscript to download YouTube videos in MAX QUALITY
目前為 2024-06-11 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name            YouTube downloader
// @icon            https://raw.githubusercontent.com/madkarmaa/youtube-downloader/main/images/icon.png
// @namespace       aGkgdGhlcmUgOik=
// @source          https://github.com/madkarmaa/youtube-downloader
// @supportURL      https://github.com/madkarmaa/youtube-downloader
// @version         3.0.0
// @description     A simple userscript to download YouTube videos in MAX QUALITY
// @author          mk_
// @match           *://*.youtube.com/*
// @connect         co.wuk.sh
// @connect         raw.githubusercontent.com
// @grant           GM_info
// @grant           GM_addStyle
// @grant           GM_xmlHttpRequest
// @grant           GM_xmlhttpRequest
// @run-at          document-start
// ==/UserScript==
 
(async () => {
    ('use strict');
 
    // abort if not on youtube or youtube music
    if (!detectYoutubeService()) {
        console.log('\x1b[31m[YTDL]\x1b[0m Invalid YouTube service, aborting...');
        return;
    }
 
    // ===== VARIABLES =====
    let DEV_MODE = String(localStorage.getItem('ytdl-dev-mode')).toLowerCase() === 'true';
    let SHOW_NOTIFICATIONS =
        localStorage.getItem('ytdl-notif-enabled') === null
            ? true
            : String(localStorage.getItem('ytdl-notif-enabled')).toLowerCase() === 'true';
 
    let oldILog = console.log;
    let oldWLog = console.warn;
    let oldELog = console.error;
 
    let VIDEO_DATA = {
        video_duration: null,
        video_url: null,
        video_author: null,
        video_title: null,
        video_id: null,
    };
 
    let videoDataReady = false;
    // ===== END VARIABLES =====
 
    // ===== METHODS =====
    function logger(level, ...args) {
        if (!DEV_MODE) return;
 
        if (level.toLowerCase() === 'info') oldILog.apply(console, ['%c[YTDL]', 'color: #f00;', ...args]);
        else if (level.toLowerCase() === 'warn') oldWLog.apply(console, ['%c[YTDL]', 'color: #f00;', ...args]);
        else if (level.toLowerCase() === 'error') oldELog.apply(console, ['%c[YTDL]', 'color: #f00;', ...args]);
    }
 
    function Cobalt(videoUrl, audioOnly = false) {
        // Use Promise because GM.xmlHttpRequest behaves differently with different userscript managers
        return new Promise((resolve, reject) => {
            // https://github.com/wukko/cobalt/blob/current/docs/api.md
            GM_xmlhttpRequest({
                method: 'POST',
                url: 'https://co.wuk.sh/api/json',
                headers: {
                    'Cache-Control': 'no-cache',
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                data: JSON.stringify({
                    url: encodeURI(videoUrl), // video url
                    vQuality: 'max', // always max quality
                    filenamePattern: 'basic', // file name = video title
                    isAudioOnly: audioOnly,
                    disableMetadata: true, // privacy
                }),
                onload: (response) => {
                    const data = JSON.parse(response.responseText);
                    if (data?.url) resolve(data.url);
                    else reject(data);
                },
                onerror: (err) => reject(err),
            });
        });
    }
 
    // https://stackoverflow.com/a/61511955
    function waitForElement(selector) {
        return new Promise((resolve) => {
            if (document.querySelector(selector)) return resolve(document.querySelector(selector));
 
            const observer = new MutationObserver(() => {
                if (document.querySelector(selector)) {
                    observer.disconnect();
                    resolve(document.querySelector(selector));
                }
            });
 
            observer.observe(document.body, { childList: true, subtree: true });
        });
    }
 
    function fetchNotifications() {
        // Use Promise because GM.xmlHttpRequest behaves differently with different userscript managers
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url: 'https://raw.githubusercontent.com/madkarmaa/youtube-downloader/main/notifications.json',
                headers: {
                    'Cache-Control': 'no-cache',
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                onload: (response) => {
                    const data = JSON.parse(response.responseText);
                    if (data?.length) resolve(data);
                    else reject(data);
                },
                onerror: (err) => reject(err),
            });
        });
    }
 
    class Notification {
        constructor(title, body, uuid, storeUUID = true) {
            const notification = document.createElement('div');
            notification.classList.add('ytdl-notification', 'opened', uuid);
 
            hideOnAnimationEnd(notification, 'closeNotif', true);
 
            const nTitle = document.createElement('h2');
            nTitle.textContent = title;
            notification.appendChild(nTitle);
 
            const nBody = document.createElement('div');
            body.split('\n').forEach((text) => {
                const paragraph = document.createElement('p');
                paragraph.textContent = text;
                nBody.appendChild(paragraph);
            });
            notification.appendChild(nBody);
 
            const nDismissButton = document.createElement('button');
            nDismissButton.textContent = 'Dismiss';
            nDismissButton.addEventListener('click', () => {
                if (storeUUID) {
                    const localNotificationsHashes = JSON.parse(localStorage.getItem('ytdl-notifications') ?? '[]');
                    localNotificationsHashes.push(uuid);
                    localStorage.setItem('ytdl-notifications', JSON.stringify(localNotificationsHashes));
                    logger('info', `Notification ${uuid} set as read`);
                }
 
                notification.classList.remove('opened');
                notification.classList.add('closed');
            });
            notification.appendChild(nDismissButton);
 
            document.body.appendChild(notification);
            logger('info', 'New notification displayed', notification);
        }
    }
 
    async function manageNotifications() {
        if (!SHOW_NOTIFICATIONS) {
            logger('info', 'Notifications disabled by the user');
            return;
        }
 
        const localNotificationsHashes = JSON.parse(localStorage.getItem('ytdl-notifications')) ?? [];
        logger('info', 'Local read notifications hashes\n\n', localNotificationsHashes);
 
        const onlineNotifications = await fetchNotifications();
        logger(
            'info',
            'Online notifications hashes\n\n',
            onlineNotifications.map((n) => n.uuid)
        );
 
        const unreadNotifications = onlineNotifications.filter((n) => !localNotificationsHashes.includes(n.uuid));
        logger(
            'info',
            'Unread notifications hashes\n\n',
            unreadNotifications.map((n) => n.uuid)
        );
 
        unreadNotifications.reverse().forEach((n) => {
            new Notification(n.title, n.body, n.uuid);
        });
    }
 
    async function updateVideoData(e) {
        videoDataReady = false;
 
        const temp_video_data = e.detail?.getVideoData();
        VIDEO_DATA.video_duration = e.detail?.getDuration();
        VIDEO_DATA.video_url = e.detail?.getVideoUrl();
        VIDEO_DATA.video_author = temp_video_data?.author;
        VIDEO_DATA.video_title = temp_video_data?.title;
        VIDEO_DATA.video_id = temp_video_data?.video_id;
 
        videoDataReady = true;
        logger('info', 'Video data updated\n\n', VIDEO_DATA);
    }
 
    async function hookPlayerEvent(...fns) {
        document.addEventListener('yt-player-updated', (e) => {
            for (let i = 0; i < fns.length; i++) fns[i](e);
        });
        logger(
            'info',
            'Video player event hooked. Callbacks:\n\n',
            fns.map((f) => f.name)
        );
    }
 
    async function hookNavigationEvents(...fns) {
        ['yt-navigate', 'yt-navigate-finish', 'yt-navigate-finish', 'yt-page-data-updated'].forEach((evName) => {
            document.addEventListener(evName, (e) => {
                for (let i = 0; i < fns.length; i++) fns[i](e);
            });
        });
        logger(
            'info',
            'Navigation events hooked. Callbacks:\n\n',
            fns.map((f) => f.name)
        );
    }
 
    function hideOnAnimationEnd(target, animationName, alsoRemove = false) {
        target.addEventListener('animationend', (e) => {
            if (e.animationName === animationName) {
                if (alsoRemove) e.target.remove();
                else e.target.style.display = 'none';
            }
        });
    }
 
    async function appendSideMenu() {
        const sideMenu = document.createElement('div');
        sideMenu.id = 'ytdl-sideMenu';
        sideMenu.classList.add('closed');
        sideMenu.style.display = 'none';
 
        hideOnAnimationEnd(sideMenu, 'closeMenu');
 
        const sideMenuHeader = document.createElement('h2');
        sideMenuHeader.textContent = 'Youtube downloader settings';
        sideMenuHeader.classList.add('header');
        sideMenu.appendChild(sideMenuHeader);
 
        // ===== templates, don't use, just clone the node =====
        const sideMenuSettingContainer = document.createElement('div');
        sideMenuSettingContainer.classList.add('setting-row');
        const sideMenuSettingLabel = document.createElement('h3');
        sideMenuSettingLabel.classList.add('setting-label');
        const sideMenuSettingDescription = document.createElement('p');
        sideMenuSettingDescription.classList.add('setting-description');
        sideMenuSettingContainer.append(sideMenuSettingLabel, sideMenuSettingDescription);
 
        const switchContainer = document.createElement('span');
        switchContainer.classList.add('ytdl-switch');
        const switchCheckbox = document.createElement('input');
        switchCheckbox.type = 'checkbox';
        const switchLabel = document.createElement('label');
        switchContainer.append(switchCheckbox, switchLabel);
        // ===== end templates =====
 
        const notifContainer = sideMenuSettingContainer.cloneNode(true);
        notifContainer.querySelector('.setting-label').textContent = 'Notifications';
        notifContainer.querySelector('.setting-description').textContent =
            "Disable if you don't want to receive notifications from the developer.";
        const notifSwitch = switchContainer.cloneNode(true);
        notifSwitch.querySelector('input').checked = SHOW_NOTIFICATIONS;
        notifSwitch.querySelector('input').id = 'ytdl-notif-switch';
        notifSwitch.querySelector('label').setAttribute('for', 'ytdl-notif-switch');
        notifSwitch.querySelector('input').addEventListener('change', (e) => {
            SHOW_NOTIFICATIONS = e.target.checked;
            localStorage.setItem('ytdl-notif-enabled', SHOW_NOTIFICATIONS);
            logger('info', `Notifications ${SHOW_NOTIFICATIONS ? 'enabled' : 'disabled'}`);
        });
        notifContainer.appendChild(notifSwitch);
        sideMenu.appendChild(notifContainer);
 
        const devModeContainer = sideMenuSettingContainer.cloneNode(true);
        devModeContainer.querySelector('.setting-label').textContent = 'Developer mode';
        devModeContainer.querySelector('.setting-description').textContent =
            "Show a detailed output of what's happening under the hood in the console.";
        const devModeSwitch = switchContainer.cloneNode(true);
        devModeSwitch.querySelector('input').checked = DEV_MODE;
        devModeSwitch.querySelector('input').id = 'ytdl-dev-mode-switch';
        devModeSwitch.querySelector('label').setAttribute('for', 'ytdl-dev-mode-switch');
        devModeSwitch.querySelector('input').addEventListener('change', (e) => {
            DEV_MODE = e.target.checked;
            localStorage.setItem('ytdl-dev-mode', DEV_MODE);
            // always use console.log here to show output
            console.log(`\x1b[31m[YTDL]\x1b[0m Developer mode ${DEV_MODE ? 'enabled' : 'disabled'}`);
        });
        devModeContainer.appendChild(devModeSwitch);
        sideMenu.appendChild(devModeContainer);
 
        document.addEventListener('mousedown', (e) => {
            if (sideMenu.style.display !== 'none' && !sideMenu.contains(e.target)) {
                sideMenu.classList.remove('opened');
                sideMenu.classList.add('closed');
 
                logger('info', 'Side menu closed');
            }
        });
 
        document.addEventListener('keydown', (e) => {
            if (e.key !== 'p') return;
 
            if (sideMenu.style.display === 'none') {
                sideMenu.style.top = window.scrollY + 'px';
                sideMenu.style.display = 'flex';
                sideMenu.classList.remove('closed');
                sideMenu.classList.add('opened');
 
                logger('info', 'Side menu opened');
            } else {
                sideMenu.classList.remove('opened');
                sideMenu.classList.add('closed');
 
                logger('info', 'Side menu closed');
            }
        });
 
        window.addEventListener('scroll', () => {
            if (sideMenu.classList.contains('closed')) return;
 
            sideMenu.classList.remove('opened');
            sideMenu.classList.add('closed');
 
            logger('info', 'Side menu closed');
        });
 
        document.body.appendChild(sideMenu);
        logger('info', 'Side menu created\n\n', sideMenu);
    }
 
    function detectYoutubeService() {
        if (window.location.hostname === 'www.youtube.com' && window.location.pathname.startsWith('/shorts'))
            return 'SHORTS';
        if (window.location.hostname === 'www.youtube.com' && window.location.pathname.startsWith('/watch'))
            return 'WATCH';
        else if (window.location.hostname === 'music.youtube.com') return 'MUSIC';
        else if (window.location.hostname === 'www.youtube.com') return 'YOUTUBE';
        else return null;
    }
 
    function elementInContainer(container, element) {
        return container.contains(element);
    }
 
    async function leftClick() {
        const isYtMusic = detectYoutubeService() === 'MUSIC';
 
        if (!isYtMusic && !videoDataReady) {
            logger('warn', 'Video data not ready');
            new Notification('Wait!', 'The video data is not ready yet, try again in a few seconds.', 'popup', false);
            return;
        } else if (isYtMusic && !window.location.pathname.startsWith('/watch')) {
            logger('warn', 'Video URL not avaiable');
            new Notification(
                'Wait!',
                'Open the music player so the song link is visible, then try again.',
                'popup',
                false
            );
            return;
        }
 
        try {
            logger('info', 'Download started');
            window.open(
                await Cobalt(
                    isYtMusic
                        ? window.location.href.replace('music.youtube.com', 'www.youtube.com')
                        : VIDEO_DATA.video_url
                ),
                '_blank'
            );
            logger('info', 'Download completed');
        } catch (err) {
            logger('error', JSON.parse(JSON.stringify(err)));
        }
    }
 
    async function rightClick(e) {
        const isYtMusic = detectYoutubeService() === 'MUSIC';
 
        e.preventDefault();
 
        if (!isYtMusic && !videoDataReady) {
            logger('warn', 'Video data not ready');
            new Notification('Wait!', 'The video data is not ready yet, try again in a few seconds.', 'popup', false);
            return false;
        } else if (isYtMusic && !window.location.pathname.startsWith('/watch')) {
            logger('warn', 'Video URL not avaiable');
            new Notification(
                'Wait!',
                'Open the music player so the song link is visible, then try again.',
                'popup',
                false
            );
            return;
        }
 
        try {
            logger('info', 'Download started');
            window.open(
                await Cobalt(
                    isYtMusic
                        ? window.location.href.replace('music.youtube.com', 'www.youtube.com')
                        : VIDEO_DATA.video_url,
                    true
                ),
                '_blank'
            );
            logger('info', 'Download completed');
        } catch (err) {
            logger('error', JSON.parse(JSON.stringify(err)));
        }
 
        return false;
    }
 
    // https://www.30secondsofcode.org/js/s/element-is-visible-in-viewport/
    function elementIsVisibleInViewport(el, partiallyVisible = false) {
        const { top, left, bottom, right } = el.getBoundingClientRect();
        const { innerHeight, innerWidth } = window;
        return partiallyVisible
            ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
                  ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
            : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
    }
 
    async function appendDownloadButton(e) {
        const ytContainerSelector =
            '#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-right-controls';
        const ytmContainerSelector =
            '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > div.middle-controls-buttons.style-scope.ytmusic-player-bar';
        const ytsContainerSelector = '#actions.style-scope.ytd-reel-player-overlay-renderer';
 
        // ===== templates, don't use, just clone the node =====
        const downloadIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        downloadIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        downloadIcon.setAttribute('fill', 'currentColor');
        downloadIcon.setAttribute('height', '24');
        downloadIcon.setAttribute('viewBox', '0 0 24 24');
        downloadIcon.setAttribute('width', '24');
        downloadIcon.setAttribute('focusable', 'false');
        downloadIcon.style.pointerEvents = 'none';
        downloadIcon.style.display = 'block';
        downloadIcon.style.width = '100%';
        downloadIcon.style.height = '100%';
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', 'M17 18v1H6v-1h11zm-.5-6.6-.7-.7-3.8 3.7V4h-1v10.4l-3.8-3.8-.7.7 5 5 5-4.9z');
        downloadIcon.appendChild(path);
 
        const downloadButton = document.createElement('button');
        downloadButton.id = 'ytdl-download-button';
        downloadButton.classList.add('ytp-button');
        downloadButton.title = 'Left click to download as video, right click as audio only';
        downloadButton.appendChild(downloadIcon);
        // ===== end templates =====
 
        switch (detectYoutubeService()) {
            case 'WATCH':
                const ytCont = await waitForElement(ytContainerSelector);
                logger('info', 'Download button container found\n\n', ytCont);
 
                if (elementInContainer(ytCont, ytCont.querySelector('#ytdl-download-button'))) {
                    logger('warn', 'Download button already in container');
                    break;
                }
 
                const ytDlBtnClone = downloadButton.cloneNode(true);
                ytDlBtnClone.classList.add('YT');
                ytDlBtnClone.addEventListener('click', leftClick);
                ytDlBtnClone.addEventListener('contextmenu', rightClick);
                logger('info', 'Download button created\n\n', ytDlBtnClone);
 
                ytCont.insertBefore(ytDlBtnClone, ytCont.firstChild);
                logger('info', 'Download button inserted in container');
 
                break;
 
            case 'MUSIC':
                const ytmCont = await waitForElement(ytmContainerSelector);
                logger('info', 'Download button container found\n\n', ytmCont);
 
                if (elementInContainer(ytmCont, ytmCont.querySelector('#ytdl-download-button'))) {
                    logger('warn', 'Download button already in container');
                    break;
                }
 
                const ytmDlBtnClone = downloadButton.cloneNode(true);
                ytmDlBtnClone.classList.add('YTM');
                ytmDlBtnClone.addEventListener('click', leftClick);
                ytmDlBtnClone.addEventListener('contextmenu', rightClick);
                logger('info', 'Download button created\n\n', ytmDlBtnClone);
 
                ytmCont.insertBefore(ytmDlBtnClone, ytmCont.firstChild);
                logger('info', 'Download button inserted in container');
 
                break;
 
            case 'SHORTS':
                if (e.type !== 'yt-navigate-finish') return;
 
                await waitForElement(ytsContainerSelector); // wait for the UI to finish loading
 
                const visibleYtsConts = Array.from(document.querySelectorAll(ytsContainerSelector)).filter((el) =>
                    elementIsVisibleInViewport(el)
                );
                logger('info', 'Download button containers found\n\n', visibleYtsConts);
 
                visibleYtsConts.forEach((ytsCont) => {
                    if (elementInContainer(ytsCont, ytsCont.querySelector('#ytdl-download-button'))) {
                        logger('warn', 'Download button already in container');
                        return;
                    }
 
                    const ytsDlBtnClone = downloadButton.cloneNode(true);
                    ytsDlBtnClone.classList.add(
                        'YTS',
                        'yt-spec-button-shape-next',
                        'yt-spec-button-shape-next--tonal',
                        'yt-spec-button-shape-next--mono',
                        'yt-spec-button-shape-next--size-l',
                        'yt-spec-button-shape-next--icon-button'
                    );
                    ytsDlBtnClone.addEventListener('click', leftClick);
                    ytsDlBtnClone.addEventListener('contextmenu', rightClick);
                    logger('info', 'Download button created\n\n', ytsDlBtnClone);
 
                    ytsCont.insertBefore(ytsDlBtnClone, ytsCont.firstChild);
                    logger('info', 'Download button inserted in container');
                });
 
                break;
 
            default:
                return;
        }
    }
 
    async function devStuff() {
        if (!DEV_MODE) return;
 
        logger('info', 'Current service is: ' + detectYoutubeService());
    }
    // ===== END METHODS =====
 
    GM_addStyle(`
#ytdl-sideMenu {
    min-height: 100vh;
    z-index: 9998;
    position: absolute;
    top: 0;
    left: -100vw;
    width: 50vw;
    background-color: var(--yt-spec-base-background);
    border-right: 2px solid var(--yt-spec-static-grey);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 2.5rem;
    font-family: "Roboto", "Arial", sans-serif;
}
 
#ytdl-sideMenu.opened {
    animation: openMenu .3s linear forwards;
}
 
#ytdl-sideMenu.closed {
    animation: closeMenu .3s linear forwards;
}
 
#ytdl-sideMenu .header {
    text-align: center;
    font-size: 2.5rem;
    color: var(--yt-brand-youtube-red);
}
 
#ytdl-sideMenu .setting-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 
#ytdl-sideMenu .setting-label {
    font-size: 1.8rem;
    color: var(--yt-brand-youtube-red);
}
 
#ytdl-sideMenu .setting-description {
    font-size: 1.4rem;
    color: var(--yt-spec-text-primary);
}
 
.ytdl-switch {
  display: inline-block;
}
 
.ytdl-switch input {
  display: none;
}
 
.ytdl-switch label {
  display: block;
  width: 50px;
  height: 19.5px;
  padding: 3px;
  border-radius: 15px;
  border: 2px solid var(--yt-spec-inverted-background);
  cursor: pointer;
  transition: 0.3s;
}
 
.ytdl-switch label::after {
  content: "";
  display: inherit;
  width: 20px;
  height: 20px;
  border-radius: 12px;
  background: var(--yt-spec-inverted-background);
  transition: 0.3s;
}
 
.ytdl-switch input:checked ~ label {
  border-color: var(--yt-spec-themed-green);
}
 
.ytdl-switch input:checked ~ label::after {
  translate: 30px 0;
  background: var(--yt-spec-themed-green);
}
 
.ytdl-switch input:disabled ~ label {
  opacity: 0.5;
  cursor: not-allowed;
}
 
.ytdl-notification {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    background-color: var(--yt-spec-base-background);
    border: 2px solid var(--yt-spec-static-grey);
    border-radius: 8px;
    color: var(--yt-spec-text-primary);
    z-index: 9999;
    padding: 1.5rem 1.6rem;
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 1.4rem;
    width: fit-content;
    height: fit-content;
    max-width: 40vw;
    max-height: 50vh;
    word-wrap: break-word;
    line-height: var(--yt-caption-line-height);
}
 
.ytdl-notification.opened {
    animation: openNotif .3s linear forwards;
}
 
.ytdl-notification.closed {
    animation: closeNotif .3s linear forwards;
}
 
.ytdl-notification h2 {
    color: var(--yt-brand-youtube-red);
}
 
.ytdl-notification > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
 
.ytdl-notification > button {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 2px solid var(--yt-spec-static-grey);
    border-radius: 8px;
    background-color: var(--yt-brand-medium-red);
    padding: 0.7rem 0.8rem;
    color: #fff;
    font-weight: 600;
}
 
.ytdl-notification button:hover {
    background-color: var(--yt-spec-red-70);
}
 
#ytdl-download-button {
    background: none;
    border: none;
    outline: none;
    color: var(--yt-spec-text-primary);
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
 
#ytdl-download-button:hover {
    color: var(--yt-brand-youtube-red);
}
 
#ytdl-download-button.YTM {
    transform: scale(1.5);
    margin: 0 1rem;
}
 
#ytdl-download-button > svg {
    transform: translateX(5%);
}
 
@keyframes openMenu {
    0% {
        left: -100vw;
    }
 
    100% {
        left: 0;
    }
}
 
@keyframes closeMenu {
    0% {
        left: 0;
    }
 
    100% {
        left: -100vw;
    }
}
 
@keyframes openNotif {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@keyframes closeNotif {
    0% {
        opacity: 1;
    }
 
    100% {
        opacity: 0;
    }
}
`);
    logger('info', 'Custom styles added');
 
    hookPlayerEvent(updateVideoData);
    hookNavigationEvents(appendDownloadButton, devStuff);
 
    // functions that require the DOM to exist
    window.addEventListener('DOMContentLoaded', () => {
        appendSideMenu();
        appendDownloadButton();
        manageNotifications();
    });
})();