pic_online

Pic Online (pic_online_front)

use

• LAN media service, can be used for picture browsing, comic reading, playing nas videos, etc...

• tg aggregation robot
• Image compression tool
• Telegraf downloader
• zfile synchronization tool
• PicOnline backend

general function

File tree performance optimization, targeted optimization for large numbers of folders and files

• Responsive browser and mobile windows
• Support waterfall flow, lazy loading of images
• Supports automatic adjustment of picture layout when window size changes
• Support multiple languages
• Support automatic switching of dark mode
• Support video viewing
• Support hotkey switching
• Supports state persistence and automatically locates the last browsed folder
• When the number of files is small, it automatically monitors changes in underlying files and automatically rescans them.
• When the number of files is large, manual rescanning of the underlying files is supported, and the file list can be re-obtained by refreshing.
• File tree expansion optimization, the current directory and parent nodes are expanded by default, and other nodes are automatically collapsed

deploy

• docker-compose

• Manual deployment

  • release version
    • pic_online.zip : must be placed in根目录of the website, not in subdirectories
    • pic_online_pic.zip : must be placed in the website subdirectory /pic
  • gh-pages branch version, must be placed in the website subdirectory /pic_online

• See: Construction of LAN media browsing service

Preview

Mobile phone screenshot

Desktop screenshot

hotkey

picture

• ←: Previous
• →: next
• ↑: Scroll up 1 screen.
• ↓: Scroll down 1 screen.

---

• Delete: Delete the current folder
• RightCtrl: Random display

video

When viewer is open

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

• Esc: Exit full screen or close the viewer or exit modal mode or stop playback
• Space: Stop playing.
• Tab: Switches the viewer's button focus.
• Enter: Trigger a click operation on the focused button.
• ←: Previous picture.
• →: Next picture.
• ↑: Enlarge image.
• ↓: Reduce image size.
• Ctrl + 0: Reset zoom.
• Ctrl + 1: Zoom in/out to the original size of the image.

When the player is open

• Space: Pause/Start playback
• f/Enter/Ctrl Enter: Full screen/Exit full screen
• ←: Playback progress-5s
• →: Playback progress +5s
• ↑: volume+0.1
• ↓: Volume-0.1
• z: reset playback speed to 1.0
• x: playback speed-0.05
• c: Playback speed +0.1

Emby

Know issues

Image CORS issue

• Comment node_modules/vue-waterfall-plugin-next/dist/my-lib.es.js:340 line
• Third party plug-in issues
• heikaimu/vue3-waterfall-plugin#13

Service page node and service page are unavailable

• It should be a problem caused by upgrading to Vue3. The data is loaded normally, but the table has no data. It is not resolved.

To be continued...

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