RTL布局bilibili.com

对Bilibili的视频播放页面改成从右到左布局方式,解决长时间小窗看视频导致头轻微向左边偏转的问题。

目前为 2025-02-08 提交的版本。查看 最新版本

// ==UserScript==
// @name        RTL布局bilibili.com
// @namespace   https://space.bilibili.com/474516472?spm_id_from=namespace
// @note        仅在自己pc上测试
// @icon        https://www.bilibili.com/favicon.ico
// @match       https://bilibili.com/
// @match       https://www.bilibili.com/
// @match       https://*bilibili.com/*play/*
// @match       https://*bilibili.com/list/*
// @match       https://*bilibili.com/video/*
// @grant       none
// @version     1.0
// @license     MIT
// @author      https://space.bilibili.com/474516472?spm_id_from=author
// @description 对Bilibili的视频播放页面改成从右到左布局方式,解决长时间小窗看视频导致头轻微向左边偏转的问题。
// @require     http://libs.baidu.com/jquery/2.0.0/jquery.min.js
// ==/UserScript==
(function() {
  $(function() {
    console.log('run RTL')
    /*
     *
     *
     *
     */
    if(document.URL.toLowerCase().indexOf('play/') > -1){
      $('.plp-r.sticky').css({'left': '0'})
      //$('.bpx-player-container').css({'right': 'calc(100vw - 320px - 84px)'}) //.bpx-state-paused.bpx-state-no-cursor
      $('#bilibili-player-wrap').css({'padding-right': '0', 'padding-left': 'calc(var(--right-bar-width) + 30px)'})
      $('.player-left-components').css({'padding-right': '0', 'padding-left': 'calc(var(--right-bar-width) + 30px)'})
      let lastdiv = $('.main-container>div:last')
      if(lastdiv.attr('class').indexOf('navTools')>-1){
        //lastdiv.css({'left': '6px'})
      }
    }else if(document.URL.toLowerCase().indexOf('list/') > -1){
      $('.playlist-container').css({'display': 'flex', 'flex-direction': "row-reverse"})
      $('.playlist-container--right').css({'margin-left': '0', 'margin-right': "30px"})
      let lastdiv = $('.playlist-container>div:last')
      if(lastdiv.attr('class').indexOf('sidenav')>-1){
        //lastdiv.css({'left': '6px', "right": '0'})
      }
    }else if(document.URL.toLowerCase().indexOf('video/') > -1){
      $('.video-container-v1').css({'display': 'flex', 'flex-direction': "row-reverse"})
      $('.right-container').css({'margin-left': '0', 'margin-right': "30px"})
      let lastdiv = $('.video-container-v1>div:last')
      if(lastdiv.attr('class').indexOf('sidenav')>-1){
        //lastdiv.css({'left': '6px', "right": '0'})
      }
    }
  })
})()