All Projects โ†’ nextcloud โ†’ viewer

nextcloud / viewer

Licence: AGPL-3.0 license
๐Ÿ–ผ Simple file viewer with slideshow for media

Programming Languages

184084 projects - #8 most used programming language
7211 projects
23972 projects - #3 most used programming language
32286 projects
7915 projects

Projects that are alternatives of or similar to viewer

๐Ÿ“ธ Your memories under your control
Stars: โœญ 157 (+130.88%)
Mutual labels:  photos, nextcloud, media, photo-gallery
Nativescript photo gallery app for Nextcloud
Stars: โœญ 34 (-50%)
Mutual labels:  photos, nextcloud, photo-gallery
Android Multipicker Library
Android Multipicker Library
Stars: โœญ 425 (+525%)
Mutual labels:  photos, videos
Open source google photos alternative!
Stars: โœญ 429 (+530.88%)
Mutual labels:  photos, media
Media picker
A Flutter Plugin for Selecting and Taking New Photos and Videos.
Stars: โœญ 24 (-64.71%)
Mutual labels:  photos, videos
Nextcloud app that implement a basic facial recognition system.
Stars: โœญ 226 (+232.35%)
Mutual labels:  photos, nextcloud
๐Ÿ“ธ Instagram-like image picker for Android (ไธ€ๆฌพ UI ็‚ซ้…ท้ซ˜ไปฟ Instagram ็š„ๅ›พ็‰‡ใ€่ง†้ข‘้€‰ๆ‹ฉๅ™จ)
Stars: โœญ 409 (+501.47%)
Mutual labels:  photos, photo-gallery
React Grid Gallery
Justified image gallery component for React
Stars: โœญ 571 (+739.71%)
Mutual labels:  photos, photo-gallery
Maintain a JSON database of photos and videos with their metadata
Stars: โœญ 18 (-73.53%)
Mutual labels:  photos, videos
Photato - The personal Pictures gallery
Stars: โœญ 130 (+91.18%)
Mutual labels:  photos, photo-gallery
๐ŸŒ๐ŸŒ๐ŸŒŽ The whole world fits inside your cloud!
Stars: โœญ 253 (+272.06%)
Mutual labels:  photos, nextcloud
๐Ÿ“ท QuickRawPicker is a free and open source program that lets you cull, pick or rate raw photos captured by your camera. It is also compatible with the XMP sidecar file used by Adobe Bridge/Lightroom/Darktable or PP3 sidecar file used by Rawtherapee.
Stars: โœญ 26 (-61.76%)
Mutual labels:  photos, photo-gallery
TumblTwo, an Improved Fork of TumblOne, a Tumblr Downloader.
Stars: โœญ 57 (-16.18%)
Mutual labels:  photos, videos
Dead simple solution to add a photo gallery to a Jekyll site.
Stars: โœญ 47 (-30.88%)
Mutual labels:  photos, photo-gallery
Exiftool Vendored.js
Fast, cross-platform Node.js access to ExifTool
Stars: โœญ 200 (+194.12%)
Mutual labels:  photos, videos
React Viewer
react image viewer, supports rotation, scale, zoom and so on
Stars: โœญ 502 (+638.24%)
Mutual labels:  photos, viewer
"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".
Stars: โœญ 620 (+811.76%)
Mutual labels:  photos, videos
Photo finder application for macOS
Stars: โœญ 102 (+50%)
Mutual labels:  photos, photo-gallery
Tumblr Crawler
Easily download all the photos/videos from tumblr blogs. ไธ‹่ฝฝๆŒ‡ๅฎš็š„ Tumblr ๅšๅฎขไธญ็š„ๅ›พ็‰‡๏ผŒ่ง†้ข‘
Stars: โœญ 1,118 (+1544.12%)
Mutual labels:  photos, videos
Manage local photos on Android: gallery, geotag with photomap, privacy, tags, find, sort, view, copy, send, ... .
Stars: โœญ 164 (+141.18%)
Mutual labels:  photos, photo-gallery

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!


๐Ÿ“‹ Current support

  • Images
  • Videos

๐Ÿ— Development setup

  1. โ˜ Clone this app into the apps folder of your Nextcloud: git clone
  2. ๐Ÿ‘ฉโ€๐Ÿ’ป In the folder of the app, install dependencies with npm ci and build the Javascript with npm run build.
  3. โœ… Enable the app through the app management of your Nextcloud
  4. ๐ŸŽ‰ Partytime!

๐Ÿง™ Advanced development stuff

To build the Javascript whenever you make changes, you can also run npm run dev for developement builds.


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 on WebDAV and let the viewer fetch the folder data{path: '/path/to/file.jpg'})
  1. Open a file on WebDAV and provide a list of files{
  	path: '/path/to/file.jpg',
  	list: [
  			basename: 'file.jpg',
  			filename: '/path/to/file.jpg',
// Alternative: pass known file info so it doesn't need to be fetched
const fileInfo = {
  filename: '/path/to/file.jpg',
  basename: 'file.jpg',
  mime: 'image/jpeg',
  etag: 'xyz987',
  hasPreview: true,
  fileid: 13579,
  fileinfo: fileInfo,
  list: [fileInfo],

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 use it.

  1. Open a file from an app's route
const fileInfo1 = {
  filename: '',
  basename: 'pineapple.jpg',
  source: '',
  mime: 'image/jpeg',
  etag: 'abc123',
  hasPreview: false,
  fileid: 12345,
const fileInfo2 = {
  filename: '',
  basename: 'garlic.jpg',
  source: '',
  mime: 'image/jpeg',
  etag: 'def456',
  hasPreview: false,
  fileid: 67890,
  fileInfo: fileInfo1,
  list: [fileInfo1, fileInfo2],

In order to open a shared file you will need to provide the share token so the Viewer can use it to authenticate the requests to the server. See the files_sharing app controller and template for an example.

Close the viewer


๐Ÿ” 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'
         // 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: [
         // 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. ๐Ÿ™‡โ€โ™€๏ธ
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].