☰

Garmin Connect: Upload Audio Notes to Workout

Adds audio upload buttons to workout page in Garmin Connect

// ==UserScript==
// @name         Garmin Connect: Upload Audio Notes to Workout
// @namespace    http://tampermonkey.net/
// @description  Adds audio upload buttons to workout page in Garmin Connect
// @author       flowstate
// @match        https://connect.garmin.com/modern/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=garmin.com
// @grant        window.onurlchange
// @license      MIT
// @version      1.12.1
// ==/UserScript==

(function () {
    'use strict';

    // https://connect.garmin.com/modern/workout/WORKOUTID

    // Garmin API:

    const workoutEndpoint = 'https://connect.garmin.com/workout-service/workout';
    const audioNoteUploadEndpoint = 'https://connect.garmin.com/workout-service/workout/audionote/upload';

    // get workout id as a string. it's actually an integer but that doesn't
    // matter since we're only using it in urls
    function getWorkoutId() {
        const id = location.pathname.split('/').pop() 
        if (/^\d+$/.test(id)) {
            return id;
        }
        throw new Error("could not determine workout ID");
    }

    async function apiGetCurrentWorkout() {
        const url = `${workoutEndpoint}/${getWorkoutId()}?includeAudioNotes=true&_=${Date.now()}`;
        return fetchRequest('fetch workout data', url);
    }

    function apiPutCurrentWorkout(workoutData) {
        const url = `${workoutEndpoint}/${getWorkoutId()}`;
        const payload = JSON.stringify(workoutData);
        return fetchRequest('update workout', url, 'PUT', payload, true);
    }

    async function apiPostAudioNote(formData) {
        return fetchRequest('upload audio note', audioNoteUploadEndpoint, 'POST', formData, false,
            (response, defaultMsg) => {
                let msg = defaultMsg;
                if (response.status === 500) {
                    msg += ".\n\nTry again with a valid audio file that's supported by Garmin (e.g. MP3)"
                }
                throw new Error(msg);
            }
        )
    }

    async function apiDeleteAudioNote(uuid) {
        const url = `https://connect.garmin.com/workout-service/workout/audionote?audiouuid=${uuid}`;
        return fetchRequest('delete audio note', url, 'DELETE');
    }

    // ====================================================

    const sendButtonSelector = 'span a.send-to-device';
    const sendButtonAlternativeSelector = '#headerBtnRightState-readonly button';
    const editButtonId = 'headerLeftBtn';

    let addButton;
    let oldAddButton;
    let alreadyHere = false

    let tasks = [];

    const workoutConfirmMsg = 'Workout audio note already exists. Do you want to replace it?';
    const stepConfirmMsg = 'Step audio note already exists. Do you want to replace it?'
    
    oneTimeInit();
    
    function oneTimeInit() {
        initStyles();
        waitForUrl();
    }

    function waitForUrl() {
        // if (window.onurlchange == null) {
            // feature is supported
            window.addEventListener('urlchange', onUrlChange);
        // }
        onUrlChange();
    }

    function onUrlChange() {
        const urlMatches = window.location.href.startsWith('https://connect.garmin.com/modern/workout/');
        if (!alreadyHere) {
            if (urlMatches) {
                alreadyHere = true;
                init();
            }
        } else {
            if (!urlMatches) {
                alreadyHere = false;
                deinit();
            }        
        }
    }

    function init() {
        tasks = [];
        tasks.push(waitForElement(`${sendButtonSelector}, ${sendButtonAlternativeSelector}`, addUploadButtons));
    }

    function deinit() {
        hideSpinner();
        tasks.forEach(task => task.stop());
        tasks = [];
    }

    function waitForElement(readySelector, callback) {
        let timer = undefined;

        const tryNow = function () {
            const elem = document.querySelector(readySelector);
            if (elem) {
                addButton = document.querySelectorAll(sendButtonSelector);
                oldAddButton = document.querySelectorAll(sendButtonAlternativeSelector);
                callback(elem);
            } else {
                timer = setTimeout(tryNow, 300);
            }
        };

        const stop = function () {
            clearTimeout(timer);
            timer = undefined;
        }

        tryNow();
        return {
            stop
        }
    }

    function addStyle(styleString) {
        const style = document.createElement('style');
        style.textContent = styleString;
        document.head.append(style);
    }

    function initStyles() {
        // spinner
        addStyle(`
            .audio-upload-spinner {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                background-color: black;
                opacity: 0.5;
                z-index: 9999998
            }

            .audio-upload-spinner-inner {
                position: absolute;
                left: 50%;
                top: 50%;
                height:60px;
                width:60px;
                margin:0px auto;
                -webkit-animation: rotation .6s infinite linear;
                -moz-animation: rotation .6s infinite linear;
                -o-animation: rotation .6s infinite linear;
                animation: rotation .6s infinite linear;
                border-left:6px solid rgba(0,174,239,.15);
                border-right:6px solid rgba(0,174,239,.15);
                border-bottom:6px solid rgba(0,174,239,.15);
                border-top:6px solid rgba(0,174,239,.8);
                border-radius:100%;
                z-index: 9999999
            }

            @-webkit-keyframes rotation {
                from {-webkit-transform: rotate(0deg);}
                to {-webkit-transform: rotate(359deg);}
            }
            @-moz-keyframes rotation {
                from {-moz-transform: rotate(0deg);}
                to {-moz-transform: rotate(359deg);}
            }
            @-o-keyframes rotation {
                from {-o-transform: rotate(0deg);}
                to {-o-transform: rotate(359deg);}
            }
            @keyframes rotation {
                from {transform: rotate(0deg);}
                to {transform: rotate(359deg);}
            }
        `);

        // tooltip
        addStyle(`
            [data-customTooltip]{
                cursor: pointer;
                position: relative;
            }

            [data-customTooltip]::after {
                // background-color: #fff;
                // color: #222;
                background-color: #222;
                color: #fff;
                font-size:14px;
                padding: 8px 12px;
                height: fit-content;
                width: fit-content;
                text-wrap: nowrap;
                border-radius: 6px;
                position: absolute;
                text-align: center;
                bottom: -5px;
                left: 50%;
                content: attr(data-customTooltip);
                transform: translate(-50%, 110%) scale(0);
                transform-origin: top;
                transition: 0.14s;
                box-shadow: 0 4px 14px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05);
                z-index: 9999999
            }
            [data-customTooltip]:hover:after {
                display: block;
                transform: translate(-50%, 110%) scale(1);
            }
        `);
    }

    /** 
     * 
     * @param description {string}
     * @param url {string}
     * @param method {string}
     * @param requestIsJson {boolean|undefined}
     * 
     * **/

    async function fetchRequest(description, url, method, data, requestIsJson, customServerErrorHandler) {
        const localStoredToken = window.localStorage.getItem("token");
        const token = JSON.parse(localStoredToken).access_token;
    
        const headers = new Headers();
        if (requestIsJson) {
            headers.append("Content-Type", "application/json");
        }
        headers.append("NK", "NT");
        headers.append("Di-Backend", "connectapi.garmin.com");
        headers.append("Authorization", `Bearer ${token}`);

        let response;
        try {
            response = await fetch(url, {
                method: method || 'GET',
                headers: headers,
                body: data || null,
            })
        } catch (error) {
            throw new Error(`failed to ${description}. ${error}`);
        }
        if (!response.ok) {
            const defaultMsg = `failed to ${description}. Server returned ${formatResponseError(response)}`;
            if (customServerErrorHandler) {
                customServerErrorHandler(response, defaultMsg);
            } else {
                throw new Error(defaultMsg);
            }
        }
        return response;
    }

    function formatResponseError(response) {
        if (!response.statusText) {
            return `${response.status} error`;
        }
        return `${response.status} ${response.statusText}`;
    }

    let needReload = false;
    function success(msg, forceReload) {
        alert(msg);
        (forceReload || needReload) && window.location.reload();
    }

    function error(msg, forceReload) {
        alert(msg);
        (forceReload || needReload) && window.location.reload();
    }

    function showSpinner() {
        if (document.querySelector('.audio-upload-spinner')) {
            return;
        }

        const wrapper = createElement('div', 'audio-upload-spinner');
        const element = createElement('div', 'audio-upload-spinner-inner');
        wrapper.appendChild(element);
        document.body.appendChild(wrapper);
    }

    function hideSpinner() {
        const element = document.querySelector('.audio-upload-spinner');
        if (element) {
            element.remove();
        }
    }

    function deleteUploadButtons() {
        document.querySelectorAll('.garmin-upload-audio-button').forEach(e => e.remove());
    }

    function addUploadButtons() {
        deleteUploadButtons() 
        if (addButton.length == 0 && oldAddButton.length == 0) {
            error("Could not find Send to Device button");
            return;
        }

        // TODO fixme
        const _addButton = document.querySelector(sendButtonSelector);
        const _oldAddButton = document.querySelector(sendButtonAlternativeSelector);
        const buttonToUse = _addButton || _oldAddButton;
        if (buttonToUse) {
            createButton(buttonToUse.parentNode, null);
        }

        const steps = document.querySelectorAll("[data-step-id]");
        for (let i = 0; i < steps.length; i++) {
            const c = steps[i].getAttribute('class');
            // exclude "steps" which are actually repeat groups
            if (c.includes('WorkoutStep')) {
                createButton(steps[i], i);
            }
        }

        haveUploadButtons = true;

        const editButton = document.getElementById(editButtonId);
        const sendToDeviceButton = document.getElementById('headerBtnRightState-edit');
        const saveWorkoutButton = document.getElementById('headerBtnRightState-readonly');
        const doneButton = document.getElementById('headerBtnRightState-saved');
        const headerRightButtonToUse = sendToDeviceButton || saveWorkoutButton || doneButton;

        if (editButton && headerRightButtonToUse) {
            // responsive way which has a bunch of assumptions
            headerRightButtonToUse.addEventListener('click', doneButtonClickHandler);
            editButton.addEventListener('click', editButtonClickHandler);
        } else {
            // slow way
            if (!isWatchingAddButton) {
                tasks.push(watchAddButton());
            }
        }
    }

    function editButtonClickHandler() {
        setTimeout(() => {
            let _sendToDeviceButton = document.getElementById('headerBtnRightState-edit');
            if (_sendToDeviceButton) {
                haveUploadButtons && deleteUploadButtons();
                haveUploadButtons = false;
            } else {
                !haveUploadButtons && addUploadButtons();
                haveUploadButtons = true;
            }
        }, 0);
    }

    function doneButtonClickHandler() {
        // cheaderBtnRightState-readonly => Send To Device
        // cheaderBtnRightState-edit => Save Workout
        // cheaderBtnRightState-saved => Done
        if (this.id === 'headerBtnRightState-saved') {
            setTimeout(() => {
                !haveUploadButtons && addUploadButtons();
                haveUploadButtons = true;
            }, 0);
        }
    }

    let haveUploadButtons = false;
    let isWatchingAddButton = false;
    function watchAddButton() {
        if (isWatchingAddButton) {
            return;
        }
        isWatchingAddButton = true;
        let timer = undefined;
        const tryNow = function () {
            const addButton = document.querySelector(sendButtonSelector);
            const oldAddButton = document.querySelector(sendButtonAlternativeSelector);

            const buttonToUse = addButton || oldAddButton;
            if (haveUploadButtons && (!buttonToUse || (buttonToUse && isHidden(buttonToUse)))) {
                deleteUploadButtons();
                haveUploadButtons = false;
            } else if (!haveUploadButtons && buttonToUse && !isHidden(buttonToUse)) {
                addUploadButtons();
            }
            timer = setTimeout(tryNow, 300);
        };

        const stop = function () {
            isWatchingAddButton = false;
            clearTimeout(timer);
            timer = undefined;
        }

        tryNow();
        return {
            stop
        };
    }

    function isHidden(el) {
        return (el.offsetParent === null);
    }

    function isEditing() {
        // guess
        const addButton = document.querySelectorAll(sendButtonSelector);
        const oldAddButton = document.querySelectorAll(sendButtonAlternativeSelector);

        if (addButton.length == 0 && oldAddButton.length == 0) {
            return true;
        }

        if (addButton.length > 0) {
            return isHidden(addButton[0]);
        }

        if (oldAddButton.length > 0) {
            return isHidden(oldAddButton[0]);
        }

        return false;
    }

    function createElement(tagName, additionalClasses) {
        var el = document.createElement(tagName);
        el.setAttribute('class', `garmin-upload-audio-button ${additionalClasses || ''}`);
        return el;
    }

    function prepareButton(button, id, name) {
        if (name) button.text = name;
        button.removeAttribute('data-target');
        button.removeAttribute('data-toggle');
        button.style.marginLeft = '3px';
        button.setAttribute('class', 'btn btn-medium garmin-upload-audio-button');
        button.setAttribute('id', `garmin-upload-audio-button${id}`);
        return button;
    }

    // index: null for workout, 0...n-1 for steps
    function createButton(parentNode, index) {
        const stepOrder = index == null ? null : index + 1;
        const idSuffix = stepOrder ? `-step-order-${stepOrder}` : '-workout';

        const stepNode = index == null ? null : parentNode;
        let audioNoteExists = false;
        if (stepNode) {
            audioNoteExists = !!stepNode.querySelector('[class*="AudioRecorder"]');
        } else {
            audioNoteExists = !!document.querySelector('[class*="WorkoutPageRightNav"] [class*="AudioRecorder"]');
        }
        
        const shareButtonWrapper = createElement('div')
        if (stepOrder == null) {
            shareButtonWrapper.setAttribute('style', 'background-color: white');
        } else {
            shareButtonWrapper.setAttribute('style', 'background-color: white; margin-left: auto');
        }

        let shareButton;
        if (addButton.length > 0) {
            shareButton = addButton[0].cloneNode(true);
        } else if (oldAddButton.length > 0) {
            shareButton = document.createElement("a");
        }
        
        shareButton = prepareButton(shareButton, idSuffix);
        shareButton.setAttribute('data-customTooltip',
            stepOrder == null ? 'Upload workout audio note from MP3 file' : 'Upload step audio note from MP3 file'
        )
        // const margin = index == null ? '' : 'margin-left: 10px; margin-bottom: 10px; margin-right: 10px';
        const margin = '';
        shareButton.setAttribute('style', `background-color: transparent; color: var(--color-primary); padding: 8px 8px 8px 8px; ${margin}`);

        const shareIcon = createElement('i', 'icon-plus');
        shareIcon.setAttribute('style', 'padding-right: 4px');

        const shareText = createElement('span');
        shareText.innerHTML = 'Audio';

        shareButtonWrapper.appendChild(shareButton);
        shareButton.appendChild(shareIcon);
        shareButton.appendChild(shareText);

        const input = createElement("input");
        input.setAttribute('type', "file");
        input.setAttribute('name', "file");
        input.setAttribute('id', `garmin-upload-audio-input${idSuffix}`);
        input.setAttribute('style', "display:none");

        const form = createElement("form");
        form.setAttribute('style', 'display:none');
        form.appendChild(input);
        
        let confirmedOverwrite = false;

        shareButton.addEventListener('click', function () {
            if (isEditing()) {
                error("You appear to be editing this workout. Save or discard your changes before uploading audio notes.");
            } else {
                if (audioNoteExists) {
                    if (!confirm(stepOrder == null ? workoutConfirmMsg : stepConfirmMsg)) {
                        return;
                    }
                    confirmedOverwrite = true;
                }
                input.click();
            }
        })

        input.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                showSpinner();
                uploadAudioNote(form, stepOrder, confirmedOverwrite).then(
                    (result) => {
                        input.value = '';
                        hideSpinner();
                        if (result) {
                            setTimeout(
                                () => success('Audio note successfully added to workout!', true),
                                50
                            );
                        }
                    },
                    (e) => {
                        input.value = '';
                        hideSpinner();
                        setTimeout(() => error(e), 50);
                    }
                )
            } 
        })

        if (stepOrder == null) {
            // parentNode.parentNode.insertBefore(shareButtonWrapper, parentNode.nextSibling);

            // insert button to the left of main buttons (edit workout, send to device)
            parentNode.parentNode.insertBefore(shareButtonWrapper, parentNode.parentNode.firstChild);
            parentNode.parentNode.insertBefore(form, parentNode.nextSibling);
        } else {
            // parentNode.appendChild(shareButtonWrapper)

            // insert right-justified button next to step details (e.g. total distance, estimated timee)
            const lastChild = parentNode.childNodes[parentNode.childNodes.length-1];
            const lastChildLastChild = lastChild.childNodes[lastChild.childNodes.length-1];
            if (lastChildLastChild.getAttribute('class').includes('stepNote')) {
                lastChild.insertBefore(shareButtonWrapper, lastChildLastChild);
            } else {
                lastChild.appendChild(shareButtonWrapper);
            }

            // form/input field have to go outside of the step container, otherwise 
            // the input button won't work (clicks have no effect)
            parentNode.parentNode.insertBefore(form, parentNode.nextSibling);
        }
    }


    // returns true if upload succeeded, false if upload was cancelled (without fatal error)
    async function uploadAudioNote(form, stepOrder, confirmedOverwrite) {
        // get existing workout data
        const workoutData = await (await apiGetCurrentWorkout()).json();

        let step = null;
        if (stepOrder != null) {
            step = findStep(workoutData, stepOrder);
            if (step == null) {
                throw new Error("unable to find current step in workout data");
            }
        }

        // determine if audio note already exists; if so, it needs to be deleted before
        // we can upload a new one
        let audioNoteToDelete = undefined;
        if (step == null) {
            if (workoutData.workoutAudioNoteUuid) {
                if (confirmedOverwrite || confirm(workoutConfirmMsg)) {
                    audioNoteToDelete = workoutData.workoutAudioNoteUuid;
                } else {
                    return false;
                }
            }
        } else {
            if (step.stepAudioNoteUuid) {
                if (confirmedOverwrite || confirm(stepConfirmMsg)) {
                    audioNoteToDelete = step.stepAudioNoteUuid;
                } else {
                    return false;
                }
            }
        }

        // upload new audio note
        const formData = new FormData(form);
        const audioMetadata = await (await apiPostAudioNote(formData)).json();

        // delete existing audio note (order is important)
        if (audioNoteToDelete) {
            await apiDeleteAudioNote(audioNoteToDelete);
        }

        // update workout data
        if (step == null) {
            workoutData.workoutAudioNote = audioMetadata;
            workoutData.workoutAudioNoteUuid = audioMetadata.audioNoteUuid;
        } else {
            step.stepAudioNote = audioMetadata;
            step.stepAudioNoteUuid = audioMetadata.audioNoteUuid;
        }

        // save workout data

        // if saving the workout fails, then we might be in an undefined state
        // (especially if we deleted the existing note), so it's better if we
        // reload the page. But then again, reloading the page won't
        // fix anything...
        // e.g.
        // - the workout may still have a reference to a now-deleted audio note
        // - we may have created a new audio note which is not referenced anywhere

        // needReload = true;
        
        await apiPutCurrentWorkout(workoutData);
        return true;
    }

    // step containers in the dom have data-step-id values (and no other elements have this),
    // but unfortunately these values don't match what's in the workout JSON.
    // However, the 1-based stepOrder field in the JSON always matches the order in the
    // DOM. This is true even when the steps aren't a flat list,
    // which occurs when some of the step containers are actually repeat groups
    // (which means they have no data of their own except child steps)
    function findStep(workoutData, stepOrder) {
        for (let i = 0; i < workoutData.workoutSegments.length; i++) {
            const segment = workoutData.workoutSegments[i];
            const step = findStepInSegment(segment, stepOrder);
            if (step) return step;
        }
        return null;
    }

    function findStepInSegment(segmentOrStep, stepOrder) {
        for (let i = 0; i < segmentOrStep.workoutSteps.length; i++) {
            const step = segmentOrStep.workoutSteps[i]
            if (step.stepOrder === stepOrder) return step;
            if (step.workoutSteps) {
                const matchingStep = findStepInSegment(step, stepOrder);
                if (matchingStep) return matchingStep;
            }
        }
        return null;
    }
})();