emby美化后续折腾

GitHub - Nolovenodie/emby-crx: Emby 增强/美化 插件 (适用于 Chrome 内核浏览器 / EmbyServer)

 

 

emby美化尝试

皮蛋熊
2023-10-18/1 评论/2 点赞/6151 阅读/8117 字
温馨提示:
本文最后更新于 2023-10-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

简介

通过本文,可以美化emby和添加功能,使其看起来赏心悦目。教程同时适用于docker,pc,linux直装等emby场景,请找到对应的文件夹修改即可。

添加多种播放按钮

项目是这个 https://github.com/bpking1/embyExternalUrl,感谢bpking1大佬的付出。 成功后将有如下的排版显示:image.png

先下载上面项目,解压后将其中embyWebAddExternalUrl目录复制到emby安装目录的dashboard-ui中。 再修改dashboard-ui/index.html文件,在</head>前添加:

<link rel="stylesheet" id="theme-css" href="embyWebAddExternalUrl/icons/ExternalPlayer.css" type="text/css" media="all" />
<script src="embyWebAddExternalUrl/embyLaunchPotplayer.js"></script>
 

如下:

image.png

此时保存后刷新页面就可以看到相关的图标了。

进阶

原作者的embyLaunchPotplayer.js 中引用了js cdn的地址,有时候在某些环境下刷不出来,这里可以将其改为本地地址,具体来说就是编辑embyLaunchPotplayer.js文件将

https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/
 

去掉即可。也即是这部分:

document.querySelector("div[is='emby-scroller']:not(.hide) .icon-PotPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-PotPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-IINA").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-IINA.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MXPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-MXPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-infuse").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-infuse.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-VLC").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-VLC.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-NPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-NPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-StellarPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-StellarPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MPV").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-MPV.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-Copy").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-Copy.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
 

改为:

document.querySelector("div[is='emby-scroller']:not(.hide) .icon-PotPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-PotPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-IINA").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-IINA.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MXPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-MXPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-infuse").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-infuse.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-VLC").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-VLC.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-NPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-NPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-StellarPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-StellarPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MPV").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-MPV.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-Copy").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-Copy.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
 

再次刷新后就用的本地地址了,在所有的环境都可以把图标刷出来。

添加首页大屏

项目是这个: https://github.com/Nolovenodie/emby-crx 感谢 Nolovenodie 大佬的付出。 成功后显示如下:image.png

先下载上面项目,在每个文件夹中都找一遍,我们总共需要如下几个文件:

common-utils.js
jquery-3.6.0.min.js
main.js
md5.min.js
style.css
 

去emby的安装目录中找到dashboard-ui文件夹,在其中创建一个emby-crx文件夹: 把上面的文件全部复制进去image.png

然后修改dashboard-ui/index.html文件,在</head>前添加下面的代码:

<link rel="stylesheet" id="theme-css" href="emby-crx/style.css" type="text/css" media="all" />
<script src="emby-crx/common-utils.js"></script>
<script src="emby-crx/jquery-3.6.0.min.js"></script>
<script src="emby-crx/md5.min.js"></script>
<script src="emby-crx/main.js"></script>
 

下面这个样子就是正确的。

image.png

保存后刷新网页即可。

添加弹幕

项目是这个:https://github.com/RyoLee/dd-danmaku 感谢 RyoLee 大佬的付出。

我这里测试没有成功,等待尝试再补充上去。

最后

我更推荐直接用docker版本的,特别是这个大佬的把这些都集成了:https://hub.docker.com/r/amilys/embyserver

上面教程提供给其他平台使用的用户修改思路。

参考

  1. https://hub.docker.com/r/amilys/embyserver
  2. https://github.com/bpking1/embyExternalUrl
  3. https://github.com/Nolovenodie/emby-crx
  4. https://github.com/RyoLee/dd-danmaku
 
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

项目主页:

https://github.com/Nolovenodie/emby-crx

该主题是通过chrome插件来调用的,但是本文介绍的是如何直接安装到emby server中

以群晖emby 4.7.11举例

web ui目录为:

/volume1/@appstore/EmbyServer/system/dashboard-ui/

如果是Docker安装的,比如lovechen/embyserver

位置在:

/system/dashboard-ui/

无论你什么安装方式,你只需要找到安装目录下的index.html就找对了!比如容器就是

docker exec -it 容器ID find -name "index.html"

从作者的github库中下载源码压缩包:emby-crx-master.zip

从压缩包中提取如下文件:

common-utils.js
jquery-3.6.0.min.js
md5.min.js
style.css
main.js

把他们上传到 web ui目录 中去

然后编辑 web ui目录 中的index.html文件

在</head>前插入

<link rel='stylesheet' id='theme-css' href='style.css' type='text/css' media='all' />
<script src="common-utils.js"></script>
<script src="jquery-3.6.0.min.js"></script>
<script src="md5.min.js"></script>
<script src="main.js"></script>

刷新Emby网页即可生效

------------------------------------------------------------------------------------------------------------------------------

项目地址: https://github.com/Nolovenodie/emby-crx

 

 

 

该主题是通过chrome插件来调用的,但是本文介绍的是如何直接安装到emby server中

我这里以群晖emby 4.8.0.67举例

web ui目录为:

 

/volume1/@appstore/EmbyServer/system/dashboard-ui/


如果是Docker安装的,比如lovechen/embyserver

位置在:

 

/system/dashboard-ui/


无论你什么安装方式,你只需要找到安装目录下的index.html就找对了!比如容器就是

docker exec -it 容器ID find -name "index.html"


从作者的github库中下载源码压缩包:emby-crx-master.zip

从压缩包中提取如下文件:

 

common-utils.js
jquery-3.6.0.min.js
md5.min.js
style.css
main.js


把他们上传到 web ui目录 中去

然后编辑 web ui目录 中的index.html文件

在</head>前插入

 

<link rel='stylesheet' id='theme-css' href='style.css' type='text/css' media='all' />
<script src="common-utils.js"></script>
<script src="jquery-3.6.0.min.js"></script>
<script src="md5.min.js"></script>
<script src="main.js"></script>


 

 

 

这里会有2个坑,

第一个,上述压缩包内的5个文件可能读取权限不够就会出现500报错,web并没有变化,不能加载美化。

这里我们需要给这5个文件所有权限,我这里用的是MobaXterm直接读取文件 ,右键选择权限,并勾选全部权限,保存。(前提是登录SSH,需要root账户)

 

应用完成后刷新web网页,就成功了。

 

第二个,就是style.css需要修改

这里需要把flex修改成为none,不然在媒体库标题上会显示标题文字,从而导致只能点击标题文字才能进入标题媒体库。

 

最后展示一下emby主页美化轮播:

 

 

本文作者:很多无尾熊

本文链接:https://www.cnblogs.com/gnz48/p/18651908

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   很多无尾熊  阅读(887)  评论(1编辑  收藏  举报
历史上的今天:
2023-01-04 安卓tv YouTube客户端https://smartyoutubetv.github.io/
2023-01-04 chrom插件代理下载
本站已运行[10921759 ]
欢迎光临本站,您是第1位访问者!
楼头残梦五更钟,花底离愁三月雨。
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑
  1. 1 所念皆星河 房东的猫
  2. 2 所念皆星河 CMJ
  3. 3 热河 南京市民
  4. 4 起风了2018夏 卖辣椒也用券
  5. 5 纸短情长2018夏 烟把儿乐队
  6. 6 关于郑州的记忆 南京市民
  7. 7 定西 南京市民
  8. 8 化作樱花树 SNH48
  9. 9 化青春的约定 SNH48
  10. 10 BINGO! SNH48
  11. 11 恋爱捉迷藏 (2016 Bravery·挑战B50特殊联合公演现场) GNZ48
  12. 12 365天的纸飞机 AKB48 Team SH
  13. 13 《瞬间的永恒》夜色钢琴曲 赵海洋
  14. 14 卡农 我的野蛮女友
  15. 15 爱有天意ost 未知
  16. 16 野蛮女友ost 未知
  17. 17 野蛮女友ost 未知
  18. 18 野蛮女友ost 未知
  19. 19 野蛮女友ost 未知
  20. 20 野蛮女友ost 未知
  21. 21 我想念你...自撸管的悲伤 未知
  22. 22 在人间 未知
  23. 23 野蛮女友ost 未知
  24. 24 野蛮女友ost 未知
  25. 25 風になる つじあやの
  26. 26 潮鳴り 折戸伸治
  27. 27 青石巷 魏琮霏
  28. 28 坐在巷口的那对男女 自然卷
  29. 29 优美的小调(钢琴曲) 张宇桦
  30. 30 天之痕(钢琴版) 群星
  31. 31 花がとぶ飛ぶ 邱有句,李德奎
  32. 32 挺你 IDOL SCHOOL
  33. 33 Eternity 李墨染
  34. 34 北京东路的日子 汪源,刘千楚,徐逸昊,鲁天舒,姜玮珉,胡梦原,张鎏依,梁竞元,游彧涵,金书援,许一璇,张夙西
  35. 35 初恋サイダー Buono!
  36. 36 花朝可期——A-SOUL原创应援曲 林小暗
  37. 37 花之祭 SNH48
  38. 38 ハートサングラス 26時のマスカレイド
  39. 39 47の素敵な街へ(チーム8) AKB48
  40. 40 优美的小调(钢琴曲) 张宇桦
  41. 41 风のように S.E.N.S.
  42. 42 秋~華恋~ α·Pav
  43. 43 同窗 同窗
  44. 44 远方 同窗
  45. 45 流着泪微笑 (合唱版) 鞠婧祎,徐晨辰
  46. 46 初恋蝴蝶 中泰
  47. 47 初恋蝴蝶 jxl
纸短情长2018夏 - 烟把儿乐队
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.
哥伦布
16:09发布
哥伦布
16:09发布
3°
多云
西风
4级
空气质量
相对湿度
61%
今天
小雪
0°/6°
周日
2°/12°
周一
4°/15°