Simple file viewer with slideshow for media

Simple file viewer with slideshow for media

Show your latest holiday photos and videos like in the movies. Show a glimpse of your latest novel directly from your nextcloud. Choose the best GIF of your collection thanks to the direct view of your favorites files!

Files viewer for nextcloud

Show your latest holiday photos and videos like in the movies. Show a glimpse of your latest novel directly from your nextcloud. Choose the best GIF of your collection thanks to the direct view of your favorites files!

viewer

πŸ“‹ Current support

  • Images
  • Videos

πŸ— Development setup

  1. ☁ Clone this app into the apps folder of your Nextcloud: git clone https://github.com/nextcloud/viewer.git
  2. πŸ‘©β€πŸ’» In the folder of the app, run the command make to install dependencies and build the Javascript.
  3. βœ… Enable the app through the app management of your Nextcloud
  4. πŸŽ‰ Partytime!

πŸ§™ Advanced development stuff

To build the Javascript whenever you make changes, instead of the full make you can also run make build-js.

API

Add the viewer to your app

In php, on your page, emit the LoadViewer event. Check the documentation/tutorial for more info on this type of page controller sample.

use OCA\Viewer\Event\LoadViewer;
use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\EventDispatcher\IEventDispatcher;
use OCP\IRequest;

class PageController extends Controller {
    protected $appName;

    /** @var IEventDispatcher */
    private $eventDispatcher;

    public function __construct($appName,
                                IRequest $request,
                                IEventDispatcher $eventDispatcher) {
        parent::__construct($appName, $request);

        $this->appName = $appName;
        $this->eventDispatcher = $eventDispatcher;
    }

    /**
     * @NoAdminRequired
     * @NoCSRFRequired
     * Render default index template
     *
     * @return TemplateResponse
     */
    public function index(): TemplateResponse {
        $this->eventDispatcher->dispatch(LoadViewer::class, new LoadViewer());
        $response = new TemplateResponse($this->appName, 'main');
        return $response;
    }
}

This will load all the necessary scripts and make the Viewer accessible trough javascript at OCA.Viewer

Open a file

  1. Open a file and let the viewer fetch the folder data
OCA.Viewer.open({path: '/path/to/file.jpg'})
  1. Open a file and profide a list of files
OCA.Viewer.open({
      path: '/path/to/file.jpg',
      list: [
          {
              basename: 'file.jpg',
              filename: '/path/to/file.jpg',
              ...
          },
          ...
      ],
})

The list parameter requires an array of fileinfo. You can check how we generate a fileinfo object here from a dav PROPFIND request data. There is currently no dedicated package for it, but this is coming. You can check the photos repository where we also uses it.

Close the viewer

OCA.Viewer.close()

πŸ” Add you own file view

If you want to make your app compatible with this app, you can use the OCA.Viewer methods

  1. Create a vue component which use the path and mime props (they will be automatically passed by the viewer)

  2. Register your mime viewer with the following:

     import VideoView from 'VideoView.vue'
    
     OCA.Viewer.registerHandler({
         // unique id
         id: 'video',
    
        // optional, it will group every view of this group and
        // use the proper view when building the file list
        // of the slideshow.
        // e.g. you open an image/jpeg that have the `media` group
        // you will be able to see the video/mpeg from the `video` handler
        // files that also have the `media` group set.
        group: 'media',
    
        // the list of mimes your component is able to display
        mimes: [
             'video/mpeg',
             'video/ogg',
             'video/webm',
             'video/mp4'
         ],
    
         // your vue component view
         component: VideoView
     })
  3. if you feel like your mime should be integrated on this repo, you can also create a pull request with your object on the models directory and the view on the components directory. Please have a look at what's already here and take example of it. πŸ™‡β€β™€οΈ

Download Details:

Author: nextcloud

Source Code: https://github.com/nextcloud/viewer

node nodejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Node canvas is a Cairo backed Canvas implementation for NodeJS.

node-canvas is a Cairo-backed Canvas implementation for Node.js.

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Decoding Nodejs

The main goal of this blog is to explain the β€œArchitecture of Nodejs” and to know how the Nodejs works behind the scenes. Generally, most of the server-side languages, like PHP, ASP.NET, Ruby, and including Nodejs follows multi-threaded architecture. That means for each client-side request initiates a new thread or even a new process.

Node.js for Beginners - Learn Node.js from Scratch (Step by Step)

Node.js for Beginners - Learn Node.js from Scratch (Step by Step) - Learn the basics of Node.js. This Node.js tutorial will guide you step by step so that you will learn basics and theory of every part. Learn to use Node.js like a professional. You’ll learn: Basic Of Node, Modules, NPM In Node, Event, Email, Uploading File, Advance Of Node.