Replicate Genshin Impact's cutscenes with subtitles styling for video on the official channel.

README.md

GenshinCGS (CG Subtitles)

Replicate Genshin Impact's cutscenes with styled subtitles on videos.

Installation

Userscript

(You will need an userscripts manager like Violentmonkey to be able to use this script)

GenshinCGS.user.js

// ==UserScript==
// @name         GenshinCGS
// @namespace    https://me.azuree.moe
// @version      1.0
// @description  Replicate Genshin Impact's cutscene experience on videos' subtitles.
// @author       azuryymiko
// @match        https://www.youtube.com/*
// @icon         https://raw.githubusercontent.com/azurenekowo/ayaka/main/resources/favicon.ico
// @grant        none
// ==/UserScript==

// Customization
const cssUrl = 'https://me.azuree.moe/rawassets/yt-genshin-subs.css'
const genshinChannels = [
  '@GenshinImpact',
  '@GenshinImpact_ZH',
  '@GenshinImpact_KR',
  '@GenshinImpact_JP'
]

// This involves using a non-standard JS event.
// Changes and breaks may occur. I will do my best to update for it.
window.addEventListener('yt-page-data-updated', onVideoLoad)

function onVideoLoad() {
  if(window.location.pathname == '/watch') {
    const channelHandle = `@${document.querySelector('yt-formatted-string.ytd-channel-name a').toString().split('/@')[1]}`
    if(genshinChannels.includes(channelHandle)) {
      console.log('%c[GenshinCGS]', 'color: #ae81ff', 'Detected video on one of Genshin\'s official channels. Injecting CSS...')
      var subtitleCSS = document.createElement('link')
      subtitleCSS.href = cssUrl
      subtitleCSS.type = 'text/css'
      subtitleCSS.rel = 'stylesheet'
      subtitleCSS.id = 'subtitleCSSInjector'
      document.getElementsByTagName('head')[0].appendChild(subtitleCSS)
      console.log('%c[GenshinCGS]', 'color: #ae81ff', 'Successfully injected CSS into subtitles display.')
      console.log('%c[GenshinCGS]', 'color: #ae81ff', 'Seems like my work here is done. Cya~')
    }
    else {
      disableCSSInjection()
    }
  }
  else {
    disableCSSInjection()
  }
}

function disableCSSInjection() {
  if(document.getElementById('subtitleCSSInjector')) {
    document.getElementById('subtitleCSSInjector').remove()
    console.log('%c[GenshinCGS]', 'color: #ae81ff', 'Successfully un-injected GenshinCGS. You may now play the video as normal')
  }
}