Download button for Boosty player, changelog schema changes

cjmaxik · Mar 1, 2023 · 4a1641b · 4a1641b
1 parent b4a2446
commit 4a1641b
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 38 deletions.
diff --git a/README-EN.md b/README-EN.md
@@ -9,6 +9,7 @@
 * Widescreen page layout
 * Force video quality *(for Boosty player)*
 * Picture-in-picture *(for Boosty player)*
+* Download video *(for Boosty player)*
 * Save where you left off video/audio *(for Boosty players)*
 * Theater mode for streams
 
@@ -69,6 +70,7 @@ npm run watch
     - Might require a page reload for content script
 - [Content script](./source/content/content.js) requires a page reload
 - [Options page](./source/options/options.html) requires a page or extension reload
+- Assets (changelog icons) require an extension reload
 
 [1]: https://chrome.google.com/webstore/detail/more-boosty/kpcbalinpdhnlgonfoflhflnfgcbffbl
-[2]: https://github.com/cjmaxik/more-boosty/releases
+[2]: https://github.com/cjmaxik/more-boosty/releases
diff --git a/readme.md b/readme.md
@@ -9,6 +9,7 @@
 * Широкоформатный режим страниц
 * Принудительное изменение качества видео на желаемое *(для плеера Boosty)*
 * Картинка-в-картинке *(для плеера Boosty)*
+* Скачивание видео *(для плеера Boosty)*
 * Сохранение момента, на котором закончил видео/аудио *(для плееров Boosty)*
 * Режим кинотеатра для стримов
 
@@ -41,7 +42,7 @@
 - Расширение собирается и публикуется через [Github Actions](./.github/workflows/release.yml)
 - Версия расширения - дата сборки в формате `год.месяц.день`
 
-## Сборка расширения вручную 
+## Сборка расширения вручную
 1. Скачай [свежий релиз](https://github.com/cjmaxik/more-boosty/releases) либо весь репозиторий
 2. Установи Node.js (нужная версия - в [package.json](./package.json))
 3. Установи все зависимости
@@ -70,6 +71,7 @@ npm run watch
     - Может потребоваться обновление страницы для корректной работы content script
 - [Content script](./source/content/content.js) требует ручного обновления страницы
 - [Страница параметров](./source/options/options.html) требует ручного обновления страницы или расширения
+- Ассеты (changelog, иконки) требуют ручного обновления расширения
 
 [1]: https://chrome.google.com/webstore/detail/more-boosty/kpcbalinpdhnlgonfoflhflnfgcbffbl
-[2]: https://github.com/cjmaxik/more-boosty/releases
+[2]: https://github.com/cjmaxik/more-boosty/releases
diff --git a/source/_locales/en/messages.json b/source/_locales/en/messages.json
@@ -57,6 +57,9 @@
   "content_pip": {
     "message": "Picture-in-picture"
   },
+  "content_download": {
+    "message": "Download with current quality"
+  },
   "changelog": {
     "message": "Changelog"
   },

diff --git a/source/_locales/ru/messages.json b/source/_locales/ru/messages.json
@@ -55,7 +55,10 @@
     "description": "`More Boosty` - название расширения. Не переводить! `Параметры` - перевод понятия Options для настроек расширений в Chrome."
   },
   "content_pip": {
-    "message": "Картинка-в-картинке"
+    "message": "Картинка в картинке"
+  },
+  "content_download": {
+    "message": "Скачать в текущем качестве"
   },
   "changelog": {
     "message": "Список изменений"

diff --git a/source/assets/changelog.json b/source/assets/changelog.json
@@ -1,32 +1,30 @@
 {
   "latest": {
     "ru": [
-      "Техническое обновление. Всё работает как и раньше, только лучше 😁",
-      "Для разработчиков - полностью переписанное README на Github"
+      "Добавлена кнопка скачивания видео в текущем качестве в плеере Boosty - смотри без буферизации или возьми с собой!"
     ],
     "en": [
-      "Technical update. Everything works just like before, but better 😁",
-      "For developers - fully rewritten README on Github"
+      "\"Download with current quality\" button has been added in Boosty video player - watch without buffering or take it with you!"
     ]
   },
   "previous": {
     "ru": [
       "Расширение запоминает момент, на котором ты закончил смотреть видео или слушать аудио - больше не нужно кидать время в комментарии! Спасибо Павлу Страхову за идею.",
-      "Исправления стилей",
       "Переработана функция \"Качество видео\" - ты можешь выбрать конкретное качество (1080p по умолчанию). Спасибо Garyok за запрос.",
-      "Небольшой редизайн окна параметров"
     ],
     "en": [
       "Extension now saves the moment you've left off the video or audio - no need to comment with a timestamp anymore! Thanks, Pavel Strakhov, for the idea.",
-      "Style fixes",
       "\"Video quality\" function has been reimplemented - now you can choose the desired quality (1080p by default). Thanks, Garyok, for the request.",
-      "Slight redesign of the options window"
     ]
   },
   "track": {
-    "producer": "Wolfgang Gartner",
-    "name": "Wolfgang's 5th Symphony (Hi-Fi Rush OST)",
-    "youtube": "https://youtu.be/eG2ShFZasC0",
-    "spotify": "https://open.spotify.com/track/7sLnn2UOttrEPBZSFyIsYh?si=4f2fa4631dcd4c93"
+    "producer": "Atomic Heart OST",
+    "name": "ЭЛЕАНОРА (CJMAXiK Edit)",
+    "links": [
+      {
+        "name": "YouTube",
+        "link": "https://youtu.be/K1_sdaogxOk?ref=more_boosty"
+      }
+    ]
   }
 }
diff --git a/source/content/domHelpers.js b/source/content/domHelpers.js
@@ -138,12 +138,16 @@ const prepareVideoPlayer = (event, options) => {
   const player = event.currentTarget.parentElement
   const controls = player.querySelector('div.controls')
 
+  // Add PiP button (for supported browsers)
   if (document.pictureInPictureEnabled) {
-    // There is no user input for this call, this is safe
     controls.lastElementChild.insertAdjacentHTML('beforeBegin', templates.pipButton())
     player.querySelector('div.MB_pip').addEventListener('click', pip)
   }
 
+  // Add Download button
+  controls.lastElementChild.insertAdjacentHTML('beforeBegin', templates.downloadButton())
+  player.querySelector('div.MB_download').addEventListener('click', download)
+
   // Force Video Quality
   if (options.force_video_quality) forceVideoQuality(player, options.video_quality)
 
@@ -328,6 +332,43 @@ const pip = (event) => {
   }
 }
 
+/**
+ * Operate Download video
+ * @private
+ * @see {@link prepareVideoPlayer} for event conditions
+ * @param {Event} event
+ */
+const download = (event) => {
+  const playerWrapper = event.currentTarget.parentElement.parentElement.parentElement
+  const video = playerWrapper.querySelector('video')
+  const videoUrl = video.getAttribute('src')
+
+  if (!videoUrl) {
+    console.error("Video URL is missing")
+    return
+  }
+
+  generateDownloadLink(videoUrl)
+}
+
+/**
+ * Generate URL download
+ * @param {URL} url
+ */
+const generateDownloadLink = (url) => {
+  const link = document.createElement('a')
+  link.style.display = 'none'
+  link.href = url
+  link.download = 'boosty'
+
+  document.body.appendChild(link)
+  link.click()
+
+  setTimeout(() => {
+    link.parentNode.removeChild(link);
+  }, 0);
+}
+
 /**
  * Open options page for the extension
  * @param {Event} event

diff --git a/source/content/templates.js b/source/content/templates.js
@@ -18,7 +18,7 @@ if (uiLang !== 'ru' || uiLang !== 'en') {
 }
 
 export const optionsLink = () => `
-  <a class="Link_block_f6iQc MiniProfile_link_rQTY2" href="#" id="MB_options"> 
+  <a class="Link_block_f6iQc MiniProfile_link_rQTY2" href="#" id="MB_options">
       <div class="DropdownItem_block_EtyZL DropdownItem_blockClickable_hJXfh">
           <div class="ProfileDropdownItem_item_oHFvi">
               <span class="Icon_block_Hvwi5 ProfileDropdownItem_icon_iNRrH">
@@ -59,7 +59,7 @@ export const changelogModal = () => `
 
               <p>
                   <small>
-                      Created by <a href="https://cjmaxik.ru" rel="noreferref noopener nofollow" target="_blank">CJMAXiK</a>
+                      Created by <a href="https://cjmaxik.ru?ref=more_boosty" rel="noreferref noopener nofollow" target="_blank">CJMAXiK</a>
                   </small>
               </p>
           </div>
@@ -80,12 +80,12 @@ export const changelogModal = () => `
                   ${generateChangelogMusicTrack()}
               </div>
           </div>
-          
+
           <div class="Buttons_buttons_BbEpA" style="margin-top: 40px;">
-              <a href="https://boosty.to/cjmaxik" rel="noreferref noopener nofollow" target="_blank" class="BaseButton_button_yO8r5 ContainedButton_button_mJG1l ContainedButton_colorDefault_fJta6" style="color: rgb(232, 230, 227);">
+              <a href="https://boosty.to/cjmaxik?ref=more_boosty" rel="noreferref noopener nofollow" target="_blank" class="BaseButton_button_yO8r5 ContainedButton_button_mJG1l ContainedButton_colorDefault_fJta6" style="color: rgb(232, 230, 227);">
                   ${t('options_boosty_link')}
               </a>
-              
+
               <a href="#" id="MB_optionsButton" class="BaseButton_button_yO8r5 OutlinedButton_button_gVLJD">
                   ${t('options_title')}
               </a>
@@ -104,25 +104,48 @@ export const pipButton = () => `
   </div>
   <div class="container controls-element v-1fkqq1h"></div>
 `
+export const downloadButton = () => `
+  <div class="container controls-element v-1fkqq1h MB_download">
+      <div role="button" tabindex="0" title="${t('content_download')}">
+          <svg class="icon v-daygaf" xmlns="http://www.w3.org/2000/svg">
+              <g fill="#fff" fill-rule="evenodd">
+              <path class="_enter" d="M5 21H19V19H5M19 10H15V3H9V10H5L12 17 19 10Z"></path>
+          </svg>
+      </div>
+  </div>
+  <div class="container controls-element v-1fkqq1h"></div>
+`
 
 export const timestampIndicator = (position) => `
   <span class="MB_last_timestamp" style="
-      display: block; 
-      position: absolute; 
-      z-index: 99999; 
-      height: 100%; 
-      width: 3px; 
+      display: block;
+      position: absolute;
+      z-index: 99999;
+      height: 100%;
+      width: 3px;
       background-color: rgb(174,54,12);
       left: ${position}%;
   "></span>
 `
 
-const trackList = (track) => safeHTML`
-  <div style="margin-left: 24px;">
-      ${track.producer} - <strong>${track.name}</strong></br>
-      <a href="${track.youtube}" rel="noreferref noopener nofollow" target="_blank">YouTube</a> | <a href="${track.spotify}" rel="noreferref noopener nofollow" target="_blank">Spotify</a>
-  </div>
-`
+const trackList = (track) => {
+  const trackLink = (track) => safeHTML`
+   <a href="${track.link}" rel="noreferref noopener nofollow" target="_blank">${track.name}</a>
+  `
+
+  let links = ""
+  track.links.forEach((link, key, array) => {
+    links += trackLink(link)
+    if (!Object.is(array.length - 1, key)) links += " | "
+  });
+
+  return `
+    <div style="margin-left: 24px;">
+        ${track.producer} - <strong>${track.name}</strong></br>
+        ${links}
+    </div>
+  `
+}
 
 const noChangelog = '<ul><li>🤷</li></ul>'
 
@@ -151,10 +174,18 @@ const generateChangelogText = (type, lang) => {
  */
 const generateChangelogMusicTrack = () => {
   let track = {
-    producer: 'Darude ',
+    producer: 'Darude',
     name: 'Sandstorm',
-    youtube: 'https://youtu.be/y6120QOlsfU',
-    spotify: 'https://open.spotify.com/track/3dxDj8pDPlIHCIrUPXuCeG?si=188b40ce99aa4592'
+    links: [
+      {
+        name: "YouTube",
+        link: "https://youtu.be/y6120QOlsfU?ref=more_boosty"
+      },
+      {
+        name: "Spotify",
+        link: "https://open.spotify.com/track/3dxDj8pDPlIHCIrUPXuCeG?si=188b40ce99aa4592?ref=more_boosty"
+      }
+    ]
   }
 
   if (changelogText.track) {

diff --git a/source/options/options.html b/source/options/options.html
@@ -93,10 +93,11 @@
         <a class="openURL" href="https://boosty.to/cjmaxik#mb_update" data-locale="changelog">
           Changelog
         </a><br />
-        <a class="openURL ms-text-orange" href="https://boosty.to/cjmaxik" data-locale="options_boosty_link">
+        <a class="openURL ms-text-orange" href="https://boosty.to/cjmaxik?ref=more_boosty"
+          data-locale="options_boosty_link">
           Support this project on Boosty!
         </a><br />
-        <a class="openURL ms-text-light" href="https://github.com/cjmaxik/more-boosty"
+        <a class="openURL ms-text-light" href="https://github.com/cjmaxik/more-boosty?ref=more_boosty"
           data-locale="options_github_link">
           Source code
         </a>