☰

Vimeo video buttons above description

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

  1. // ==UserScript==
  2. // @name         Vimeo video buttons above description
  3. // @namespace    1N07
  4. // @version      0.1
  5. // @description  Adds the video buttons from the video overlay to above the description
  6. // @author       1N07
  7. // @include      /^https?:\/\/vimeo.com\/\d+$/
  8. // @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     $("head").append(`<style>
  16.  
  17. .customButton svg {
  18. width: 1.2rem;
  19. }
  20.  
  21. .customButton {
  22. min-width: 50px;
  23. }
  24.  
  25. #watchLaterButton svg circle {
  26. stroke: black;
  27. }
  28.  
  29. 	</style>`);
  30.  
  31.     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>`;
  32.     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>`;
  33.     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>`;
  34.  
  35. 	$(function(){
  36.         let likeButt = $(".haddrp:first").clone();
  37.         likeButt.removeAttr("data-fatal-attraction");
  38.         let watchlaterButt = likeButt.clone();
  39.         let collectionButt = likeButt.clone();
  40.  
  41.         watchlaterButt.prop("id", "watchLaterButton");
  42.         watchlaterButt.addClass("customButton");
  43.         watchlaterButt.find("span:first").html(watchlatersvg);
  44.  
  45.         collectionButt.prop("id", "collectionButton");
  46.         collectionButt.addClass("customButton");
  47.         collectionButt.find("span:first").html(collectionssvg);
  48.  
  49.         likeButt.prop("id", "customLikeButton");
  50.         likeButt.addClass("customButton");
  51.         likeButt.find("span:first").html(likesvg);
  52.  
  53. 		$(".haddrp:first").before(likeButt);
  54.         $(".haddrp:first").before(watchlaterButt);
  55.         $(".haddrp:first").before(collectionButt);
  56.  
  57.  
  58.         $("#customLikeButton").click(function(e){
  59.             e.preventDefault();
  60.             $("button.like-button:first").click();
  61.             setTimeout(CheckButtons, 200);
  62.         });
  63.         $("#watchLaterButton").click(function(e){
  64.             e.preventDefault();
  65.             $("button.watch-later-button:first").click();
  66.             setTimeout(CheckButtons, 200);
  67.         });
  68.         $("#collectionButton").click(function(e){
  69.             e.preventDefault();
  70.             $("button.collections-button:first").click();
  71.         });
  72.  
  73.  
  74.  
  75.         setTimeout(CheckButtons, 100);
  76. 	});
  77.  
  78.     function CheckButtons() {
  79.         if($("button.like-button").length > 0 && $("button.watch-later-button").length > 0) {
  80.             if($("button.like-button").hasClass("on")) {
  81.                 $("#customLikeButton").css("fill", "rgb(0, 173, 239)");
  82.                 $("#customLikeButton").prop("title", "Unlike");
  83.             }
  84.             else {
  85.                 $("#customLikeButton").css("fill", "black");
  86.                 $("#customLikeButton").prop("title", "Like");
  87.             }
  88.  
  89.             if($("button.watch-later-button").hasClass("on")) {
  90.                 $("#watchLaterButton").css("fill", "rgb(0, 173, 239)");
  91.                 $("#watchLaterButton svg circle").css("stroke", "rgb(0, 173, 239)");
  92.                 $("#watchLaterButton").prop("title", "Remove from Watch Later");
  93.             }
  94.             else {
  95.                 $("#watchLaterButton").css("fill", "black");
  96.                 $("#watchLaterButton svg circle").css("stroke", "black");
  97.                 $("#watchLaterButton").prop("title", "Add to Watch Later");
  98.             }
  99.  
  100.             $(".vp-sidedock button").off();
  101.             $(".vp-sidedock button").click(function(e){
  102.                 setTimeout(CheckButtons, 200);
  103.             });
  104.         }
  105.         else
  106.             setTimeout(CheckButtons, 100);
  107.     }
  108.  
  109. })();