{"id":15051450,"url":"https://github.com/nextcloud/viewer","last_synced_at":"2025-04-04T13:05:48.185Z","repository":{"id":37432524,"uuid":"171536004","full_name":"nextcloud/viewer","owner":"nextcloud","description":"🖼 Simple file viewer with slideshow for media","archived":false,"fork":false,"pushed_at":"2025-03-27T02:09:10.000Z","size":530641,"stargazers_count":103,"open_issues_count":113,"forks_count":56,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-28T12:05:42.901Z","etag":null,"topics":["fileinfo","hacktoberfest","javascript","media","nextcloud","nextcloud-app","photo-gallery","photos","videos","viewer","vue","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextcloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"COPYING","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://nextcloud.com/include/"}},"created_at":"2019-02-19T19:28:31.000Z","updated_at":"2025-03-27T02:09:06.000Z","dependencies_parsed_at":"2024-04-10T23:31:21.257Z","dependency_job_id":"78a692f6-ea57-4fc3-8929-903fed19f61f","html_url":"https://github.com/nextcloud/viewer","commit_stats":{"total_commits":2033,"total_committers":64,"mean_commits":31.765625,"dds":0.751106738809641,"last_synced_commit":"ad10d3e74ca1ffae41e90a2119097b4c988c8e59"},"previous_names":[],"tags_count":582,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud%2Fviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud%2Fviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud%2Fviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcloud%2Fviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextcloud","download_url":"https://codeload.github.com/nextcloud/viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182337,"owners_count":20897379,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fileinfo","hacktoberfest","javascript","media","nextcloud","nextcloud-app","photo-gallery","photos","videos","viewer","vue","vuejs"],"created_at":"2024-09-24T21:35:20.330Z","updated_at":"2025-04-04T13:05:48.159Z","avatar_url":"https://github.com/nextcloud.png","language":"JavaScript","readme":"\u003c!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n--\u003e\n# Files viewer for nextcloud\n\n[![REUSE status](https://api.reuse.software/badge/github.com/nextcloud/viewer)](https://api.reuse.software/info/github.com/nextcloud/viewer)\n\nShow 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!\n\n![viewer](https://raw.githubusercontent.com/nextcloud/screenshots/master/apps/Viewer/viewer.png?v=2)\n\n## 📋 Current support\n- Images\n- Videos\n\n## 🏗 Development setup\n1. ☁ Clone this app into the `apps` folder of your Nextcloud: `git clone https://github.com/nextcloud/viewer.git`\n2. 👩‍💻 In the folder of the app, install dependencies with `npm ci` and build the Javascript with `npm run build`.\n3. 🎉 Partytime!\n\n### 🧙 Advanced development stuff\nTo build the Javascript whenever you make changes, you can also run `npm run dev` for development builds.\n\n### 📷 Running cypress tests\nTo run e2e cypress tests, execute `npm run cypress`.\n\nThe `visual-regression` tests require additional care as they depend on installation of fonts in the application. To achieve repeatable results run the tests using `npm run cypress:visual-regression`. This will build the app with the required fonts and run the tests.\n\nIf changes are required to the reference (base) screenshots used by the `visual-regression` tests, run `cypress:update-snapshots` and commit the updated screenshots.\n\n## API\n\n### Add the viewer to your app\nIn php, on your page, emit the LoadViewer event.\nCheck the documentation/tutorial for more info on this type of page controller sample.\n``` php\nuse OCA\\Viewer\\Event\\LoadViewer;\nuse OCP\\AppFramework\\Controller;\nuse OCP\\AppFramework\\Http\\TemplateResponse;\nuse OCP\\EventDispatcher\\IEventDispatcher;\nuse OCP\\IRequest;\n\nclass PageController extends Controller {\n\tprotected $appName;\n\n\t/** @var IEventDispatcher */\n\tprivate $eventDispatcher;\n\n\tpublic function __construct($appName,\n\t\t\t\t\t\t\t\tIRequest $request,\n\t\t\t\t\t\t\t\tIEventDispatcher $eventDispatcher) {\n\t\tparent::__construct($appName, $request);\n\n\t\t$this-\u003eappName = $appName;\n\t\t$this-\u003eeventDispatcher = $eventDispatcher;\n\t}\n\n\t/**\n\t * @NoAdminRequired\n\t * @NoCSRFRequired\n\t * Render default index template\n\t *\n\t * @return TemplateResponse\n\t */\n\tpublic function index(): TemplateResponse {\n\t\t$this-\u003eeventDispatcher-\u003edispatch(LoadViewer::class, new LoadViewer());\n\t\t$response = new TemplateResponse($this-\u003eappName, 'main');\n\t\treturn $response;\n\t}\n}\n```\nThis will load all the necessary scripts and make the Viewer accessible trough javascript at `OCA.Viewer`\n\n### Open a file\n1. Open a file on WebDAV and let the viewer fetch the folder data\n  ```js\n  OCA.Viewer.open({path: '/path/to/file.jpg'})\n  ```\n2. Open a file on WebDAV and provide a list of files\n  ```js\n  OCA.Viewer.open({\n\t\tpath: '/path/to/file.jpg',\n\t\tlist: [\n\t\t\t{\n\t\t\t\tbasename: 'file.jpg',\n\t\t\t\tfilename: '/path/to/file.jpg',\n\t\t\t\t...\n\t\t\t},\n\t\t\t...\n\t\t],\n  })\n  // Alternative: pass known file info so it doesn't need to be fetched\n  const fileInfo = {\n\tfilename: '/path/to/file.jpg',\n\tbasename: 'file.jpg',\n\tmime: 'image/jpeg',\n\tetag: 'xyz987',\n\thasPreview: true,\n\tfileid: 13579,\n  }\n  OCA.Viewer.open({\n\tfileinfo: fileInfo,\n\tlist: [fileInfo],\n  })\n  ```\n  The list parameter requires an array of fileinfo. You can check how we generate a fileinfo object [here](https://github.com/nextcloud/viewer/blob/master/src/utils/fileUtils.js#L97) from a dav PROPFIND request data. There is currently no dedicated package for it, but this is coming. You can check the [photos](https://github.com/nextcloud/photos) repository where we also use it.\n\n3. Open a file from an app's route\n  ```js\n  const fileInfo1 = {\n\tfilename: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',\n\tbasename: 'pineapple.jpg',\n\tsource: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',\n\tmime: 'image/jpeg',\n\tetag: 'abc123',\n\thasPreview: false,\n\tfileid: 12345,\n  }\n  const fileInfo2 = {\n\tfilename: 'https://next.cloud/apps/pizza/topping/garlic.jpg',\n\tbasename: 'garlic.jpg',\n\tsource: 'https://next.cloud/apps/pizza/topping/garlic.jpg',\n\tmime: 'image/jpeg',\n\tetag: 'def456',\n\thasPreview: false,\n\tfileid: 67890,\n  }\n  OCA.Viewer.open({\n\tfileInfo: fileInfo1,\n\tlist: [fileInfo1, fileInfo2],\n  })\n  ```\n\nIn order to open a shared file you will need to provide the share token\nso the Viewer can use it to authenticate the requests to the server.\nSee the `files_sharing` app\n[controller](https://github.com/nextcloud/server/blob/master/apps/files_sharing/lib/Controller/ShareController.php#L404)\nand\n[template](https://github.com/nextcloud/server/blob/master/apps/files_sharing/templates/public.php#L18)\nfor an example.\n\n### Close the viewer\n```js\nOCA.Viewer.close()\n```\n\n### 🔍 Add you own file view\nIf you want to make your app compatible with this app, you can use the `OCA.Viewer` methods\n1. Create a vue component which use the `path` and `mime` props (they will be automatically passed by the viewer)\n2. Register your mime viewer with the following:\n   ``` js\n    import VideoView from 'VideoView.vue'\n\n    OCA.Viewer.registerHandler({\n        // unique id\n        id: 'video',\n\n       // optional, it will group every view of this group and\n       // use the proper view when building the file list\n       // of the slideshow.\n       // e.g. you open an image/jpeg that have the `media` group\n       // you will be able to see the video/mpeg from the `video` handler\n       // files that also have the `media` group set.\n       group: 'media',\n\n       // the list of mimes your component is able to display\n       mimes: [\n            'video/mpeg',\n            'video/ogg',\n            'video/webm',\n            'video/mp4'\n        ],\n\n        // your vue component view\n        component: VideoView\n    })\n   ```\n3. 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. 🙇‍♀️\n","funding_links":["https://nextcloud.com/include/"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud%2Fviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextcloud%2Fviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcloud%2Fviewer/lists"}