Skip to content

Commit a05dbf3

Browse files
ChristophWurstnextcloud-command
ChristophWurst
authored and
nextcloud-command
committed
Add support for non-dav files
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
1 parent 5394e9e commit a05dbf3

12 files changed

Lines changed: 321 additions & 92 deletions

File tree

‎README.md‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ use OCP\IRequest;
3131

3232
class PageController extends Controller {
3333
protected $appName;
34-
34+
3535
/** @var IEventDispatcher */
3636
private $eventDispatcher;
37-
37+
3838
public function __construct($appName,
3939
IRequest $request,
4040
IEventDispatcher $eventDispatcher) {
4141
parent::__construct($appName, $request);
42-
42+
4343
$this->appName = $appName;
4444
$this->eventDispatcher = $eventDispatcher;
4545
}
@@ -61,11 +61,11 @@ class PageController extends Controller {
6161
This will load all the necessary scripts and make the Viewer accessible trough javascript at `OCA.Viewer`
6262

6363
### Open a file
64-
1. Open a file and let the viewer fetch the folder data
64+
1. Open a file on WebDAV and let the viewer fetch the folder data
6565
```js
6666
OCA.Viewer.open({path: '/path/to/file.jpg'})
6767
```
68-
2. Open a file and profide a list of files
68+
2. Open a file on WebDAV and provide a list of files
6969
```js
7070
OCA.Viewer.open({
7171
path: '/path/to/file.jpg',
@@ -78,8 +78,46 @@ This will load all the necessary scripts and make the Viewer accessible trough j
7878
...
7979
],
8080
})
81+
// Alternative: pass known file info so it doesn't need to be fetched
82+
const fileInfo = {
83+
filename: '/path/to/file.jpg',
84+
basename: 'file.jpg',
85+
mime: 'image/jpeg',
86+
etag: 'xyz987',
87+
hasPreview: true,
88+
fileid: 13579,
89+
}
90+
OCA.Viewer.open({
91+
fileinfo: fileInfo,
92+
list: [fileInfo],
93+
})
94+
```
95+
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.
96+
3. Open a file from an app's route
97+
```js
98+
const fileInfo1 = {
99+
filename: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',
100+
basename: 'pineapple.jpg',
101+
source: 'https://next.cloud/apps/pizza/topping/pineapple.jpg',
102+
mime: 'image/jpeg',
103+
etag: 'abc123',
104+
hasPreview: false,
105+
fileid: 12345,
106+
}
107+
const fileInfo2 = {
108+
filename: 'https://next.cloud/apps/pizza/topping/garlic.jpg',
109+
basename: 'garlic.jpg',
110+
source: 'https://next.cloud/apps/pizza/topping/garlic.jpg',
111+
mime: 'image/jpeg',
112+
etag: 'def456',
113+
hasPreview: false,
114+
fileid: 67890,
115+
}
116+
OCA.Viewer.open({
117+
fileInfo: fileInfo1,
118+
list: [fileInfo1, fileInfo2],
119+
})
81120
```
82-
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 uses it.
83121

84122
### Close the viewer
85123
```js

‎cypress/e2e/non-dav-files.cy.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/**
2+
* @copyright 2022 Christoph Wurst <christoph@winzerhof-wurst.at>
3+
*
4+
* @author 2022 Christoph Wurst <christoph@winzerhof-wurst.at>
5+
*
6+
* @license AGPL-3.0-or-later
7+
*
8+
* This program is free software: you can redistribute it and/or modify
9+
* it under the terms of the GNU Affero General Public License as
10+
* published by the Free Software Foundation, either version 3 of the
11+
* License, or (at your option) any later version.
12+
*
13+
* This program is distributed in the hope that it will be useful,
14+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
15+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16+
* GNU Affero General Public License for more details.
17+
*
18+
* You should have received a copy of the GNU Affero General Public License
19+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
20+
*/
21+
22+
import { randHash } from '../utils/'
23+
const randUser = randHash()
24+
25+
describe('Open non-dav files in viewer', function() {
26+
before(function() {
27+
// Init user
28+
cy.nextcloudCreateUser(randUser, 'password')
29+
cy.login(randUser, 'password')
30+
31+
cy.visit('/apps/files')
32+
33+
// wait a bit for things to be settled
34+
cy.wait(1000)
35+
})
36+
after(function() {
37+
cy.logout()
38+
})
39+
40+
it('Open login background', function() {
41+
const fileInfo = {
42+
filename: '/core/img/logo/logo.png',
43+
basename: 'logo.png',
44+
mime: 'image/png',
45+
source: '/core/img/logo/logo.png',
46+
etag: 'abc',
47+
hasPreview: false,
48+
fileid: 123,
49+
}
50+
51+
cy.window().then((win) => {
52+
win.OCA.Viewer.open({
53+
fileInfo,
54+
list: [fileInfo],
55+
})
56+
})
57+
})
58+
59+
it('Does not see a loading animation', function() {
60+
cy.get('body > .viewer', { timeout: 10000 })
61+
.should('be.visible')
62+
.and('have.class', 'modal-mask')
63+
.and('not.have.class', 'icon-loading')
64+
})
65+
66+
it('See the menu icon and title on the viewer header', function() {
67+
cy.get('body > .viewer .modal-title').should('contain', 'logo.png')
68+
cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
69+
cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
70+
})
71+
72+
it('Does not see navigation arrows', function() {
73+
cy.get('body > .viewer a.prev').should('not.be.visible')
74+
cy.get('body > .viewer a.next').should('not.be.visible')
75+
})
76+
})

‎cypress/e2e/visual-regression.cy.js‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ describe('Visual regression tests ', function() {
8989
cy.get('body > .viewer a.next').click()
9090
cy.get('body > .viewer .modal-container img').should('have.length', 1)
9191
cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
92-
cy.get('body > .viewer a.next').should('be.visible')
92+
cy.get('body > .viewer a.prev').should('be.visible')
9393
cy.get('body > .viewer a.next').should('be.visible')
9494
})
9595

@@ -112,7 +112,7 @@ describe('Visual regression tests ', function() {
112112
cy.get('body > .viewer .modal-title').should('contain', 'test-card.png')
113113
cy.get('body > .viewer .modal-container img').should('have.length', 1)
114114
cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
115-
cy.get('body > .viewer a.next').should('be.visible')
115+
cy.get('body > .viewer a.prev').should('be.visible')
116116
cy.get('body > .viewer a.next').should('be.visible')
117117
})
118118

@@ -126,4 +126,39 @@ describe('Visual regression tests ', function() {
126126
it('Take test-card.png screenshot 2', function() {
127127
cy.compareSnapshot('image2')
128128
})
129+
130+
it('Open non-dav image', function() {
131+
const fileInfo = {
132+
filename: '/core/img/logo/logo.png',
133+
basename: 'logo.png',
134+
mime: 'image/png',
135+
source: '/core/img/logo/logo.png',
136+
etag: 'abc',
137+
hasPreview: false,
138+
fileid: 123,
139+
}
140+
141+
cy.window().then((win) => {
142+
win.OCA.Viewer.open({
143+
fileInfo,
144+
list: [fileInfo],
145+
})
146+
})
147+
148+
cy.get('body > .viewer .modal-container img').should('have.length', 1)
149+
cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
150+
cy.get('body > .viewer a.prev').should('not.be.visible')
151+
cy.get('body > .viewer a.next').should('not.be.visible')
152+
})
153+
154+
it('Does not see a loading animation', function() {
155+
cy.get('body > .viewer', { timeout: 10000 })
156+
.should('be.visible')
157+
.and('have.class', 'modal-mask')
158+
.and('not.have.class', 'icon-loading')
159+
})
160+
161+
it('Take non-dav logo.png screenshot', function() {
162+
cy.compareSnapshot('non-dav')
163+
})
129164
})

‎cypress/snapshots/base/visual-regression.cy.js/non-dav-base.png‎

42.5 KB
Loading

‎js/viewer-main.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/viewer-main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ImageEditor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export default {
106106
return {
107107
'data-theme-dark': true,
108108
}
109-
}
109+
},
110110
},
111111
112112
mounted() {

‎src/mixins/Mime.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ export default {
4242
type: String,
4343
required: true,
4444
},
45+
// file source to fetch contents from
46+
source: {
47+
type: String,
48+
default: undefined,
49+
},
4550
// file path relative to user folder
4651
hasPreview: {
4752
type: Boolean,

‎src/mixins/PreviewUrl.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default {
3434
previewpath() {
3535
return this.getPreviewIfAny({
3636
fileid: this.fileid,
37+
source: this.source,
3738
filename: this.filename,
3839
hasPreview: this.hasPreview,
3940
davPath: this.davPath,
@@ -60,12 +61,17 @@ export default {
6061
*
6162
* @param {object} data destructuring object
6263
* @param {string} data.fileid the file id
64+
* @param {?string} data.source the download source
6365
* @param {boolean} data.hasPreview have the file an existing preview ?
6466
* @param {string} data.davPath the absolute dav path
6567
* @param {string} data.filename the file name
6668
* @return {string} the absolute url
6769
*/
68-
getPreviewIfAny({ fileid, filename, hasPreview, davPath }) {
70+
getPreviewIfAny({ fileid, source, filename, hasPreview, davPath }) {
71+
if (source) {
72+
return source
73+
}
74+
6975
const searchParams = `fileId=${fileid}`
7076
+ `&x=${Math.floor(screen.width * devicePixelRatio)}`
7177
+ `&y=${Math.floor(screen.height * devicePixelRatio)}`

‎src/models/file.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export default function(fileInfo, mime, component) {
3333
failed: false,
3434
loaded: false,
3535
davPath: getDavPath(fileInfo),
36+
source: fileInfo.source ?? getDavPath(fileInfo),
3637
}
3738

3839
return Object.assign({}, fileInfo, data)

0 commit comments

Comments
 (0)