update history when opening and closing viewer

* Add the `openfile` param to the url when opening a file
* update the document title from the Mime mixin
* push the new url to the browser history
* Also update the title and push the url when moving inside a collection
* push original url to browser history state when closing the viewer

fixes server#12470

Alternatives
------------

We could pop state back to where we started when closing the viewer.
That way history would not contain urls for visited files.
In particular when navigating through collections
I think having a full history may be useful

Warning
-------

Adds the following warning:
```
/home/next/code/nextcloud/server/apps/viewer/src/mixins/Mime.js
  111:20  warning  The property or function OC.encodePath was deprecated in Nextcloud 18.0.0
```
I tried to work around it
by using encodePath from https://www.npmjs.com/package/@nextcloud/paths
But no external imports are allowed in mixins.

Next Steps
----------

* Handle popstate events so we can actually go back in history

Signed-off-by: Azul <azul@riseup.net>

src/mixins/Mime.js

@@ -102,6 +102,14 @@ export default {
 		ext() {
 			return parsePath(this.basename).ext
 		},
+		queryString() {
+			const params = OC.Util.History.parseUrlQuery()
+			const dir = params.dir
+			delete params.dir
+			delete params.fileid
+			params.openfile = this.fileid
+			return 'dir=' + OC.encodePath(dir) + '&' + OC.buildQueryString(params)
+		},
 	},
 
 	watch: {
@@ -112,6 +120,8 @@ export default {
 				if (this.isLoaded) {
 					this.doneLoading()
 				}
+				OC.Util.History.pushState(this.queryString)
+				document.title = `${this.basename} - ${OC.theme.title}`
 			}
 		},
 		// update image size on sidebar toggle
@@ -132,6 +142,10 @@ export default {
 		window.addEventListener('resize', debounce(() => {
 			this.updateHeightWidth()
 		}, 100))
+		if (this.active) {
+			OC.Util.History.pushState(this.queryString)
+			document.title = `${this.basename} - ${OC.theme.title}`
+		}
 	},
 
 	methods: {

src/views/Viewer.vue

@@ -329,7 +329,7 @@ export default {
 			const title = document.getElementsByTagName('head')[0].getElementsByTagName('title')[0]
 			if (title && !title.dataset.old) {
 				title.dataset.old = document.title
-				document.title = `${fileName} - ${OC.theme.title}`
+				title.dataset.oldQuery = location.search
 			}
 
 			try {
@@ -599,6 +599,10 @@ export default {
 				document.title = title.dataset.old
 				delete title.dataset.old
 			}
+			if (title && title.dataset.oldQuery) {
+				OC.Util.History.pushState(title.dataset.oldQuery)
+				delete title.dataset.oldQuery
+			}
 		},
 
 		/**