├── LICENSE ├── README.md ├── example.png ├── styles.css └── vot.user.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 sodapng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Рабочая версия: https://github.com/ilyhalight/voice-over-translation 2 | # Voice-over translation 3 | 4 | Voice-over translation not only in Yandex.Browser.\ 5 | Much obliged, **[Yandex.Translate](https://translate.yandex.ru/)**. Thank you. 6 | 7 | ## Как использовать: 8 | 9 | 1. Установить расширение **[violetmonkey](https://violentmonkey.github.io/get-it/)** 10 | 2. **[«Установить Скрипт»](https://raw.githubusercontent.com/sodapng/voice-over-translation/master/vot.user.js)** 11 | 12 | ![example btn](https://github.com/sodapng/voice-over-translation/blob/master/example.png "btn") 13 | -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sodapng/voice-over-translation/0980857c85248475c462931ba8657360a3f78736/example.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .translation-btn, 2 | .btn-error::before { 3 | box-sizing: border-box; 4 | position: absolute; 5 | left: 50%; 6 | box-shadow: 0px 0px 10px 2px rgba(34, 60, 80, 0.5); 7 | border-radius: 0.5rem; 8 | } 9 | 10 | .translation-btn { 11 | width: 5rem; 12 | padding: 1.5rem; 13 | background: no-repeat center black 14 | url(https://icongr.am/entypo/language.svg?size=25&color=ffffff); 15 | top: 6rem; 16 | opacity: 0; 17 | transition: opacity 2s; 18 | } 19 | 20 | .btn-error::before { 21 | content: attr(data-error); 22 | font-size: 1.3rem; 23 | top: 4rem; 24 | transform: translate(-50%); 25 | width: max-content; 26 | padding: 0.5rem; 27 | color: white; 28 | background-color: black; 29 | } 30 | 31 | .btn-succes { 32 | background: no-repeat center black 33 | url(https://icongr.am/entypo/controller-paus.svg?size=20&color=ffffff); 34 | } 35 | -------------------------------------------------------------------------------- /vot.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name voice-over-translation 3 | // @match *://*.youtube.com/* 4 | // @version 1.5 5 | // @require https://code.jquery.com/jquery-3.6.0.min.js 6 | // @resource styles https://raw.githubusercontent.com/sodapng/voice-over-translation/master/styles.css 7 | // @grant GM_getResourceText 8 | // @grant GM_addStyle 9 | // @grant GM_xmlhttpRequest 10 | // @updateURL https://raw.githubusercontent.com/sodapng/voice-over-translation/master/vot.user.js 11 | // @downloadURL https://raw.githubusercontent.com/sodapng/voice-over-translation/master/vot.user.js 12 | // @supportURL https://github.com/sodapng/voice-over-translation/issues 13 | // @homepageURL https://github.com/sodapng/voice-over-translation 14 | // @connect api.browser.yandex.ru 15 | // ==/UserScript== 16 | 17 | const styles = GM_getResourceText("styles"); 18 | GM_addStyle(styles); 19 | 20 | const fragment = new DocumentFragment(); 21 | const span = $(""); 22 | 23 | $(span).addClass("translation-btn"); 24 | 25 | fragment.appendChild(span[0]); 26 | const audio = new Audio(); 27 | 28 | const getVeideoId = () => { 29 | const url = new URL(window.location.href); 30 | 31 | if (url.pathname.includes("watch")) { 32 | return url.searchParams.get("v"); 33 | } 34 | 35 | if (url.pathname.includes("embed")) { 36 | return url.pathname.substr(7, 11); 37 | } 38 | 39 | return false; 40 | }; 41 | 42 | const getUrlAudio = (videoId) => { 43 | return new Promise((resolve, reject) => { 44 | GM_xmlhttpRequest({ 45 | url: "https://api.browser.yandex.ru/video-translation/translate", 46 | method: "POST", 47 | headers: { 48 | "Content-Type": "application/x-protobuf", 49 | "User-Agent": 50 | "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.85 YaBrowser/21.11.2.773 Yowser/2.5 Safari/537.36", 51 | }, 52 | data: `\x1A\x1Chttps://youtu.be/${videoId}\x28\x01`, 53 | onload: (res) => { 54 | if (res.total === 40 || res.total === 42) { 55 | return reject("VIDEO-TRANSLATION: can not translate"); 56 | } 57 | 58 | if (res.status === 200) { 59 | return resolve(res.response); 60 | } 61 | 62 | return reject("VIDEO-TRANSLATION: bad request"); 63 | }, 64 | onerror: (err) => { 65 | return reject("VIDEO-TRANSLATION: connection error"); 66 | }, 67 | }); 68 | }); 69 | }; 70 | 71 | const deleteAudioSrc = () => { 72 | audio.src = ""; 73 | audio.removeAttribute("src"); 74 | }; 75 | 76 | const removeClassBtnErrorAndBtnSucces = () => { 77 | $(span).removeClass("btn-error"); 78 | $(span).removeClass("btn-succes"); 79 | }; 80 | 81 | $("body").on("yt-page-data-updated", function () { 82 | var video = $("video")[0]; 83 | $(".html5-video-container").append(fragment); 84 | 85 | let btnHover = function () { 86 | let time; 87 | 88 | $(".html5-video-container").on("mousemove", resetTimer); 89 | $(".html5-video-container").on("mouseout", () => logout(0)); 90 | $(span).on("mousemove", function (event) { 91 | clearTimeout(time); 92 | logout(1); 93 | event.stopPropagation(); 94 | }); 95 | 96 | function logout(n) { 97 | $(span).css("opacity", n); 98 | } 99 | 100 | function resetTimer() { 101 | clearTimeout(time); 102 | logout(1); 103 | time = setTimeout(() => logout(0), 2000); 104 | } 105 | }; 106 | 107 | btnHover(); 108 | 109 | removeClassBtnErrorAndBtnSucces(); 110 | 111 | const lipSync = (mode = false) => { 112 | audio.currentTime = video.currentTime; 113 | audio.playbackRate = video.playbackRate; 114 | 115 | if (!mode) { 116 | return; 117 | } 118 | 119 | if (mode === "play") { 120 | audio.play(); 121 | } 122 | 123 | if (mode === "pause") { 124 | audio.pause(); 125 | } 126 | }; 127 | 128 | $(span).click(function (event) { 129 | event.stopPropagation(); 130 | 131 | if (audio.src) { 132 | removeClassBtnErrorAndBtnSucces(); 133 | deleteAudioSrc(); 134 | event.stopImmediatePropagation(); 135 | } 136 | }); 137 | 138 | $(span).click(async function (event) { 139 | try { 140 | event.stopPropagation(); 141 | 142 | const VIDEO_ID = getVeideoId(); 143 | 144 | if (!VIDEO_ID) { 145 | throw "VIDEO-TRANSLATION: not found video id"; 146 | } 147 | 148 | const rawResponse = await getUrlAudio(VIDEO_ID); 149 | 150 | const URL_AUDIO = rawResponse.match(/https.*[a-z0-9]{64}|https.*mp3/); 151 | 152 | if (!URL_AUDIO) { 153 | throw "VIDEO-TRANSLATION: raw string error"; 154 | } 155 | 156 | audio.src = URL_AUDIO[0]; 157 | 158 | $("body").one("yt-page-data-updated", function () { 159 | removeClassBtnErrorAndBtnSucces(); 160 | audio.pause(); 161 | $("video").off(".translate"); 162 | deleteAudioSrc(); 163 | }); 164 | 165 | if ($(span).hasClass("btn-error")) { 166 | $(span).removeClass("btn-error"); 167 | } 168 | 169 | if (!video.paused) { 170 | lipSync("play"); 171 | } 172 | 173 | $("video").on("playing.translate ratechange.translate", function () { 174 | lipSync(); 175 | }); 176 | 177 | $("video").on("play.translate canplaythrough.translate", function () { 178 | lipSync(); 179 | 180 | if (!video.paused) { 181 | lipSync("play"); 182 | } 183 | }); 184 | 185 | $("video").on("pause.translate waiting.translate", function () { 186 | lipSync("pause"); 187 | }); 188 | 189 | $(span).addClass("btn-succes"); 190 | } catch (err) { 191 | if (!err) { 192 | console.error("something went wrong"); 193 | } 194 | 195 | $(span).attr("data-error", err); 196 | $(span).addClass("btn-error"); 197 | console.error(err); 198 | } 199 | }); 200 | }); 201 | --------------------------------------------------------------------------------