Vimeo video buttons above description

Adds the video buttons from the video overlay to above the description

// ==UserScript==
// @name         Vimeo video buttons above description
// @namespace    1N07
// @version      0.1
// @description  Adds the video buttons from the video overlay to above the description
// @author       1N07
// @include      /^https?:\/\/vimeo.com\/\d+$/
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    $("head").append(`<style>

.customButton svg {
width: 1.2rem;
}

.customButton {
min-width: 50px;
}

#watchLaterButton svg circle {
stroke: black;
}

	</style>`);

    var likesvg = `<svg class="like-icon" viewBox="0 0 110 81" preserveAspectRatio="xMidYMid" tabindex="-1"><path class="fill" d="M82.496 1c-14.698 0-25.969 11.785-27.496 13.457-1.526-1.672-12.798-13.457-27.494-13.457-16.299 0-27.506 15.037-27.506 27.885 0 12.795 12.562 22.558 22.245 27.592 9.186 4.771 30.601 18.349 32.755 24.523 2.154-6.174 23.57-19.752 32.755-24.523 9.684-5.034 22.245-14.797 22.245-27.592 0-12.848-11.206-27.885-27.504-27.885z"></path></svg>`;
    var watchlatersvg = `<svg viewBox="0 0 20 20" preserveAspectRatio="xMidYMid" tabindex="-1"><polyline class="fill hour-hand" points="9.64,4.68 10.56,4.68 11.28,11.21 8.93,11.21 9.64,4.68"></polyline><polyline class="fill minute-hand" points="14.19,13.65 13.7,14.14 8.58,10.4 10.44,8.5 14.19,13.65"></polyline><circle cx="10" cy="10" r="8" fill="none" stroke-width="2"></circle></svg>`;
    var collectionssvg = `<svg class="collections-icon" viewBox="0 0 24 24" tabindex="-1"><path class="fill" d="M24 12c0-.3-.1-.6-.4-.8l-2.7-2.3 2.4-1c.4-.1.7-.5.7-.9 0-.3-.1-.6-.4-.8l-7-6c-.1-.1-.4-.2-.6-.2-.1 0-.3 0-.4.1l-15 6c-.3.1-.6.5-.6.9 0 .3.1.6.4.8l2.7 2.3-2.4 1c-.4.1-.7.5-.7.9 0 .3.1.6.4.8l2.7 2.3-2.4 1c-.4.1-.7.5-.7.9 0 .3.1.6.4.8l7 6c.1.1.4.2.6.2.1 0 .3 0 .4-.1l15-6c.4-.1.6-.5.6-.9 0-.3-.1-.6-.4-.8l-2.7-2.3 2.4-1c.4-.1.7-.5.7-.9zm-8.2-9.8l5.3 4.5-12.9 5.1-5.3-4.5 12.9-5.1zm5.3 14.5L8.2 21.8l-5.3-4.5 1.9-.8 2.6 2.2c.1.2.4.3.6.3.1 0 .3 0 .4-.1l10.5-4.2 2.2 2zm-12.9.1l-5.3-4.5 1.9-.8 2.6 2.2c.1.2.4.3.6.3.1 0 .3 0 .4-.1l10.5-4.2 2.3 1.9-13 5.2z"></path></svg>`;

	$(function(){
        let likeButt = $(".haddrp:first").clone();
        likeButt.removeAttr("data-fatal-attraction");
        let watchlaterButt = likeButt.clone();
        let collectionButt = likeButt.clone();

        watchlaterButt.prop("id", "watchLaterButton");
        watchlaterButt.addClass("customButton");
        watchlaterButt.find("span:first").html(watchlatersvg);

        collectionButt.prop("id", "collectionButton");
        collectionButt.addClass("customButton");
        collectionButt.find("span:first").html(collectionssvg);

        likeButt.prop("id", "customLikeButton");
        likeButt.addClass("customButton");
        likeButt.find("span:first").html(likesvg);

		$(".haddrp:first").before(likeButt);
        $(".haddrp:first").before(watchlaterButt);
        $(".haddrp:first").before(collectionButt);


        $("#customLikeButton").click(function(e){
            e.preventDefault();
            $("button.like-button:first").click();
            setTimeout(CheckButtons, 200);
        });
        $("#watchLaterButton").click(function(e){
            e.preventDefault();
            $("button.watch-later-button:first").click();
            setTimeout(CheckButtons, 200);
        });
        $("#collectionButton").click(function(e){
            e.preventDefault();
            $("button.collections-button:first").click();
        });



        setTimeout(CheckButtons, 100);
	});

    function CheckButtons() {
        if($("button.like-button").length > 0 && $("button.watch-later-button").length > 0) {
            if($("button.like-button").hasClass("on")) {
                $("#customLikeButton").css("fill", "rgb(0, 173, 239)");
                $("#customLikeButton").prop("title", "Unlike");
            }
            else {
                $("#customLikeButton").css("fill", "black");
                $("#customLikeButton").prop("title", "Like");
            }

            if($("button.watch-later-button").hasClass("on")) {
                $("#watchLaterButton").css("fill", "rgb(0, 173, 239)");
                $("#watchLaterButton svg circle").css("stroke", "rgb(0, 173, 239)");
                $("#watchLaterButton").prop("title", "Remove from Watch Later");
            }
            else {
                $("#watchLaterButton").css("fill", "black");
                $("#watchLaterButton svg circle").css("stroke", "black");
                $("#watchLaterButton").prop("title", "Add to Watch Later");
            }

            $(".vp-sidedock button").off();
            $(".vp-sidedock button").click(function(e){
                setTimeout(CheckButtons, 200);
            });
        }
        else
            setTimeout(CheckButtons, 100);
    }

})();