YouTube: iCal Calendar Export for Livestreams and Premieres

Adds a "Export to iCal" button to to YouTube Livestreams and Premieres which creates Calendar-compatible .ics files.
安裝腳本 ?
換行
// ==UserScript==
// @name            YouTube: iCal Calendar Export for Livestreams and Premieres
// @namespace       org.sidneys.userscripts
// @homepage        https://gist.githubusercontent.com/sidneys/293fe8e9c3afdf50fe1db5be9346ac5a/raw/
// @version         0.7.4
// @description     Adds a "Export to iCal" button to to YouTube Livestreams and Premieres which creates Calendar-compatible .ics files.
// @author          sidneys
// @icon            https://www.youtube.com/favicon.ico
// @noframes
// @match           http*://www.youtube.com/*
// @require         https://greasyfork.org/scripts/38888-greasemonkey-color-log/code/Greasemonkey%20%7C%20Color%20Log.js
// @require         https://greasyfork.org/scripts/374849-library-onelementready-es7/code/Library%20%7C%20onElementReady%20ES7.js
// @require         https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js
// @require         https://cdn.jsdelivr.net/npm/[email protected]/src/FileSaver.js
// @require         https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/uuidv4.min.js
// @require         https://gitcdn.link/cdn/jamesbrond/ics.js/0b27e3cca5670758b63e880de9e49207d1f12290/ics.js
// @run-at          document-start
// @grant           unsafeWindow
// ==/UserScript==


/**
 * ESLint
 * @global
 */
/* global Debug, onElementReady, uuidv4, ics */
Debug = false


/**
 * API Credentials
 * @default
 * @constant
 */
const apiKey = 'AIzaSyAxkkQLcQcshBDog7ev3jvjZmsjdDycgsQ'

/**
 * API URL
 * @constant
 */
const apiBaseUrl = 'https://youtube.googleapis.com/youtube/v3'
const apiEndpoint = '/videos'
const apiBaseQuery = `part=snippet,liveStreamingDetails&key=${apiKey}`


/**
 * Applicable URL paths
 * @default
 * @constant
 */
const urlPathList = [
    '/channel',
    '/watch'
]

/**
 * Local Filename of iCalendar entry
 * @constant
 */
const fileNameBase = 'youtube-calendar-event-'
const fileExtension = 'ics'


/**
 * Create iCal Calendar Event
 * @param {String} subject - Subject/Title
 * @param {String} description - Description
 * @param {String} location - Location
 * @param {String} begin - Beginning date
 * @param {String} end - Ending date
 * @param {Object=} rrule - Recurrence rule
 * @param {String=} filename - Local iCalendar File Name
 * @param {String=} extension - Local iCalendar File Extension
 */
let createCalendarEvent = (subject, description, location, begin, end, filename, extension = fileExtension) => {
    console.debug('createCalendarEvent')

    // Create iCal entry
    const icalEntry = new ics(uuidv4(), 'Calendar')

    // Add calendar event
    // icalEntry.addEvent(subject, description, location, begin, end, rrule, url)
    icalEntry.addEvent(subject, description, location, false, begin, end)

    // DEBUG
    console.debug('New iCalendar entry:')
    console.debug('filename:', filename)
    console.debug('extension:', extension)
    console.debug('subject:', subject)
    console.debug('location:', location)
    console.debug('begin:', (new Date(begin)).toString())
    console.debug('end:', (new Date(end)).toString())
    console.debug('description:', `${description.substring(0, 50)}…`)

    // Download .ics file
    icalEntry.download(filename, extension)
}


/**
 * On Button Click
 */
let onClickButton = () => {
    console.debug('onClickButton')

    // Lookup YouTube video Id
    const videoId = document.querySelector('ytd-watch-flexy').getAttribute('video-id')

    // Construct API URL for request
    const apiUrl = `${apiBaseUrl}${apiEndpoint}?${apiBaseQuery}&id=${videoId}`

    // DEBUG
    console.debug('videoId', videoId)
    console.debug('apiUrl', apiUrl)

    fetch(apiUrl)
        .then(res => res.json())
        .then(data => {
            console.debug('data', data)
            const json = data
            const snippet = json?.items[0].snippet
            const liveStreamingDetails = json?.items[0].liveStreamingDetails

            if (!snippet) {
                console.error('API Error', 'Video:', 'snippet not found.')
                return
            }

            if (!liveStreamingDetails) {
                console.error('API Error', 'Video:', 'liveStreamingDetails not found.')
                return
            }

            // Calculate start & end time
            const startTimestamp = liveStreamingDetails.actualStartTime || liveStreamingDetails.scheduledStartTime
            const startDate = new Date(startTimestamp)
            const defaultEndDate = new Date(startDate.setSeconds(startDate.getSeconds() + 1800))
            const defaultEndTimestamp = defaultEndDate.toISOString()
            const endTimestamp = liveStreamingDetails.actualEndTime || defaultEndTimestamp

            // Format metadata
            const subject = snippet.title.trim()
            const description = snippet.description.trim()
            const location = snippet.channelTitle.trim()
            const begin = startTimestamp
            const end = endTimestamp

            // Add custom metadata
            const url = `https://youtu.be/${videoId}`
            const urlAndDescription = `Link:\n${url}\n\n${description}`
            const filename = `${fileNameBase}${videoId}`

            // Create calendar event
            // createCalendarEvent(subject, description, location, begin, end, null, url, filename)
            createCalendarEvent(subject, urlAndDescription, location, begin, end, filename)
        })
}

/**
 * Render Button 'Add to Playlist'
 * @param {Element} element - Target Element
 */
let renderButton = (element) => {
    console.debug('renderButton')

    // Create button element
    const buttonElement = document.createElement('div')
    buttonElement.innerHTML =
    `
    <button class="ytp-offline-slate-button ytp-button">
        <div class="ytp-offline-slate-button-icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#fff"><path d="M0 0h24v24H0z" fill="none"/>
                <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/>
            </svg>
        </div>
        <div class="ytp-offline-slate-button-text">Export to iCal Calendar (.ics)</div>
    </button>
    `

    // Add button element
    element.after(buttonElement)

    // Handle button click
    buttonElement.onclick = onClickButton

    // Status
    console.debug('rendered button')
}


/**
 * Init
 */
let init = () => {
    console.info('init')

    // Verify URL path
    if (!urlPathList.some(urlPath => window.location.pathname.startsWith(urlPath))) { return }

    // Wair for container
    onElementReady('.ytp-offline-slate-buttons', false, (element) => {
        // Render button
        renderButton(element)
    })
}


/**
 * Handle in-page navigation (modern YouTube)
 * @listens window:Event#yt-navigate-finish
 */
window.addEventListener('yt-navigate-finish', () => {
    console.debug('window#yt-navigate-finish')

    init()
})