{"version":3,"file":"photos-src_mixins_AbortControllerMixin_js-src_mixins_FilesSelectionMixin_js-src_components_File_vue--80ca54.js?v=b8cfe2a482662b55345d","mappings":"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","sources":["webpack:///photos/src/mixins/AbortControllerMixin.js","webpack:///photos/src/mixins/FilesSelectionMixin.js","webpack:///photos/src/components/File.vue?vue&type=style&index=0&id=3470e4e4&lang=scss&scoped=true&","webpack:///photos/src/components/FilesListViewer.vue?vue&type=style&index=0&id=9bdf6efe&lang=scss&scoped=true&","webpack:///photos/src/components/TiledLayout/TiledLayout.vue?vue&type=style&index=0&id=24e4a122&scoped=true&lang=scss&","webpack:///photos/src/components/TiledLayout/TiledRows.vue?vue&type=style&index=0&id=c1815a46&lang=scss&scoped=true&","webpack:///photos/src/components/VirtualScrolling.vue?vue&type=style&index=0&id=7d847354&scoped=true&lang=scss&","webpack:///photos/src/components/File.vue?vue&type=template&id=3470e4e4&scoped=true&","webpack:///photos/src/components/File.vue","webpack:///photos/src/components/File.vue?vue&type=script&lang=js&","webpack://photos/./src/components/File.vue?ddf5","webpack://photos/./src/components/File.vue?f552","webpack:///photos/src/components/FilesListViewer.vue?vue&type=template&id=9bdf6efe&scoped=true&","webpack:///photos/node_modules/vue-material-design-icons/PackageVariant.vue","webpack:///photos/node_modules/vue-material-design-icons/PackageVariant.vue?vue&type=script&lang=js&","webpack://photos/./node_modules/vue-material-design-icons/PackageVariant.vue?692c","webpack:///photos/node_modules/vue-material-design-icons/PackageVariant.vue?vue&type=template&id=9a5ab29c&","webpack:///photos/src/services/TiledLayout.js","webpack:///photos/src/components/TiledLayout/TiledRows.vue?vue&type=template&id=c1815a46&scoped=true&functional=true&","webpack://photos/./src/components/TiledLayout/TiledRows.vue?8116","webpack:///photos/src/components/TiledLayout/TiledLayout.vue","webpack:///photos/src/components/TiledLayout/TiledLayout.vue?vue&type=script&lang=js&","webpack:///photos/src/components/TiledLayout/TiledRows.vue","webpack://photos/./src/components/TiledLayout/TiledLayout.vue?52be","webpack://photos/./src/components/TiledLayout/TiledLayout.vue?5c93","webpack:///photos/src/components/TiledLayout/TiledLayout.vue?vue&type=template&id=24e4a122&scoped=true&","webpack:///photos/src/components/VirtualScrolling.vue?vue&type=template&id=7d847354&scoped=true&","webpack:///photos/src/components/VirtualScrolling.vue","webpack:///photos/src/components/VirtualScrolling.vue?vue&type=script&lang=js&","webpack://photos/./src/components/VirtualScrolling.vue?14d9","webpack://photos/./src/components/VirtualScrolling.vue?6e3f","webpack:///photos/src/components/FilesListViewer.vue","webpack:///photos/src/components/FilesListViewer.vue?vue&type=script&lang=js&","webpack://photos/./src/components/FilesListViewer.vue?8e3b","webpack://photos/./src/components/FilesListViewer.vue?5a4f"],"sourcesContent":["/**\n * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>\n *\n * @author Louis Chemineau <louis@chmn.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nexport default {\n\tname: 'AbortControllerMixin',\n\n\tdata() {\n\t\treturn {\n\t\t\tabortController: new AbortController(),\n\t\t}\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.abortController.abort()\n\t},\n\n\tbeforeRouteLeave(from, to, next) {\n\t\tthis.abortController.abort()\n\t\tthis.abortController = new AbortController()\n\t\tnext()\n\t},\n}\n","/**\n * @copyright Copyright (c) 2019 Louis Chemineau <louis@chmn.me>\n *\n * @author Louis Chemineau <louis@chmn.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\nexport default {\n\tname: 'FilesSelectionMixin',\n\n\tdata() {\n\t\treturn {\n\t\t\t/** @type {Object<string, boolean>} */\n\t\t\tselection: {},\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonFileSelectToggle({ id, value }) {\n\t\t\tthis.$set(this.selection, id, value)\n\t\t},\n\n\t\t/**\n\t\t * @param {string[]} filesIds - The ids of the files to uncheck.\n\t\t */\n\t\tonUncheckFiles(filesIds) {\n\t\t\tfilesIds.forEach((/** @type {string} */ filesId) => this.$set(this.selection, filesId, false))\n\t\t},\n\n\t\tresetSelection() {\n\t\t\tthis.selection = {}\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {string[]}\n\t\t */\n\t\tselectedFileIds() {\n\t\t\treturn Object.keys(this.selection).filter(fileId => this.selection[fileId])\n\t\t},\n\t},\n}\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".file-container[data-v-3470e4e4]{background:var(--color-primary-light);position:relative;height:100%;width:100%;border:2px solid var(--color-main-background);box-sizing:border-box}.file-container.selected[data-v-3470e4e4]::after,.file-container[data-v-3470e4e4]:focus-within::after{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;content:\\\"\\\";outline:var(--color-primary) solid 4px;outline-offset:-4px;pointer-events:none}.file-container .file[data-v-3470e4e4]{width:100%;height:100%;box-sizing:border-box;outline:none;display:flex}.file-container .file__images[data-v-3470e4e4]{display:contents}.file-container .file__images .video-icon[data-v-3470e4e4]{position:absolute;top:0px;right:0px;width:100%;height:100%;z-index:1;opacity:.8}.file-container .file__images .video-icon[data-v-3470e4e4]  .material-design-icon__svg{fill:var(--color-main-background)}.file-container .file__images img[data-v-3470e4e4]{width:100%;height:100%;object-fit:cover;position:absolute;color:rgba(0,0,0,0)}.file-container .file__images .loading-overlay[data-v-3470e4e4]{position:absolute;height:100%;width:100%;display:flex;align-content:center;align-items:center;justify-content:center}.file-container .file__images .loading-overlay svg[data-v-3470e4e4]{width:70%;height:70%}.file-container .file__hidden-description[data-v-3470e4e4]{position:absolute;left:-10000px;top:-10000px;width:1px;height:1px;overflow:hidden}.file-container .file__hidden-description.show[data-v-3470e4e4]{position:initial;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.file-container:hover .selection-checkbox[data-v-3470e4e4],.file-container.selected .selection-checkbox[data-v-3470e4e4],.file-container:focus-within .selection-checkbox[data-v-3470e4e4]{display:flex}.file-container:hover .favorite-state[data-v-3470e4e4],.file-container.selected .favorite-state[data-v-3470e4e4],.file-container:focus-within .favorite-state[data-v-3470e4e4]{display:none}.file-container .selection-checkbox[data-v-3470e4e4]{display:none;position:absolute;top:8px;right:min(22px,50% - 7px);z-index:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.file-container .selection-checkbox[data-v-3470e4e4]  .checkbox-radio-switch__label{padding:10px;box-sizing:border-box}.file-container .selection-checkbox[data-v-3470e4e4]  .checkbox-radio-switch__label::after{content:\\\"\\\";background:var(--color-primary-light);width:16px;height:16px;position:absolute;left:14px;z-index:-1}.file-container .selection-checkbox[data-v-3470e4e4]  .checkbox-radio-switch__label .checkbox-radio-switch__icon{margin:0}.file-container .selection-checkbox .input-label[data-v-3470e4e4]{position:fixed;z-index:-1;top:-5000px;left:-5000px}.file-container .favorite-state[data-v-3470e4e4]{position:absolute;top:2px;right:min(2px,50% - 7px)}.file-container .favorite-state[data-v-3470e4e4]  .material-design-icon__svg{fill:#fc0}.file-container .favorite-state[data-v-3470e4e4]  .material-design-icon__svg path{stroke:var(--color-primary-light);stroke-width:1px}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/File.vue\"],\"names\":[],\"mappings\":\"AA6NA,iCACC,qCAAA,CACA,iBAAA,CACA,WAAA,CACA,UAAA,CACA,6CAAA,CACA,qBAAA,CAIC,sGACC,iBAAA,CACA,KAAA,CACA,MAAA,CACA,SAAA,CACA,UAAA,CACA,WAAA,CACA,UAAA,CACA,sCAAA,CACA,mBAAA,CACA,mBAAA,CAIF,uCACC,UAAA,CACA,WAAA,CACA,qBAAA,CACA,YAAA,CACA,YAAA,CAEA,+CACC,gBAAA,CAEA,2DACC,iBAAA,CACA,OAAA,CACA,SAAA,CACA,UAAA,CACA,WAAA,CACA,SAAA,CACA,UAAA,CAEA,uFACC,iCAAA,CAIF,mDACC,UAAA,CACA,WAAA,CACA,gBAAA,CACA,iBAAA,CACA,mBAAA,CAGD,gEACC,iBAAA,CACA,WAAA,CACA,UAAA,CACA,YAAA,CACA,oBAAA,CACA,kBAAA,CACA,sBAAA,CAEA,oEACC,SAAA,CACA,UAAA,CAKH,2DACC,iBAAA,CACA,aAAA,CACA,YAAA,CACA,SAAA,CACA,UAAA,CACA,eAAA,CAEA,gEACC,gBAAA,CACA,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,0BAAA,CAAA,uBAAA,CAAA,kBAAA,CAOF,2LACC,YAAA,CAGD,+KACC,YAAA,CAIF,qDACC,YAAA,CACA,iBAAA,CACA,OAAA,CAEA,yBAAA,CACA,SAAA,CACA,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CAGA,oFACC,YAAA,CACA,qBAAA,CAGA,2FACC,UAAA,CACA,qCAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,SAAA,CACA,UAAA,CAGD,iHACC,QAAA,CAIF,kEACC,cAAA,CACA,UAAA,CACA,WAAA,CACA,YAAA,CAIF,iDACC,iBAAA,CACA,OAAA,CAEA,wBAAA,CAEA,6EACC,SAAA,CAEA,kFACC,iCAAA,CACA,gBAAA\",\"sourcesContent\":[\"$sizes: (\\\"400\\\": (\\\"count\\\": 3, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"700\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"1024\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1280\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1440\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"1600\\\": (\\\"count\\\": 6, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2048\\\": (\\\"count\\\": 7, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2560\\\": (\\\"count\\\": 8, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"3440\\\": (\\\"count\\\": 9, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"max\\\": (\\\"count\\\": 10, \\\"marginTop\\\": 88, \\\"marginW\\\": 88));\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n.file-container {\\n\\tbackground: var(--color-primary-light);\\n\\tposition: relative;\\n\\theight: 100%;\\n\\twidth: 100%;\\n\\tborder: 2px solid var(--color-main-background); // Use border so create a separation between images.\\n\\tbox-sizing: border-box;\\n\\n\\t// Selection border.\\n\\t&.selected, &:focus-within {\\n\\t\\t&::after {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\tz-index: 2;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tcontent: '';\\n\\t\\t\\toutline: var(--color-primary) solid 4px;\\n\\t\\t\\toutline-offset: -4px;\\n\\t\\t\\tpointer-events: none;\\n\\t\\t}\\n\\t}\\n\\n\\t.file {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t\\tbox-sizing: border-box;\\n\\t\\toutline: none; // Override global focus state.\\n\\t\\tdisplay: flex; // Fill parent size\\n\\n\\t\\t&__images {\\n\\t\\t\\tdisplay: contents;\\n\\n\\t\\t\\t.video-icon {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\ttop: 0px;\\n\\t\\t\\t\\tright: 0px;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tz-index: 1;\\n\\t\\t\\t\\topacity: 0.8;\\n\\n\\t\\t\\t\\t::v-deep .material-design-icon__svg {\\n\\t\\t\\t\\t\\tfill: var(--color-main-background);\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\n\\t\\t\\timg {\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\tobject-fit: cover;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tcolor: transparent; /// Hide alt='' text when loading.\\n\\t\\t\\t}\\n\\n\\t\\t\\t.loading-overlay {\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\theight: 100%;\\n\\t\\t\\t\\twidth: 100%;\\n\\t\\t\\t\\tdisplay: flex;\\n\\t\\t\\t\\talign-content: center;\\n\\t\\t\\t\\talign-items: center;\\n\\t\\t\\t\\tjustify-content: center;\\n\\n\\t\\t\\t\\tsvg {\\n\\t\\t\\t\\t\\twidth: 70%;\\n\\t\\t\\t\\t\\theight: 70%;\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t&__hidden-description {\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\tleft: -10000px;\\n\\t\\t\\ttop: -10000px;\\n\\t\\t\\twidth: 1px;\\n\\t\\t\\theight: 1px;\\n\\t\\t\\toverflow: hidden;\\n\\n\\t\\t\\t&.show {\\n\\t\\t\\t\\tposition: initial;\\n\\t\\t\\t\\twidth: fit-content;\\n\\t\\t\\t\\theight: fit-content;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n\\n\\t// Reveal checkbox on hover.\\n\\t&:hover, &.selected, &:focus-within {\\n\\t\\t.selection-checkbox {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\n\\t\\t.favorite-state {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t}\\n\\n\\t.selection-checkbox {\\n\\t\\tdisplay: none;\\n\\t\\tposition: absolute;\\n\\t\\ttop: 8px;\\n\\t\\t// Fancy calculation to render the checkbox in the middle of narrow images.\\n\\t\\tright: min(22px, calc(50% - 7px));\\n\\t\\tz-index: 1;\\n\\t\\twidth: fit-content;\\n\\n\\t\\t// Make the checkbox background round on hover.\\n\\t\\t::v-deep .checkbox-radio-switch__label {\\n\\t\\t\\tpadding: 10px;\\n\\t\\t\\tbox-sizing: border-box;\\n\\n\\t\\t\\t// Add a background to the checkbox so we do not see the image through it.\\n\\t\\t\\t&::after {\\n\\t\\t\\t\\tcontent: '';\\n\\t\\t\\t\\tbackground: var(--color-primary-light);\\n\\t\\t\\t\\twidth: 16px;\\n\\t\\t\\t\\theight: 16px;\\n\\t\\t\\t\\tposition: absolute;\\n\\t\\t\\t\\tleft: 14px;\\n\\t\\t\\t\\tz-index: -1;\\n\\t\\t\\t}\\n\\n\\t\\t\\t.checkbox-radio-switch__icon {\\n\\t\\t\\t\\tmargin: 0;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.input-label {\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: -1;\\n\\t\\t\\ttop: -5000px;\\n\\t\\t\\tleft: -5000px;\\n\\t\\t}\\n\\t}\\n\\n\\t.favorite-state {\\n\\t\\tposition: absolute;\\n\\t\\ttop: 2px;\\n\\t\\t// Fancy calculation to render the start in the middle of narrow images.\\n\\t\\tright: min(2px, calc(50% - 7px));\\n\\n\\t\\t::v-deep .material-design-icon__svg {\\n\\t\\t\\tfill: #FC0;\\n\\n\\t\\t\\tpath {\\n\\t\\t\\t\\tstroke: var(--color-primary-light);\\n\\t\\t\\t\\tstroke-width: 1px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t}\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".files-list-viewer[data-v-9bdf6efe]{height:100%;position:relative}.files-list-viewer__placeholder[data-v-9bdf6efe]{background:var(--color-primary-light);width:100%;height:100%;border:2px solid var(--color-main-background)}.files-list-viewer .tiled-container[data-v-9bdf6efe]{flex-basis:0}.files-list-viewer .tiled-container .tiled-row[data-v-9bdf6efe]{display:flex}.files-list-viewer__section-header[data-v-9bdf6efe]{position:-webkit-sticky;position:sticky;top:0;z-index:3;background:var(--color-main-background)}.files-list-viewer__loader[data-v-9bdf6efe]{margin:50px 0}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/FilesListViewer.vue\"],\"names\":[],\"mappings\":\"AAoPA,oCACC,WAAA,CACA,iBAAA,CAEA,iDACC,qCAAA,CACA,UAAA,CACA,WAAA,CACA,6CAAA,CAGD,qDACC,YAAA,CAEA,gEACC,YAAA,CAIF,oDACC,uBAAA,CAAA,eAAA,CACA,KAAA,CACA,SAAA,CACA,uCAAA,CAGD,4CACC,aAAA\",\"sourcesContent\":[\"$sizes: (\\\"400\\\": (\\\"count\\\": 3, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"700\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"1024\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1280\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1440\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"1600\\\": (\\\"count\\\": 6, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2048\\\": (\\\"count\\\": 7, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2560\\\": (\\\"count\\\": 8, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"3440\\\": (\\\"count\\\": 9, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"max\\\": (\\\"count\\\": 10, \\\"marginTop\\\": 88, \\\"marginW\\\": 88));\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n.files-list-viewer {\\n\\theight: 100%;\\n\\tposition: relative;\\n\\n\\t&__placeholder {\\n\\t\\tbackground: var(--color-primary-light);\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t\\tborder: 2px solid var(--color-main-background); // Use border so create a separation between images.\\n\\t}\\n\\n\\t.tiled-container {\\n\\t\\tflex-basis: 0;\\n\\n\\t\\t.tiled-row {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t}\\n\\n\\t&__section-header {\\n\\t\\tposition: sticky;\\n\\t\\ttop: 0;\\n\\t\\tz-index: 3;\\n\\t\\tbackground: var(--color-main-background);\\n\\t}\\n\\n\\t&__loader {\\n\\t\\tmargin: 50px 0;\\n\\t}\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".tiled-container[data-v-24e4a122]{height:100%}.tiled-container .tiled-row[data-v-24e4a122]{display:flex}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/TiledLayout/TiledLayout.vue\"],\"names\":[],\"mappings\":\"AA8FA,kCACC,WAAA,CAEA,6CACC,YAAA\",\"sourcesContent\":[\"$sizes: (\\\"400\\\": (\\\"count\\\": 3, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"700\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"1024\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1280\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1440\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"1600\\\": (\\\"count\\\": 6, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2048\\\": (\\\"count\\\": 7, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2560\\\": (\\\"count\\\": 8, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"3440\\\": (\\\"count\\\": 9, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"max\\\": (\\\"count\\\": 10, \\\"marginTop\\\": 88, \\\"marginW\\\": 88));\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n.tiled-container {\\n\\theight: 100%;\\n\\n\\t.tiled-row {\\n\\t\\tdisplay: flex;\\n\\t}\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".tiled-row[data-v-c1815a46]{display:flex}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/TiledLayout/TiledRows.vue\"],\"names\":[],\"mappings\":\"AAsCA,4BACC,YAAA\",\"sourcesContent\":[\"$sizes: (\\\"400\\\": (\\\"count\\\": 3, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"700\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"1024\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1280\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1440\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"1600\\\": (\\\"count\\\": 6, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2048\\\": (\\\"count\\\": 7, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2560\\\": (\\\"count\\\": 8, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"3440\\\": (\\\"count\\\": 9, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"max\\\": (\\\"count\\\": 10, \\\"marginTop\\\": 88, \\\"marginW\\\": 88));\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n.tiled-row {\\n\\tdisplay: flex;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".vs-container[data-v-7d847354]{overflow-y:scroll;height:100%}.vs-rows-container[data-v-7d847354]{box-sizing:border-box}\", \"\",{\"version\":3,\"sources\":[\"webpack://./src/components/VirtualScrolling.vue\"],\"names\":[],\"mappings\":\"AAkTA,+BACC,iBAAA,CACA,WAAA,CAGD,oCACC,qBAAA\",\"sourcesContent\":[\"$sizes: (\\\"400\\\": (\\\"count\\\": 3, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"700\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 8), \\\"1024\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1280\\\": (\\\"count\\\": 4, \\\"marginTop\\\": 66, \\\"marginW\\\": 44), \\\"1440\\\": (\\\"count\\\": 5, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"1600\\\": (\\\"count\\\": 6, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2048\\\": (\\\"count\\\": 7, \\\"marginTop\\\": 88, \\\"marginW\\\": 66), \\\"2560\\\": (\\\"count\\\": 8, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"3440\\\": (\\\"count\\\": 9, \\\"marginTop\\\": 88, \\\"marginW\\\": 88), \\\"max\\\": (\\\"count\\\": 10, \\\"marginTop\\\": 88, \\\"marginW\\\": 88));\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n.vs-container {\\n\\toverflow-y: scroll;\\n\\theight: 100%;\\n}\\n\\n.vs-rows-container {\\n\\tbox-sizing: border-box;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"file-container\",class:{selected: _vm.selected},attrs:{\"data-test\":\"media\"}},[_c('a',{staticClass:\"file\",attrs:{\"href\":_vm.file.source,\"aria-label\":_vm.ariaLabel},on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.emitClick.apply(null, arguments)}}},[_c('div',{staticClass:\"file__images\"},[(_vm.file.mime.includes('video'))?_c('VideoIcon',{staticClass:\"video-icon\",attrs:{\"size\":64}}):_vm._e(),_vm._v(\" \"),(_vm.visibility !== 'none' && _vm.canLoad && !_vm.error)?_c('img',{key:((_vm.file.basename) + \"-near\"),ref:\"imgNear\",attrs:{\"src\":_vm.srcNear,\"alt\":_vm.file.basename,\"aria-describedby\":_vm.ariaDescription},on:{\"load\":_vm.onLoad,\"error\":_vm.onError}}):_vm._e(),_vm._v(\" \"),(_vm.visibility === 'visible' && _vm.canLoad && !_vm.error)?_c('img',{key:((_vm.file.basename) + \"-visible\"),ref:\"imgVisible\",attrs:{\"src\":_vm.srcVisible,\"alt\":_vm.file.basename,\"aria-describedby\":_vm.ariaDescription},on:{\"load\":_vm.onLoad,\"error\":_vm.onError}}):_vm._e()],1),_vm._v(\" \"),_c('p',{staticClass:\"file__hidden-description\",class:{show: _vm.error},attrs:{\"id\":_vm.ariaDescription}},[_vm._v(_vm._s(_vm.file.basename))])]),_vm._v(\" \"),(_vm.allowSelection)?_c('NcCheckboxRadioSwitch',{staticClass:\"selection-checkbox\",attrs:{\"checked\":_vm.selected},on:{\"update:checked\":_vm.onToggle}},[_c('span',{staticClass:\"input-label\"},[_vm._v(_vm._s(_vm.t('photos', 'Select image {imageName}', {imageName: _vm.file.basename})))])]):_vm._e(),_vm._v(\" \"),(_vm.file.favorite === 1)?_c('Star',{staticClass:\"favorite-state\",attrs:{\"aria-label\":_vm.t('photos', 'The file is in the favorites')}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!--\n - @copyright Copyright (c) 2020 Corentin Mors\n -\n - @license AGPL-3.0-or-later\n -\n - @author Corentin Mors <medias@pixelswap.fr>\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<template>\n\t<div class=\"file-container\"\n\t\tdata-test=\"media\"\n\t\t:class=\"{selected}\">\n\t\t<a class=\"file\"\n\t\t\t:href=\"file.source\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t@click.stop.prevent=\"emitClick\">\n\n\t\t\t<!-- image and loading placeholder -->\n\t\t\t<div class=\"file__images\">\n\t\t\t\t<VideoIcon v-if=\"file.mime.includes('video')\" class=\"video-icon\" :size=\"64\" />\n\n\t\t\t\t<img v-if=\"visibility !== 'none' && canLoad && !error\"\n\t\t\t\t\tref=\"imgNear\"\n\t\t\t\t\t:key=\"`${file.basename}-near`\"\n\t\t\t\t\t:src=\"srcNear\"\n\t\t\t\t\t:alt=\"file.basename\"\n\t\t\t\t\t:aria-describedby=\"ariaDescription\"\n\t\t\t\t\t@load=\"onLoad\"\n\t\t\t\t\t@error=\"onError\">\n\n\t\t\t\t<img v-if=\"visibility === 'visible' && canLoad && !error\"\n\t\t\t\t\tref=\"imgVisible\"\n\t\t\t\t\t:key=\"`${file.basename}-visible`\"\n\t\t\t\t\t:src=\"srcVisible\"\n\t\t\t\t\t:alt=\"file.basename\"\n\t\t\t\t\t:aria-describedby=\"ariaDescription\"\n\t\t\t\t\t@load=\"onLoad\"\n\t\t\t\t\t@error=\"onError\">\n\t\t\t</div>\n\n\t\t\t<!-- image description -->\n\t\t\t<p :id=\"ariaDescription\" class=\"file__hidden-description\" :class=\"{show: error}\">{{ file.basename }}</p>\n\t\t</a>\n\n\t\t<NcCheckboxRadioSwitch v-if=\"allowSelection\"\n\t\t\tclass=\"selection-checkbox\"\n\t\t\t:checked=\"selected\"\n\t\t\t@update:checked=\"onToggle\">\n\t\t\t<span class=\"input-label\">{{ t('photos', 'Select image {imageName}', {imageName: file.basename}) }}</span>\n\t\t</NcCheckboxRadioSwitch>\n\n\t\t<Star v-if=\"file.favorite === 1\" class=\"favorite-state\" :aria-label=\"t('photos', 'The file is in the favorites')\" />\n\t</div>\n</template>\n\n<script>\nimport Star from 'vue-material-design-icons/Star'\nimport VideoIcon from 'vue-material-design-icons/Video.vue'\n\nimport { generateUrl } from '@nextcloud/router'\nimport { NcCheckboxRadioSwitch } from '@nextcloud/vue'\n\nimport UserConfig from '../mixins/UserConfig.js'\nimport Semaphore from '../utils/semaphoreWithPriority.js'\n\nexport default {\n\tname: 'File',\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tStar,\n\t\tVideoIcon,\n\t},\n\tmixins: [UserConfig],\n\tinheritAttrs: false,\n\tprops: {\n\t\tfile: {\n\t\t\ttype: Object,\n\t\t\trequired: true,\n\t\t},\n\t\tselected: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tallowSelection: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tvisibility: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\tsemaphore: {\n\t\t\ttype: Semaphore,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tloaded: false,\n\t\t\terror: false,\n\t\t\tcanLoad: false,\n\t\t\tsemaphoreSymbol: null,\n\t\t\tisDestroyed: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {string} */\n\t\tariaDescription() {\n\t\t\treturn `image-description-${this.file.fileid}`\n\t\t},\n\t\t/** @return {string} */\n\t\tariaLabel() {\n\t\t\treturn t('photos', 'Open the full size \"{name}\" image', { name: this.file.basename })\n\t\t},\n\t\t/** @return {boolean} */\n\t\tisImage() {\n\t\t\treturn this.file.mime.startsWith('image')\n\t\t},\n\t\t/** @return {string} */\n\t\tdecodedEtag() {\n\t\t\treturn this.file.etag.replace('&quot;', '').replace('&quot;', '')\n\t\t},\n\t\t/** @return {string} */\n\t\tsrcVisible() {\n\t\t\treturn this.getItemURL(512)\n\t\t},\n\t\t/** @return {string} */\n\t\tsrcNear() {\n\t\t\treturn this.getItemURL(64)\n\t\t},\n\t},\n\n\tmounted() {\n\t\t// Don't render the component right away as it is useless if the user is only scrolling\n\t\tsetTimeout(async () => {\n\t\t\tthis.semaphoreSymbol = await this.semaphore.acquire(() => {\n\t\t\t\tswitch (this.visibility) {\n\t\t\t\tcase 'visible':\n\t\t\t\t\treturn 1\n\t\t\t\tcase 'near':\n\t\t\t\t\treturn 2\n\t\t\t\tdefault:\n\t\t\t\t\treturn 3\n\t\t\t\t}\n\t\t\t}, this.file.fileid)\n\n\t\t\tthis.canLoad = true\n\t\t\tif (this.visibility === 'none' || this.isDestroyed) {\n\t\t\t\tthis.releaseSemaphore()\n\t\t\t}\n\t\t}, 250)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.isDestroyed = true\n\t\tthis.releaseSemaphore()\n\n\t\t// cancel any pending load\n\t\tif (this.$refs.imgNear !== undefined) {\n\t\t\tthis.$refs.imgNear.src = ''\n\t\t}\n\t\tif (this.$refs.srcVisible !== undefined) {\n\t\t\tthis.$refs.srcVisible.src = ''\n\t\t}\n\t},\n\n\tmethods: {\n\t\temitClick() {\n\t\t\tthis.$emit('click', this.file.fileid)\n\t\t},\n\n\t\t/** When the image is fully loaded by browser we remove the placeholder */\n\t\tonLoad() {\n\t\t\tthis.loaded = true\n\t\t\tthis.releaseSemaphore()\n\t\t},\n\n\t\tonError() {\n\t\t\tthis.error = true\n\t\t\tthis.releaseSemaphore()\n\t\t},\n\n\t\tonToggle(value) {\n\t\t\tthis.$emit('select-toggled', { id: this.file.fileid, value })\n\t\t},\n\n\t\tgetItemURL(size) {\n\t\t\treturn generateUrl(`/apps/photos/api/v1/preview/${this.file.fileid}?x=${size}&y=${size}`)\n\n\t\t},\n\n\t\treleaseSemaphore() {\n\t\t\tif (this.semaphoreSymbol === null) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.semaphore.release(this.semaphoreSymbol)\n\t\t\tthis.semaphoreSymbol = null\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.file-container {\n\tbackground: var(--color-primary-light);\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tborder: 2px solid var(--color-main-background); // Use border so create a separation between images.\n\tbox-sizing: border-box;\n\n\t// Selection border.\n\t&.selected, &:focus-within {\n\t\t&::after {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\tz-index: 2;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\toutline: var(--color-primary) solid 4px;\n\t\t\toutline-offset: -4px;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.file {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t\toutline: none; // Override global focus state.\n\t\tdisplay: flex; // Fill parent size\n\n\t\t&__images {\n\t\t\tdisplay: contents;\n\n\t\t\t.video-icon {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0px;\n\t\t\t\tright: 0px;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tz-index: 1;\n\t\t\t\topacity: 0.8;\n\n\t\t\t\t::v-deep .material-design-icon__svg {\n\t\t\t\t\tfill: var(--color-main-background);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\timg {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\tposition: absolute;\n\t\t\t\tcolor: transparent; /// Hide alt='' text when loading.\n\t\t\t}\n\n\t\t\t.loading-overlay {\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tsvg {\n\t\t\t\t\twidth: 70%;\n\t\t\t\t\theight: 70%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__hidden-description {\n\t\t\tposition: absolute;\n\t\t\tleft: -10000px;\n\t\t\ttop: -10000px;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\n\t\t\t&.show {\n\t\t\t\tposition: initial;\n\t\t\t\twidth: fit-content;\n\t\t\t\theight: fit-content;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Reveal checkbox on hover.\n\t&:hover, &.selected, &:focus-within {\n\t\t.selection-checkbox {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.favorite-state {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.selection-checkbox {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\ttop: 8px;\n\t\t// Fancy calculation to render the checkbox in the middle of narrow images.\n\t\tright: min(22px, calc(50% - 7px));\n\t\tz-index: 1;\n\t\twidth: fit-content;\n\n\t\t// Make the checkbox background round on hover.\n\t\t::v-deep .checkbox-radio-switch__label {\n\t\t\tpadding: 10px;\n\t\t\tbox-sizing: border-box;\n\n\t\t\t// Add a background to the checkbox so we do not see the image through it.\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tbackground: var(--color-primary-light);\n\t\t\t\twidth: 16px;\n\t\t\t\theight: 16px;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 14px;\n\t\t\t\tz-index: -1;\n\t\t\t}\n\n\t\t\t.checkbox-radio-switch__icon {\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t}\n\n\t\t.input-label {\n\t\t\tposition: fixed;\n\t\t\tz-index: -1;\n\t\t\ttop: -5000px;\n\t\t\tleft: -5000px;\n\t\t}\n\t}\n\n\t.favorite-state {\n\t\tposition: absolute;\n\t\ttop: 2px;\n\t\t// Fancy calculation to render the start in the middle of narrow images.\n\t\tright: min(2px, calc(50% - 7px));\n\n\t\t::v-deep .material-design-icon__svg {\n\t\t\tfill: #FC0;\n\n\t\t\tpath {\n\t\t\t\tstroke: var(--color-primary-light);\n\t\t\t\tstroke-width: 1px;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./File.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./File.vue?vue&type=script&lang=js&\"","\n      import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./File.vue?vue&type=style&index=0&id=3470e4e4&lang=scss&scoped=true&\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./File.vue?vue&type=style&index=0&id=3470e4e4&lang=scss&scoped=true&\";\n       export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./File.vue?vue&type=template&id=3470e4e4&scoped=true&\"\nimport script from \"./File.vue?vue&type=script&lang=js&\"\nexport * from \"./File.vue?vue&type=script&lang=js&\"\nimport style0 from \"./File.vue?vue&type=style&index=0&id=3470e4e4&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3470e4e4\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"files-list-viewer\"},[(_vm.emptyMessage !== '' && _vm.items.length === 0 && !_vm.loading)?_c('NcEmptyContent',{key:\"emptycontent\",attrs:{\"title\":_vm.emptyMessage}},[_c('PackageVariant',{attrs:{\"slot\":\"icon\"},slot:\"icon\"})],1):_vm._e(),_vm._v(\" \"),_c('TiledLayout',{attrs:{\"base-height\":_vm.baseHeight,\"items\":_vm.items},scopedSlots:_vm._u([{key:\"default\",fn:function(ref){\nvar rows = ref.rows;\nreturn _c('VirtualScrolling',{attrs:{\"use-window\":_vm.useWindow,\"container-element\":_vm.containerElement,\"rows\":rows,\"scroll-to-key\":_vm.scrollToSection},on:{\"need-content\":_vm.needContent},scopedSlots:_vm._u([{key:\"default\",fn:function(ref){\nvar renderedRows = ref.renderedRows;\nreturn _c('ul',{},_vm._l((renderedRows),function(row){return _c('div',{key:row.key,staticClass:\"tiled-row\",class:{'files-list-viewer__section-header': row.items[0].sectionHeader},style:({height: ((row.height) + \"px\")})},_vm._l((row.items),function(item){return _c('li',{key:item.id,style:({ width: item.ratio ? ((row.height * item.ratio) + \"px\") : '100%', height: ((row.height) + \"px\")})},[(_vm.showPlaceholders)?_c('div',{staticClass:\"files-list-viewer__placeholder\"}):_vm._t(\"default\",null,{\"file\":item,\"visibility\":row.visibility})],2)}),0)}),0)}}])},[_vm._v(\" \"),(_vm.loading && !_vm.showPlaceholders)?_c('NcLoadingIcon',{staticClass:\"files-list-viewer__loader\",attrs:{\"slot\":\"loader\"},slot:\"loader\"}):_vm._e()],1)}}])})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"!title\"\n        :aria-label=\"title\"\n        class=\"material-design-icon package-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PackageVariantIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","import mod from \"-!../vue-loader/lib/index.js??vue-loader-options!./PackageVariant.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../vue-loader/lib/index.js??vue-loader-options!./PackageVariant.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PackageVariant.vue?vue&type=template&id=9a5ab29c&\"\nimport script from \"./PackageVariant.vue?vue&type=script&lang=js&\"\nexport * from \"./PackageVariant.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:\"material-design-icon package-variant-icon\",attrs:{\"aria-hidden\":!_vm.title,\"aria-label\":_vm.title,\"role\":\"img\"},on:{\"click\":function($event){return _vm.$emit('click', $event)}}},'span',_vm.$attrs,false),[_c('svg',{staticClass:\"material-design-icon__svg\",attrs:{\"fill\":_vm.fillColor,\"width\":_vm.size,\"height\":_vm.size,\"viewBox\":\"0 0 24 24\"}},[_c('path',{attrs:{\"d\":\"M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z\"}},[(_vm.title)?_c('title',[_vm._v(_vm._s(_vm.title))]):_vm._e()])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","/**\n * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>\n *\n * @author Louis Chemineau <louis@chmn.me>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n/**\n * @typedef {object} TiledItem\n * @property {string} id\n * @property {number} [width] Real width of the item.\n * @property {number} height Real height of the item.\n * @property {number} [ratio] The aspect ratio of the item.\n * @property {boolean} [sectionHeader] Whether this row is a section header.\n */\n\n/**\n * @typedef {object} TiledRow\n * @property {TiledItem[]} items -\n * @property {number} height -\n * @property {string} key -\n */\n\n/**\n * Split items in rows of equal width.\n * The last row will not be forced to match containerWidth.\n *\n * @param {TiledItem[]} items The list of item to split in row of equal width.\n * @param {number} containerWidth The width of a row.\n * @param {number} baseHeight The base height of the rows.\n * @return {TiledRow[]}\n */\nexport function splitItemsInRows(items, containerWidth, baseHeight = 200) {\n\tif (containerWidth === 0) {\n\t\treturn []\n\t}\n\n\tconst rows = []\n\tlet rowNumber = 0\n\tlet currentItem = 0\n\n\twhile (currentItem < items.length) {\n\t\t/** @type { TiledItem[] } */\n\t\tconst rowItems = []\n\n\t\t// Fill the row with new items as long as the width is less than containerWidth.\n\t\tdo {\n\t\t\t// @ts-ignore - We know that items.shift() is not undefined as we always check that items.length > 0.\n\t\t\trowItems.push(items[currentItem++])\n\t\t} while (\n\t\t\tcurrentItem < items.length\n\t\t\t&& !items[currentItem - 1].sectionHeader && !items[currentItem].sectionHeader\n\t\t\t&& computeRowWidth([...rowItems, items[currentItem]], baseHeight) <= containerWidth\n\t\t)\n\n\t\trows[rowNumber] = {\n\t\t\titems: rowItems,\n\t\t\theight: computeRowHeight(\n\t\t\t\trowItems,\n\t\t\t\tcontainerWidth,\n\t\t\t\titems.length === currentItem || items[currentItem].sectionHeader === true,\n\t\t\t\tbaseHeight\n\t\t\t),\n\t\t\t// Key to help vue to keep track of the row in VirtualScrolling.\n\t\t\tkey: rowItems.map(item => item.id).join('-'),\n\t\t}\n\n\t\trowNumber += 1\n\t}\n\n\treturn rows\n}\n\n/**\n *\n * @param {TiledItem[]} items The list of items in the row.\n * @param {number} baseHeight The base height of the rows.\n * @return {number} The width of the row\n */\nfunction computeRowWidth(items, baseHeight) {\n\treturn items\n\t\t.map(item => baseHeight * item.ratio)\n\t\t.reduce((sum, itemWidth) => sum + itemWidth)\n}\n\n/**\n * Compute the row height based on its items and on the container's width.\n *\n * Math time !\n * With Rn the aspect ratio of item n\n *      Wn the width of item n\n *      Hn the height of item n\n *      Wc the width of the container\n *      Hr the height of the row\n * For n items we want: Wc = W1 + W2 + ... + Wn\n * We know Rn = Wn / Hn\n * So Wn = Rn * Hn\n * So Wc = (R1 * H1) + (R2 * H2) + ... + (Rn * Hn)\n * But we also want Hr === H1 === H2 === ... === Hn\n * So Wc = (R1 * Hr) + (R2 * Hr) + ... + (Rn * Hr)\n * So Wc = Hr * (R1 + R2 + ... + Rn)\n * So Hr = Wc / (R1 + R2 + ... + Rn)\n *\n * @param {TiledItem[]} items The list of items in the row.\n * @param {number} containerWidth The width of the row.\n * @param {boolean} isLastRow Whether we are computing the height for the last row.\n * @param {number} baseHeight The base height of the rows.\n * @return {number} The height of the row\n */\nfunction computeRowHeight(items, containerWidth, isLastRow, baseHeight) {\n\t// Exception 1: there is only one item and its width it is a sectionHeader, meaning take the full width.\n\tif (items.length === 1 && items[0].sectionHeader) {\n\t\treturn items[0].height\n\t}\n\n\tconst sumOfItemsRatio = items\n\t\t.map(item => item.ratio)\n\t\t.reduce((sum, itemRatio) => sum + itemRatio\n\t\t)\n\n\tlet rowHeight = containerWidth / sumOfItemsRatio\n\n\t// Exception 2: there is only one item which is larger than containerWidth.\n\t// Limit its height so that itemWidth === containerWidth\n\tif (items.length === 1 && items[0].width > containerWidth) {\n\t\trowHeight = containerWidth / items[0].ratio\n\t}\n\n\t// Exception 3: we reached the last row.\n\t// Force the items width to match containerWidth, and limit their heigh to baseHeight + 20.\n\tif (isLastRow) {\n\t\trowHeight = Math.min(baseHeight + 20, rowHeight)\n\t}\n\n\treturn rowHeight\n}\n","var render = function (_h,_vm) {var _c=_vm._c;return _c('ul',_vm._l((_vm.props.rows),function(row){return _c('div',{key:row.key,staticClass:\"tiled-row\",style:({height: ((row.height) + \"px\")})},_vm._l((row.items),function(item){return _c('li',{key:item.id,style:({ width: item.ratio ? ((row.height * item.ratio) + \"px\") : '100%', height: ((row.height) + \"px\")})},[_vm._t(\"default\",null,{\"row\":row,\"item\":item})],2)}),0)}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n      import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledRows.vue?vue&type=style&index=0&id=c1815a46&lang=scss&scoped=true&\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledRows.vue?vue&type=style&index=0&id=c1815a46&lang=scss&scoped=true&\";\n       export default content && content.locals ? content.locals : undefined;\n","<!--\n - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>\n -\n - @author Louis Chemineau <louis@chmn.me>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<template>\n\t<div ref=\"tiledLayoutContainer\"\n\t\tclass=\"tiled-container\">\n\t\t<!-- Slot to allow changing the rows before passing them to TiledRows -->\n\t\t<!-- Useful for partially rendering rows like with VirtualScrolling -->\n\t\t<slot :rows=\"rows\">\n\t\t\t<!-- Default rendering -->\n\t\t\t<TiledRows :rows=\"rows\" />\n\t\t</slot>\n\t</div>\n</template>\n\n<script>\nimport logger from '../../services/logger.js'\nimport { splitItemsInRows } from '../../services/TiledLayout.js'\nimport TiledRows from './TiledRows.vue'\n\nexport default {\n\tname: 'TiledLayout',\n\n\tcomponents: {\n\t\tTiledRows,\n\t},\n\n\tprops: {\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\t\tbaseHeight: {\n\t\t\ttype: Number,\n\t\t\tdefault: 200,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontainerWidth: 0,\n\t\t\t/** @type {ResizeObserver} */\n\t\t\tresizeObserver: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {import('../services/TiledLayout.js').TiledRow[]} */\n\t\trows() {\n\t\t\tlogger.debug('[TiledLayout] Computing rows', this.items)\n\n\t\t\treturn splitItemsInRows(this.items, this.containerWidth, this.baseHeight)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.resizeObserver = new ResizeObserver(entries => {\n\t\t\tfor (const entry of entries) {\n\t\t\t\tconst cr = entry.contentRect\n\t\t\t\tif (entry.target.classList.contains('tiled-container')) {\n\t\t\t\t\tthis.containerWidth = cr.width\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\tthis.resizeObserver.observe(this.$refs.tiledLayoutContainer)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.resizeObserver.disconnect()\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.tiled-container {\n\theight: 100%;\n\n\t.tiled-row {\n\t\tdisplay: flex;\n\t}\n}\n</style>\n","import mod from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledLayout.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledLayout.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TiledRows.vue?vue&type=template&id=c1815a46&scoped=true&functional=true&\"\nvar script = {}\nimport style0 from \"./TiledRows.vue?vue&type=style&index=0&id=c1815a46&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  true,\n  null,\n  \"c1815a46\",\n  null\n  \n)\n\nexport default component.exports","\n      import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledLayout.vue?vue&type=style&index=0&id=24e4a122&scoped=true&lang=scss&\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TiledLayout.vue?vue&type=style&index=0&id=24e4a122&scoped=true&lang=scss&\";\n       export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./TiledLayout.vue?vue&type=template&id=24e4a122&scoped=true&\"\nimport script from \"./TiledLayout.vue?vue&type=script&lang=js&\"\nexport * from \"./TiledLayout.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TiledLayout.vue?vue&type=style&index=0&id=24e4a122&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"24e4a122\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"tiledLayoutContainer\",staticClass:\"tiled-container\"},[_vm._t(\"default\",function(){return [_c('TiledRows',{attrs:{\"rows\":_vm.rows}})]},{\"rows\":_vm.rows})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.useWindow && _vm.containerElement === null)?_c('div',{ref:\"container\",staticClass:\"vs-container\"},[_c('div',{ref:\"rowsContainer\",staticClass:\"vs-rows-container\",style:(_vm.rowsContainerStyle)},[_vm._t(\"default\",null,{\"renderedRows\":_vm.visibleRows}),_vm._v(\" \"),_vm._t(\"loader\")],2)]):_c('div',{ref:\"rowsContainer\",staticClass:\"vs-rows-container\",style:(_vm.rowsContainerStyle)},[_vm._t(\"default\",null,{\"renderedRows\":_vm.visibleRows}),_vm._v(\" \"),_vm._t(\"loader\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!--\n - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>\n -\n - @author Louis Chemineau <louis@chmn.me>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<template>\n\t<div v-if=\"!useWindow && containerElement === null\" ref=\"container\" class=\"vs-container\">\n\t\t<div ref=\"rowsContainer\"\n\t\t\tclass=\"vs-rows-container\"\n\t\t\t:style=\"rowsContainerStyle\">\n\t\t\t<slot :rendered-rows=\"visibleRows\" />\n\t\t\t<slot name=\"loader\" />\n\t\t</div>\n\t</div>\n\t<div v-else\n\t\tref=\"rowsContainer\"\n\t\tclass=\"vs-rows-container\"\n\t\t:style=\"rowsContainerStyle\">\n\t\t<slot :rendered-rows=\"visibleRows\" />\n\t\t<slot name=\"loader\" />\n\t</div>\n</template>\n\n<script>\nimport { debounce } from 'debounce'\n\nimport logger from '../services/logger.js'\n/**\n * @typedef {object} Row\n * @property {number} height - The height of the row.\n */\n\n/**\n * @typedef {Row} VisibleRow\n * @property {'none'|'near'|'visible'} visibility - The visibility state of the row\n * @property {boolean} shouldRender - Whether the row should be renderer in the DOM\n */\n\nexport default {\n\tname: 'VirtualScrolling',\n\n\tprops: {\n\t\trows: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\tcontainerElement: {\n\t\t\ttype: HTMLElement,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tuseWindow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\trenderWindowRatio: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t\twillBeVisibleWindowRatio: {\n\t\t\ttype: Number,\n\t\t\tdefault: 4,\n\t\t},\n\t\tvisibleWindowRatio: {\n\t\t\ttype: Number,\n\t\t\t// A little bit more than the container's height to include items at its edges.\n\t\t\tdefault: 0,\n\t\t},\n\t\tbottomBufferRatio: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5,\n\t\t},\n\t\tscrollToKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tscrollPosition: 0,\n\t\t\tcontainerHeight: 0,\n\t\t\trowsContainerHeight: 0,\n\t\t\t/** @type {ResizeObserver} */\n\t\t\tresizeObserver: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * @return {VisibleRow[]}\n\t\t */\n\t\tvisibleRows() {\n\t\t\tlogger.debug('[VirtualScrolling] Computing visible rows', this.rows)\n\n\t\t\t// Optimisation: get those computed properties once to not go through vue's internal every time we need them.\n\t\t\tconst scrollPosition = this.scrollPosition\n\t\t\tconst containerHeight = this.containerHeight\n\n\t\t\t// Optimisation: different windows to hint the items how they should render themselves.\n\t\t\t// This will be forwarded with the visibility props.\n\t\t\tconst shouldRenderedWindow = containerHeight * this.renderWindowRatio\n\t\t\tconst willBeVisibleWindow = containerHeight * this.willBeVisibleWindowRatio\n\t\t\tconst visibleWindow = containerHeight * this.visibleWindowRatio\n\n\t\t\tlet currentRowTopDistanceFromTop = 0\n\t\t\tlet currentRowBottomDistanceFromTop = 0\n\n\t\t\t// Compute whether a row should be included in the DOM (shouldRender)\n\t\t\t// And how visible the row is.\n\t\t\treturn this.rows\n\t\t\t\t.reduce((visibleRows, row) => {\n\t\t\t\t\tcurrentRowTopDistanceFromTop = currentRowBottomDistanceFromTop\n\t\t\t\t\tcurrentRowBottomDistanceFromTop += row.height\n\n\t\t\t\t\tif (currentRowTopDistanceFromTop < scrollPosition - shouldRenderedWindow || scrollPosition + containerHeight + shouldRenderedWindow < currentRowTopDistanceFromTop) {\n\t\t\t\t\t\treturn visibleRows\n\t\t\t\t\t}\n\n\t\t\t\t\tlet visibility = 'none'\n\n\t\t\t\t\tif (scrollPosition - willBeVisibleWindow < currentRowTopDistanceFromTop && currentRowTopDistanceFromTop < scrollPosition + containerHeight + willBeVisibleWindow) {\n\t\t\t\t\t\tvisibility = 'near'\n\n\t\t\t\t\t\tif (scrollPosition - visibleWindow < currentRowTopDistanceFromTop && currentRowTopDistanceFromTop < scrollPosition + containerHeight + visibleWindow) {\n\t\t\t\t\t\t\tvisibility = 'visible'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (scrollPosition - visibleWindow < currentRowBottomDistanceFromTop && currentRowBottomDistanceFromTop < scrollPosition + containerHeight + visibleWindow) {\n\t\t\t\t\t\t\tvisibility = 'visible'\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn [\n\t\t\t\t\t\t...visibleRows,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...row,\n\t\t\t\t\t\t\tvisibility,\n\t\t\t\t\t\t},\n\t\t\t\t\t]\n\t\t\t\t}, [])\n\t\t},\n\n\t\t/**\n\t\t * Total height of all the rows + some room for the loader.\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\trowsHeight() {\n\t\t\tconst loaderHeight = 200\n\n\t\t\treturn this.rows\n\t\t\t\t.map(row => row.height)\n\t\t\t\t.reduce((totalHeight, rowHeight) => totalHeight + rowHeight, 0) + loaderHeight\n\t\t},\n\n\t\t/**\n\t\t * @return {number}\n\t\t */\n\t\tpaddingTop() {\n\t\t\tif (this.visibleRows.length === 0) {\n\t\t\t\treturn 0\n\t\t\t}\n\n\t\t\tconst firstVisibleRowIndex = this.rows.findIndex(row => row.items === this.visibleRows[0].items)\n\n\t\t\treturn this.rows\n\t\t\t\t.map(row => row.height)\n\t\t\t\t.slice(0, firstVisibleRowIndex)\n\t\t\t\t.reduce((totalHeight, rowHeight) => totalHeight + rowHeight, 0)\n\t\t},\n\n\t\t/**\n\t\t * padding-top is used to replace not included item in the container.\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\trowsContainerStyle() {\n\t\t\treturn {\n\t\t\t\theight: `${this.rowsHeight}px`,\n\t\t\t\tpaddingTop: `${this.paddingTop}px`,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Whether the user is near the bottom.\n\t\t * If true, then the need-content event will be emitted.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisNearBottom() {\n\t\t\tconst buffer = this.containerHeight * this.bottomBufferRatio\n\t\t\treturn this.scrollPosition + this.containerHeight >= this.rowsHeight - buffer\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement}\n\t\t */\n\t\tcontainer() {\n\t\t\tlogger.debug('[VirtualScrolling] Computing container')\n\t\t\tif (this.containerElement !== null) {\n\t\t\t\treturn this.containerElement\n\t\t\t} else if (this.useWindow) {\n\t\t\t\treturn window\n\t\t\t} else {\n\t\t\t\treturn this.$refs.container\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tisNearBottom(value) {\n\t\t\tif (value) {\n\t\t\t\tthis.$emit('need-content')\n\t\t\t}\n\t\t},\n\n\t\trows() {\n\t\t\t// Re-emit need-content when rows is updated and isNearBottom is still true.\n\t\t\t// If the height of added rows is under `bottomBufferRatio`, `isNearBottom` will still be true so we need more content.\n\t\t\tif (this.isNearBottom) {\n\t\t\t\tthis.$emit('need-content')\n\t\t\t}\n\t\t},\n\n\t\tscrollToKey(key) {\n\t\t\tlet currentRowTopDistanceFromTop = 0\n\t\t\tfor (const row of this.rows) {\n\t\t\t\tif (row.key === key) {\n\t\t\t\t\tthis.$refs.container.scrollTo({ top: currentRowTopDistanceFromTop, behavior: 'smooth' })\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tcurrentRowTopDistanceFromTop += row.height\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.resizeObserver = new ResizeObserver(entries => {\n\t\t\tfor (const entry of entries) {\n\t\t\t\tconst cr = entry.contentRect\n\t\t\t\tif (entry.target === this.container) {\n\t\t\t\t\tthis.containerHeight = cr.height\n\t\t\t\t}\n\t\t\t\tif (entry.target.classList.contains('vs-rows-container')) {\n\t\t\t\t\tthis.rowsContainerHeight = cr.height\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\tif (this.useWindow) {\n\t\t\twindow.addEventListener('resize', this.updateContainerSize)\n\t\t\tthis.containerHeight = window.innerHeight\n\t\t} else {\n\t\t\tthis.resizeObserver.observe(this.container)\n\t\t}\n\n\t\tthis.resizeObserver.observe(this.$refs.rowsContainer)\n\t\tthis.container.addEventListener('scroll', this.updateScrollPosition)\n\t},\n\n\tbeforeDestroy() {\n\t\tif (this.useWindow) {\n\t\t\twindow.removeEventListener('resize', this.updateContainerSize)\n\t\t}\n\n\t\tthis.resizeObserver.disconnect()\n\t\tthis.container.removeEventListener('scroll', this.updateScrollPosition)\n\t},\n\n\tmethods: {\n\t\tupdateScrollPosition: debounce(function() {\n\t\t\tif (this.useWindow) {\n\t\t\t\tthis.scrollPosition = this.container.scrollY\n\t\t\t} else {\n\t\t\t\tthis.scrollPosition = this.container.scrollTop\n\t\t\t}\n\t\t}, 200),\n\n\t\tupdateContainerSize() {\n\t\t\tthis.containerHeight = window.innerHeight\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.vs-container {\n\toverflow-y: scroll;\n\theight: 100%;\n}\n\n.vs-rows-container {\n\tbox-sizing: border-box;\n}\n</style>\n","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VirtualScrolling.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VirtualScrolling.vue?vue&type=script&lang=js&\"","\n      import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VirtualScrolling.vue?vue&type=style&index=0&id=7d847354&scoped=true&lang=scss&\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VirtualScrolling.vue?vue&type=style&index=0&id=7d847354&scoped=true&lang=scss&\";\n       export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./VirtualScrolling.vue?vue&type=template&id=7d847354&scoped=true&\"\nimport script from \"./VirtualScrolling.vue?vue&type=script&lang=js&\"\nexport * from \"./VirtualScrolling.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VirtualScrolling.vue?vue&type=style&index=0&id=7d847354&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7d847354\",\n  null\n  \n)\n\nexport default component.exports","<!--\n - @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>\n -\n - @author Louis Chemineau <louis@chmn.me>\n -\n - @license AGPL-3.0-or-later\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n<template>\n\t<div class=\"files-list-viewer\">\n\t\t<NcEmptyContent v-if=\"emptyMessage !== '' && items.length === 0 && !loading\"\n\t\t\tkey=\"emptycontent\"\n\t\t\t:title=\"emptyMessage\">\n\t\t\t<PackageVariant slot=\"icon\" />\n\t\t</NcEmptyContent>\n\n\t\t<TiledLayout :base-height=\"baseHeight\" :items=\"items\">\n\t\t\t<VirtualScrolling slot-scope=\"{rows}\"\n\t\t\t\t:use-window=\"useWindow\"\n\t\t\t\t:container-element=\"containerElement\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:scroll-to-key=\"scrollToSection\"\n\t\t\t\t@need-content=\"needContent\">\n\t\t\t\t<ul slot-scope=\"{renderedRows}\">\n\t\t\t\t\t<div v-for=\"row of renderedRows\"\n\t\t\t\t\t\t:key=\"row.key\"\n\t\t\t\t\t\tclass=\"tiled-row\"\n\t\t\t\t\t\t:class=\"{'files-list-viewer__section-header': row.items[0].sectionHeader}\"\n\t\t\t\t\t\t:style=\"{height: `${row.height}px`}\">\n\t\t\t\t\t\t<li v-for=\"item of row.items\"\n\t\t\t\t\t\t\t:key=\"item.id\"\n\t\t\t\t\t\t\t:style=\"{ width: item.ratio ? `${row.height * item.ratio}px` : '100%', height: `${row.height}px`}\">\n\t\t\t\t\t\t\t<!-- Placeholder when initial loading -->\n\t\t\t\t\t\t\t<div v-if=\"showPlaceholders\" class=\"files-list-viewer__placeholder\" />\n\t\t\t\t\t\t\t<!-- Real file. -->\n\t\t\t\t\t\t\t<slot v-else :file=\"item\" :visibility=\"row.visibility\" />\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</div>\n\t\t\t\t</ul>\n\t\t\t\t<NcLoadingIcon v-if=\"loading && !showPlaceholders\" slot=\"loader\" class=\"files-list-viewer__loader\" />\n\t\t\t</VirtualScrolling>\n\t\t</TiledLayout>\n\t</div>\n</template>\n<script>\nimport { mapGetters } from 'vuex'\n\nimport PackageVariant from 'vue-material-design-icons/PackageVariant'\n\nimport { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'\n\nimport TiledLayout from '../components/TiledLayout/TiledLayout.vue'\nimport VirtualScrolling from '../components/VirtualScrolling.vue'\nimport EmptyBox from '../assets/Illustrations/empty.svg'\n\nexport default {\n\tname: 'FilesListViewer',\n\n\tcomponents: {\n\t\tPackageVariant,\n\t\tNcEmptyContent,\n\t\tNcLoadingIcon,\n\t\tTiledLayout,\n\t\tVirtualScrolling,\n\t},\n\n\tprops: {\n\t\t// Array of file ids that should be rendered.\n\t\tfileIds: {\n\t\t\ttype: Array,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t// An object mapping a list of section to a list of fileIds.\n\t\tfileIdsBySection: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t// The list of sorted sections.\n\t\tsections: {\n\t\t\ttype: Array,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t// Whether we should display a loading indicator.\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t// Message to display when there is no files.\n\t\temptyMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t// The base height to forward to TileLayout.\n\t\tbaseHeight: {\n\t\t\ttype: Number,\n\t\t\tdefault: 200,\n\t\t},\n\t\t// The height to use for section headers.\n\t\tsectionHeaderHeight: {\n\t\t\ttype: Number,\n\t\t\tdefault: 75,\n\t\t},\n\t\t// Instruct VirtualScrolling to scroll to the given section id.\n\t\tscrollToSection: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t// The containerElement props to forward to TileLayout.\n\t\tcontainerElement: {\n\t\t\ttype: HTMLElement,\n\t\t\tdefault: null,\n\t\t},\n\t\t// The useWindow props to forward to TileLayout.\n\t\tuseWindow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tEmptyBox,\n\t\t\tplaceholderFiles: Array(20).fill(0).map((_, index) => {\n\t\t\t\tconst height = 200\n\t\t\t\tconst width = height * (1 + Math.random() * 2)\n\t\t\t\treturn {\n\t\t\t\t\tid: index,\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tratio: width / height,\n\t\t\t\t}\n\t\t\t}),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t...mapGetters([\n\t\t\t'files',\n\t\t]),\n\n\t\t/**\n\t\t * @return {object[]} The list of items to pass to TiledLayout.\n\t\t */\n\t\tfileIdsToItems() {\n\t\t\tif (this.fileIds === undefined) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\treturn this.fileIds\n\t\t\t\t.filter(fileId => this.files[fileId])\n\t\t\t\t.map(this.mapFileToItem)\n\t\t},\n\n\t\t/**\n\t\t * @return {object[]} The list of items separated by sections to pass to TiledLayout.\n\t\t */\n\t\tsectionsToItems() {\n\t\t\tif (this.sections === undefined) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\treturn this.sections.flatMap((sectionId) => {\n\t\t\t\treturn [\n\t\t\t\t\t{\n\t\t\t\t\t\tid: sectionId,\n\t\t\t\t\t\tsectionHeader: true,\n\t\t\t\t\t\theight: this.sectionHeaderHeight,\n\t\t\t\t\t},\n\t\t\t\t\t...this.fileIdsBySection[sectionId]\n\t\t\t\t\t\t.filter(fileId => this.files[fileId])\n\t\t\t\t\t\t.map(this.mapFileToItem),\n\t\t\t\t]\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * @return {boolean} The list of items to pass to TiledLayout.\n\t\t */\n\t\tshowPlaceholders() {\n\t\t\treturn this.loading && (this.fileIds?.length === 0 || this.sections?.length === 0)\n\t\t},\n\n\t\t/**\n\t\t * @return {object[]} The list of items to pass to TiledLayout.\n\t\t */\n\t\titems() {\n\n\t\t\tif (this.fileIds !== undefined) {\n\t\t\t\tif (this.showPlaceholders) {\n\t\t\t\t\treturn this.placeholderFiles\n\t\t\t\t}\n\n\t\t\t\treturn this.fileIdsToItems\n\t\t\t}\n\n\t\t\tif (this.sections !== undefined) {\n\t\t\t\tif (this.showPlaceholders) {\n\t\t\t\t\treturn [{ height: 75, sectionHeader: true }, ...this.placeholderFiles]\n\t\t\t\t}\n\n\t\t\t\treturn this.sectionsToItems\n\t\t\t}\n\n\t\t\treturn []\n\t\t},\n\n\t\tshowLoader() {\n\t\t\treturn this.loading && (this.fileIds?.length !== 0 || this.sections?.length !== 0)\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// Ask the parent for more content.\n\t\tneedContent() {\n\t\t\tthis.$emit('need-content')\n\t\t},\n\n\t\tmapFileToItem(fileId) {\n\t\t\tconst file = this.files[fileId]\n\t\t\treturn {\n\t\t\t\tid: file.fileid,\n\t\t\t\twidth: file.fileMetadataSizeParsed.width,\n\t\t\t\theight: file.fileMetadataSizeParsed.height,\n\t\t\t\tratio: file.fileMetadataSizeParsed.width / file.fileMetadataSizeParsed.height,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.files-list-viewer {\n\theight: 100%;\n\tposition: relative;\n\n\t&__placeholder {\n\t\tbackground: var(--color-primary-light);\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: 2px solid var(--color-main-background); // Use border so create a separation between images.\n\t}\n\n\t.tiled-container {\n\t\tflex-basis: 0;\n\n\t\t.tiled-row {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n\n\t&__section-header {\n\t\tposition: sticky;\n\t\ttop: 0;\n\t\tz-index: 3;\n\t\tbackground: var(--color-main-background);\n\t}\n\n\t&__loader {\n\t\tmargin: 50px 0;\n\t}\n}\n</style>\n","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FilesListViewer.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FilesListViewer.vue?vue&type=script&lang=js&\"","\n      import API from \"!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FilesListViewer.vue?vue&type=style&index=0&id=9bdf6efe&lang=scss&scoped=true&\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\n\n      options.insert = insertFn.bind(null, \"head\");\n    \noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2[0].rules[0].use[3]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FilesListViewer.vue?vue&type=style&index=0&id=9bdf6efe&lang=scss&scoped=true&\";\n       export default content && content.locals ? content.locals : undefined;\n","import { render, staticRenderFns } from \"./FilesListViewer.vue?vue&type=template&id=9bdf6efe&scoped=true&\"\nimport script from \"./FilesListViewer.vue?vue&type=script&lang=js&\"\nexport * from \"./FilesListViewer.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FilesListViewer.vue?vue&type=style&index=0&id=9bdf6efe&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"9bdf6efe\",\n  null\n  \n)\n\nexport default component.exports"],"names":["name","data","abortController","AbortController","beforeDestroy","this","abort","beforeRouteLeave","from","to","next","selection","methods","onFileSelectToggle","id","value","$set","onUncheckFiles","filesIds","forEach","filesId","resetSelection","computed","selectedFileIds","Object","keys","filter","fileId","___CSS_LOADER_EXPORT___","push","module","options","styleTagTransform","setAttributes","insert","domAPI","insertStyleElement","_vm","_h","$createElement","_c","_self","staticClass","class","selected","attrs","file","source","ariaLabel","on","$event","stopPropagation","preventDefault","emitClick","apply","arguments","mime","includes","_e","_v","visibility","canLoad","error","key","ref","srcNear","basename","ariaDescription","onLoad","onError","srcVisible","show","_s","onToggle","t","imageName","favorite","emits","props","title","type","String","fillColor","default","size","Number","_b","$emit","$attrs","computeRowWidth","items","baseHeight","map","item","ratio","reduce","sum","itemWidth","computeRowHeight","containerWidth","isLastRow","length","sectionHeader","height","rowHeight","itemRatio","width","Math","min","_l","row","style","_t","rows","rowNumber","currentItem","rowItems","join","useWindow","containerElement","visibleRows","emptyMessage","loading","slot","scopedSlots","_u","fn","scrollToSection","needContent","renderedRows","showPlaceholders"],"sourceRoot":""}