pic_online's Introduction

Pic Online (pic_online_front)

用途

局域网媒体服务, 可用于图片浏览, 漫画阅读, 播放 nas 视频等...

大体功能

文件树性能优化, 对大量文件夹和文件的情况进行了定向优化

自适应浏览器和手机窗口
支持瀑布流, 图片懒加载
支持窗口大小变化时, 自动对图片布局进行调整
支持多语言
支持暗黑模式自动切换
支持视频观看
支持热键切换
支持状态持久化, 自动定位至上次浏览文件夹
文件数少时, 自动监听底层文件变化, 自动重新扫描
文件数多时, 支持手动重新扫描底层文件, 刷新即可重新获取文件列表
文件树展开优化, 默认展开当前目录及父节点, 其他节点自动折叠

部署

docker-compose
手动部署
- release 版本
  - pic_online.zip: 必须放在网站 根目录 下, 不能放在子目录下
  - pic_online_pic.zip: 必须放在网站子目录 /pic 下
- gh-pages 分支版本, 必须放在网站子目录 /pic_online 下
See：局域网媒体浏览服务搭建

预览

手机截图

桌面截图

热键

图片

←: 上一个
→: 下一个
↑: 向上滚动 1 个屏幕.
↓: 向下滚动 1 个屏幕.

a: 上一个
d: 加载更多
w: 向上滚动 1 个屏幕.
s: 向下滚动 1 个屏幕.
r: 刷新页面
q: 回到顶部
e: 下一个
0: 加载更多
Delete: 删除当前文件夹

视频

viewer 打开时

https://github.com/fengyuanchen/viewerjs#keyboard-support

Esc: 退出全屏或者关闭查看器或者退出 modal mode 或者停止播放
Space: 停止播放.
Tab: 切换 viewer 的 button 焦点.
Enter: 在焦点的 button 上面触发点击操作.
←: 上一张.
→: 下一张.
↑: 放大图片.
↓: 缩小图片.
Ctrl + 0: 重置缩放.
Ctrl + 1: 放大/缩小到图片的原始大小.

播放器打开时

Space: 暂停/开始播放
f / Enter / Ctrl Enter: 全屏/退出全屏
←: 播放进度-5s
→: 播放进度+5s
↑: 音量 +0.1
↓: 音量 -0.1
z: 重置播放速度 1.0
x: 播放速度 -0.05
c: 播放速度 +0.1

Emby

Know issues

图片 CORS 问题

注释 node_modules/vue-waterfall-plugin-next/dist/my-lib.es.js:340 行
第三方插件问题
heikaimu/vue3-waterfall-plugin#13

服务页面 node 和 service 页不可用

应该是升级到 Vue3 引发的问题, 数据正常加载, table 无数据, 未解决

To be continue...

dev

Install dependencies

npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

quasar dev

Lint the files

npm run lint

Build the app for production

quasar build

Customize the configuration

See Configuring quasar.conf.js.

Thanks

pic_online's People

Contributors

Stargazers

Watchers

pic_online's Issues

在docker中遇到跨域问题，图片加载不出来。

vendor.aceed81b.js:62 Uncaught (in promise) Error: Image failed to load!And failed src was: http://localhost:80/images/0001.png
at vendor.aceed81b.js:62:75741
at Z._log (vendor.aceed81b.js:62:76377)
at vendor.aceed81b.js:62:75724

请问，是把该项目下载后，注释 node_modules/vue-waterfall-plugin-next/dist/my-lib.es.js:340 行吗？我尝试这么做，好像还是不行。

部署总结如下

新建文件夹site_app, 然后把pic_online.zip解压后的文件放在该目录下；
在site_app目录下，创建pic文件夹，把pic_online_pic.zip解压到该目录下；
并在site_app目录下

site_app
├── cache # 缓存文件夹, 无需关心
├── images # 图片文件夹 --> 页面上需要预览的图片
├── pic # 前端文件夹
└── video # 视频文件夹  -> 页面上需要预览的视频

修改env.sh中的内容：

export NAS_DOMAIN="127.0.0.1"
export PIC_BASE_DIR=/Users/Ubuntu/Desktop/site_app
export MOLECULER_PORT=89
export MOLECULER_DDNS_ENABLE=false
export PIC_DIR=$PIC_BASE_DIR/images 
export VIDEO_DIR=$PIC_BASE_DIR/video
export PIC_POSTER_DIR=$PIC_BASE_DIR/cache
export PIC_PREFIX=http://$NAS_DOMAIN:$MOLECULER_PORT
export MOLECULER_DDNS_DOMAIN=$NAS_DOMAIN
export MOLECULER_DDNS_TOKEN=$NAS_DOMAIN
# 登陆过期时间, 单位小时
export JWT_TOKEN_EXPIRE=336

npm run start

通过PIC_BASE_DIR指定site_app的路径；
修改NAS_DOMAIN="127.0.0.1"
修改MOLECULER_DDNS_ENABLE=false

PIC_DIR指定的目录就是页面加载显示的图片资源，

sudo bash env.sh 启动