Make the viewer standalone

[skjnldsv]

Please have a look!

This is the first throw at making the Viewer standalone and implementing a way to call it directly.

OCA.Viewer.open('/your/path/to/image.jpg')
OCA.Viewer.close()

It is also a first throw at implementing a way to automatically build a FileInfo object. Please have a look at

viewer/src/utils/fileUtils.js

Lines 90 to 111 in cea945e

	const genFileInfo = function(obj) {
	const fileInfo = {}
	Object.keys(obj).forEach(key => {
	const data = obj[key]
	// flatten object if any
	if (typeof data === 'object') {
	Object.assign(fileInfo, genFileInfo(data))
	} else {
	// format key and add it to the fileInfo
	if (data === 'false') {
	fileInfo[camelcase(key)] = false
	} else if (data === 'true') {
	fileInfo[camelcase(key)] = true
	} else {
	fileInfo[camelcase(key)] = isNumber(data)
	? Number(data)
	: data
	}
	}
	})
	return fileInfo
	}

• Use user saved sorting key

[cypress]

---

Test summary

96 • 0 • 0 • 0

---

Run details

Project	viewer
Status	Passed
Commit	0821eb9
Started	Nov 5, 2019 10:39 PM
Ended	Nov 5, 2019 10:40 PM
Duration	00:54 💡
OS	Linux Debian - 8.11
Browser	Electron 61

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[juliusknorr]

OCA.Viewer.file = '/your/path/to/image.jpg'

Any reason you make this a property and not just methods to show the viewer with a given path? Feels a bit un-intuitive to me.

Other questions:

• Is this supposted to also work with relative paths on public share links?
• Would the viewer still automatically fetch the parent directory so the users can go though all pictues?

[skjnldsv]

Any reason you make this a property and not just methods to show the viewer with a given path? Feels a bit un-intuitive to me.

Ah, Roeland thought the same! :)

Well, this is how I implemented it on the other apis I created, like the sidebar.
It's a class getter/setter. My argument was that apps could want to get the current opened file, so they'll do OCA.Viewer.file. Therefore it felt weird to have one function to set the file OCA.Viewer.openFile(path) and OCA.Viewer.file to get the current one.

How would you have wanted it? 🤔

[juliusknorr]

How would you have wanted it?

It's just that this is nothing I've seen being done so far in javascript APIs that are somehow "public". 😉

Not sure if that is really needed anywhere but with a proper method the open call could return a promise that resolves when the viewer is properly loaded.

[skjnldsv]

Not sure if that is really needed anywhere but with a proper method the open call could return a promise that resolves when the viewer is properly loaded.

Well, I could just expose the openFile method from within the vue component yes :)
Would you find it better?

[skjnldsv]

@juliushaertl can you test text with this branch ? :)

[juliusknorr]

@juliushaertl can you test text with this branch ? :)

Still works as expected, with one issue:

• the sidebar is missing (server on master)/ throwing the following errors (server on the new sidebar branch):

vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'offsetWidth' of null"

found in

---> <Actions>
       <Modal>
         <Viewer> at src/views/Viewer.vue
           <Root>
warn @ vue.runtime.esm.js:619
logError @ vue.runtime.esm.js:1884
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6911
vue.runtime.esm.js:1888 TypeError: Cannot read property 'offsetWidth' of null
    at VueComponent.showAppsSidebar (Viewer.vue?a0e8:613)
    at VueComponent.showSidebar (Viewer.vue?a0e8:592)
    at VueComponent.execFirstAction (Modal.js:112)
    at invokeWithErrorHandling (vue.runtime.esm.js:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js:6911)
logError @ vue.runtime.esm.js:1888
globalHandleError @ vue.runtime.esm.js:1879
handleError @ vue.runtime.esm.js:1839
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2179
original._wrapper @ vue.runtime.esm.js:6911

[skjnldsv]

• the sidebar is missing (server on master)/ throwing the following errors (server on the new sidebar branch):

The button is not supposed to be shown if the sidebar is not here 🤔

viewer/src/views/Viewer.vue

Line 43 in 29dd23c

v-if="OCA.Files && OCA.Files.Sidebar"

How did you triggered this error?

[juliusknorr]

The button is not supposed to be shown if the sidebar is not here thinking

Yes the button is missing if the server is on master, the error happened with the server on the new sidebar branch when clicking the sidebar button.

[skjnldsv]

Yes the button is missing if the server is on master, the error happened with the server on the new sidebar branch when clicking the sidebar button.

ah yes! Indeed, this is not compatible with the new sidebar yet :)

[skjnldsv]

/compile amend /