From 1779bd1cc74c1cbfc0cc6be1e194d8b3d4c022c0 Mon Sep 17 00:00:00 2001 From: Corentin Mors Date: Tue, 13 Oct 2020 16:52:33 +0200 Subject: [PATCH 1/3] Readd loading icon Signed-off-by: Corentin Mors --- js/photos-5.js | 198 ++++++++++++++++++++++++++++++++++++-- js/photos-5.js.map | 2 +- js/photos-main.js | 4 +- js/photos-main.js.map | 2 +- src/components/Loader.vue | 21 ++++ src/views/Timeline.vue | 5 +- 6 files changed, 220 insertions(+), 12 deletions(-) create mode 100644 src/components/Loader.vue diff --git a/js/photos-5.js b/js/photos-5.js index 9dd971dc4..dab063ebe 100644 --- a/js/photos-5.js +++ b/js/photos-5.js @@ -132,6 +132,30 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar /***/ }), +/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/Loader.vue?vue&type=script&lang=js&": +/*!**********************************************************************************************************************************************!*\ + !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Loader.vue?vue&type=script&lang=js& ***! + \**********************************************************************************************************************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +// +// +// +// +// +// +// +// +// +/* harmony default export */ __webpack_exports__["default"] = ({ + name: 'Loader' +}); + +/***/ }), + /***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/SeparatorVirtualGrid.vue?vue&type=script&lang=js&": /*!************************************************************************************************************************************************************!*\ !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SeparatorVirtualGrid.vue?vue&type=script&lang=js& ***! @@ -180,8 +204,9 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var vue_virtual_grid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-virtual-grid */ "./node_modules/vue-virtual-grid/dist/virtual-grid.common.js"); /* harmony import */ var vue_virtual_grid__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(vue_virtual_grid__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var _components_Navigation__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../components/Navigation */ "./src/components/Navigation.vue"); -/* harmony import */ var _utils_CancelableRequest__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils/CancelableRequest */ "./src/utils/CancelableRequest.js"); -/* harmony import */ var _mixins_GridConfig__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../mixins/GridConfig */ "./src/mixins/GridConfig.js"); +/* harmony import */ var _components_Loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../components/Loader */ "./src/components/Loader.vue"); +/* harmony import */ var _utils_CancelableRequest__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils/CancelableRequest */ "./src/utils/CancelableRequest.js"); +/* harmony import */ var _mixins_GridConfig__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../mixins/GridConfig */ "./src/mixins/GridConfig.js"); function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } @@ -248,6 +273,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope // // // +// + @@ -265,7 +292,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope VirtualGrid: vue_virtual_grid__WEBPACK_IMPORTED_MODULE_6___default.a, Navigation: _components_Navigation__WEBPACK_IMPORTED_MODULE_7__["default"] }, - mixins: [_mixins_GridConfig__WEBPACK_IMPORTED_MODULE_9__["default"]], + mixins: [_mixins_GridConfig__WEBPACK_IMPORTED_MODULE_10__["default"]], props: { loading: { type: Boolean, @@ -290,7 +317,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope done: false, error: null, page: 0, - lastSection: '' + lastSection: '', + loaderComponent: _components_Loader__WEBPACK_IMPORTED_MODULE_8__["default"] }; }, computed: _objectSpread(_objectSpread({}, Object(vuex__WEBPACK_IMPORTED_MODULE_1__["mapGetters"])(['files', 'timeline'])), {}, { @@ -424,7 +452,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope } // done loading even with errors - _cancelableRequest = Object(_utils_CancelableRequest__WEBPACK_IMPORTED_MODULE_8__["default"])(_services_PhotoSearch__WEBPACK_IMPORTED_MODULE_2__["default"]), request = _cancelableRequest.request, cancel = _cancelableRequest.cancel; + _cancelableRequest = Object(_utils_CancelableRequest__WEBPACK_IMPORTED_MODULE_9__["default"])(_services_PhotoSearch__WEBPACK_IMPORTED_MODULE_2__["default"]), request = _cancelableRequest.request, cancel = _cancelableRequest.cancel; _this4.cancelRequest = cancel; numberOfImagesPerBatch = _this4.gridConfig.count * 5; // loading 5 rows @@ -534,6 +562,24 @@ exports.push([module.i, "@charset \"UTF-8\";\n/**\n * @copyright Copyright (c) 2 module.exports = exports; +/***/ }), + +/***/ "./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?!./node_modules/vue-loader/lib/index.js?!./src/components/Loader.vue?vue&type=style&index=0&lang=scss&": +/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************!*\ + !*** ./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??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Loader.vue?vue&type=style&index=0&lang=scss& ***! + \*****************************************************************************************************************************************************************************************************************************************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +// Imports +var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js"); +exports = ___CSS_LOADER_API_IMPORT___(false); +// Module +exports.push([module.i, ".loader {\n display: grid;\n height: 60px;\n}\n", ""]); +// Exports +module.exports = exports; + + /***/ }), /***/ "./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?!./node_modules/vue-loader/lib/index.js?!./src/components/SeparatorVirtualGrid.vue?vue&type=style&index=0&id=39804afc&lang=scss&scoped=true&": @@ -959,6 +1005,35 @@ render._withStripped = true +/***/ }), + +/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Loader.vue?vue&type=template&id=04a0d67a&": +/*!************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Loader.vue?vue&type=template&id=04a0d67a& ***! + \************************************************************************************************************************************************************************************************/ +/*! exports provided: render, staticRenderFns */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; }); +var render = function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c( + "div", + { staticClass: "loader", attrs: { icon: "loading" } }, + [_vm._t("icon", [_c("span", { class: ["loading"] })])], + 2 + ) +} +var staticRenderFns = [] +render._withStripped = true + + + /***/ }), /***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./src/components/SeparatorVirtualGrid.vue?vue&type=template&id=39804afc&scoped=true&": @@ -1057,7 +1132,8 @@ var render = function() { "get-grid-gap": function() { return _vm.gridConfig.gap }, - "update-trigger-margin": 700 + "update-trigger-margin": 700, + loader: _vm.loaderComponent } }) ], @@ -1096,6 +1172,27 @@ if(false) {} /***/ }), +/***/ "./node_modules/vue-style-loader/index.js!./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?!./node_modules/vue-loader/lib/index.js?!./src/components/Loader.vue?vue&type=style&index=0&lang=scss&": +/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/vue-style-loader!./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??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Loader.vue?vue&type=style&index=0&lang=scss& ***! + \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +// style-loader: Adds some css to the DOM by adding a diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue index 6813b28a0..ae92a009b 100644 --- a/src/views/Timeline.vue +++ b/src/views/Timeline.vue @@ -49,7 +49,8 @@ :update-function="getContent" :get-column-count="() => gridConfig.count" :get-grid-gap="() => gridConfig.gap" - :update-trigger-margin="700" /> + :update-trigger-margin="700" + :loader="loaderComponent" /> @@ -65,6 +66,7 @@ import FileVirtualGrid from '../components/FileVirtualGrid' import SeparatorVirtualGrid from '../components/SeparatorVirtualGrid' import VirtualGrid from 'vue-virtual-grid' import Navigation from '../components/Navigation' +import Loader from '../components/Loader' import cancelableRequest from '../utils/CancelableRequest' import GridConfigMixin from '../mixins/GridConfig' @@ -103,6 +105,7 @@ export default { error: null, page: 0, lastSection: '', + loaderComponent: Loader, } }, From f97c2ac3a7f1c82e0a22b48fe4cf289d932c6f46 Mon Sep 17 00:00:00 2001 From: Corentin Mors Date: Tue, 13 Oct 2020 17:35:50 +0200 Subject: [PATCH 2/3] Add missing copyright Signed-off-by: Corentin Mors --- js/photos-5.js | 21 ++++++++++++++++++++- js/photos-5.js.map | 2 +- js/photos-main.js | 4 ++-- js/photos-main.js.map | 2 +- src/components/Loader.vue | 19 +++++++++++++++++++ 5 files changed, 43 insertions(+), 5 deletions(-) diff --git a/js/photos-5.js b/js/photos-5.js index dab063ebe..e8f7cb7da 100644 --- a/js/photos-5.js +++ b/js/photos-5.js @@ -150,6 +150,25 @@ __webpack_require__.r(__webpack_exports__); // // // +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// /* harmony default export */ __webpack_exports__["default"] = ({ name: 'Loader' }); @@ -2253,4 +2272,4 @@ __webpack_require__.r(__webpack_exports__); /***/ }) }]); -//# sourceMappingURL=photos-5.js.map?v=d43d527a6d3d35d9d3fa \ No newline at end of file +//# sourceMappingURL=photos-5.js.map?v=0775a17703c879a3649f \ No newline at end of file diff --git a/js/photos-5.js.map b/js/photos-5.js.map index 6d930056a..8275e94f1 100644 --- a/js/photos-5.js.map +++ b/js/photos-5.js.map @@ -1 +1 @@ -{"version":3,"file":"photos-5.js?v=d43d527a6d3d35d9d3fa","sources":["webpack:///./src/components/FileVirtualGrid.vue?c0ab","webpack:///./src/components/Loader.vue?1cb4","webpack:///./src/components/SeparatorVirtualGrid.vue?8517","webpack:///./src/views/Timeline.vue?9e76","webpack:///./src/components/FileVirtualGrid.vue?f66c","webpack:///./src/components/Loader.vue?6e38","webpack:///./src/components/SeparatorVirtualGrid.vue?288a","webpack:///./src/views/Timeline.vue?8a4c","webpack:///./src/components/FileVirtualGrid.vue?6cf5","webpack:///./src/components/Loader.vue?cd6e","webpack:///./src/components/SeparatorVirtualGrid.vue?85ee","webpack:///./src/views/Timeline.vue?4e14","webpack:///./src/components/FileVirtualGrid.vue?420d","webpack:///./src/components/Loader.vue?7c09","webpack:///./src/components/SeparatorVirtualGrid.vue?fd5c","webpack:///./src/views/Timeline.vue?33e9","webpack:///./src/assets/grid-sizes.js","webpack:///./src/components/FileVirtualGrid.vue","webpack:///./src/components/FileVirtualGrid.vue?950a","webpack:///./src/components/FileVirtualGrid.vue?ad0a","webpack:///./src/components/FileVirtualGrid.vue?ce24","webpack:///./src/components/Loader.vue","webpack:///./src/components/Loader.vue?1364","webpack:///./src/components/Loader.vue?bbe5","webpack:///./src/components/Loader.vue?c5ee","webpack:///./src/components/SeparatorVirtualGrid.vue","webpack:///./src/components/SeparatorVirtualGrid.vue?bd8e","webpack:///./src/components/SeparatorVirtualGrid.vue?11be","webpack:///./src/components/SeparatorVirtualGrid.vue?c4d6","webpack:///./src/mixins/GridConfig.js","webpack:///./src/patchedRequest.js","webpack:///./src/services/DavClient.js","webpack:///./src/services/DavRequest.js","webpack:///./src/services/GridConfig.js","webpack:///./src/services/PhotoSearch.js","webpack:///./src/views/Timeline.vue","webpack:///./src/views/Timeline.vue?21b8","webpack:///./src/views/Timeline.vue?e2ae","webpack:///./src/views/Timeline.vue?cf41"],"sourcesContent":["function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport { generateRemoteUrl, generateUrl } from '@nextcloud/router';\nimport { getCurrentUser } from '@nextcloud/auth';\nexport default {\n name: 'FileVirtualGrid',\n inheritAttrs: false,\n props: {\n item: {\n type: Object,\n required: true\n }\n },\n data: function data() {\n return {\n loaded: false\n };\n },\n computed: {\n davPath: function davPath() {\n return generateRemoteUrl(\"dav/files/\".concat(getCurrentUser().uid)) + this.item.injected.filename;\n },\n ariaUuid: function ariaUuid() {\n return \"image-\".concat(this.item.injected.fileid);\n },\n ariaLabel: function ariaLabel() {\n return t('photos', 'Open the full size \"{name}\" image', {\n name: this.item.injected.basename\n });\n },\n isImage: function isImage() {\n return this.item.injected.mime.startsWith('image');\n },\n src: function src() {\n return generateUrl(\"/core/preview?fileId=\".concat(this.item.injected.fileid, \"&x=\", 256, \"&y=\", 256, \"&a=false&v=\").concat(this.item.injected.etag));\n }\n },\n beforeDestroy: function beforeDestroy() {\n // cancel any pending load\n this.$refs.src = '';\n },\n methods: {\n openViewer: function openViewer() {\n var _this = this;\n\n OCA.Viewer.open({\n path: this.item.injected.filename,\n list: this.item.injected.list,\n loadMore: function () {\n var _loadMore = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {\n return regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return _this.item.injected.loadMore(true);\n\n case 2:\n return _context.abrupt(\"return\", _context.sent);\n\n case 3:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }));\n\n function loadMore() {\n return _loadMore.apply(this, arguments);\n }\n\n return loadMore;\n }()\n });\n },\n\n /** When the image is fully loaded by browser we remove the placeholder */\n onLoad: function onLoad() {\n this.loaded = true;\n }\n }\n};","//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n name: 'Loader'\n};","//\n//\n//\n//\n//\n//\n//\nexport default {\n name: 'SeparatorVirtualGrid',\n inheritAttrs: false,\n props: {\n item: {\n type: Object,\n required: true\n }\n }\n};","function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\n\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport * as moment from 'moment';\nimport { mapGetters } from 'vuex';\nimport getPhotos from '../services/PhotoSearch';\nimport EmptyContent from '../components/EmptyContent';\nimport FileVirtualGrid from '../components/FileVirtualGrid';\nimport SeparatorVirtualGrid from '../components/SeparatorVirtualGrid';\nimport VirtualGrid from 'vue-virtual-grid';\nimport Navigation from '../components/Navigation';\nimport Loader from '../components/Loader';\nimport cancelableRequest from '../utils/CancelableRequest';\nimport GridConfigMixin from '../mixins/GridConfig';\nexport default {\n name: 'Timeline',\n components: {\n EmptyContent: EmptyContent,\n VirtualGrid: VirtualGrid,\n Navigation: Navigation\n },\n mixins: [GridConfigMixin],\n props: {\n loading: {\n type: Boolean,\n required: true\n },\n onlyFavorites: {\n type: Boolean,\n default: false\n },\n rootTitle: {\n type: String,\n required: true\n },\n path: {\n type: String,\n default: ''\n }\n },\n data: function data() {\n return {\n cancelRequest: null,\n done: false,\n error: null,\n page: 0,\n lastSection: '',\n loaderComponent: Loader\n };\n },\n computed: _objectSpread(_objectSpread({}, mapGetters(['files', 'timeline'])), {}, {\n // list of loaded medias\n fileList: function fileList() {\n var _this = this;\n\n return this.timeline.map(function (fileId) {\n return _this.files[fileId];\n });\n },\n // list of displayed content in the grid (titles + medias)\n contentList: function contentList() {\n var _this2 = this;\n\n /** The goal of this flat map is to return an array of images separated by titles (months)\n * ie: [{month1}, {image1}, {image2}, {month2}, {image3}, {image4}, {image5}]\n * First we get the current month+year of the image\n * We compare it to the previous image month+year\n * If there is a difference we have to insert a title object before the current image\n * If it's equal we just add the current image to the array\n * Note: the injected param of objects are used to pass custom params to the grid lib\n * In our case injected could be an image/video (aka file) or a title (year/month)\n * Note2: titles are rendered full width and images are rendered on 1 column and 256x256 ratio\n */\n return this.fileList.flatMap(function (file, index) {\n var _this2$timeline;\n\n var finalArray = [];\n\n var currentSection = _this2.getFormatedDate(file.lastmod, 'YYYY MMMM');\n\n if (currentSection !== _this2.getFormatedDate((_this2$timeline = _this2.timeline[index - 1]) === null || _this2$timeline === void 0 ? void 0 : _this2$timeline.lastmod, 'YYYY MMMM') && _this2.lastSection !== currentSection) {\n finalArray.push({\n id: \"title-\".concat(index),\n injected: {\n year: _this2.getFormatedDate(file.lastmod, 'YYYY'),\n month: _this2.getFormatedDate(file.lastmod, 'MMMM')\n },\n height: 90,\n columnSpan: 0,\n // means full width\n newRow: true,\n renderComponent: SeparatorVirtualGrid\n });\n _this2.lastSection = currentSection; // we keep track of the last section for the next batch\n }\n\n finalArray.push({\n id: \"img-\".concat(file.fileid),\n injected: _objectSpread(_objectSpread({}, file), {}, {\n list: _this2.fileList,\n loadMore: _this2.getContent\n }),\n width: 256,\n height: 256,\n columnSpan: 1,\n renderComponent: FileVirtualGrid\n });\n return finalArray;\n });\n },\n // is current folder empty?\n isEmpty: function isEmpty() {\n return this.fileList.length === 0;\n }\n }),\n watch: {\n onlyFavorites: function onlyFavorites() {\n var _this3 = this;\n\n return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {\n return regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n // reset component\n _this3.resetState();\n\n _this3.getContent();\n\n case 2:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }))();\n }\n },\n beforeMount: function beforeMount() {\n this.getContent();\n },\n beforeDestroy: function beforeDestroy() {\n // cancel any pending requests\n if (this.cancelRequest) {\n this.cancelRequest('Changed view');\n }\n },\n methods: {\n /** Return next batch of data depending on global offset\n * @param {boolean} doReturn Returns a Promise with the list instead of a boolean\n * @returns {Promise} Returns a Promise with a boolean that stops infinite loading\n */\n getContent: function getContent(doReturn) {\n var _this4 = this;\n\n return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {\n var _cancelableRequest, request, cancel, numberOfImagesPerBatch, files;\n\n return regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n if (!_this4.done) {\n _context2.next = 2;\n break;\n }\n\n return _context2.abrupt(\"return\", Promise.resolve(true));\n\n case 2:\n // cancel any pending requests\n if (_this4.cancelRequest) {\n _this4.cancelRequest('Changed view');\n } // if we don't already have some cached data let's show a loader\n\n\n if (_this4.timeline.length === 0) {\n _this4.$emit('update:loading', true);\n } // done loading even with errors\n\n\n _cancelableRequest = cancelableRequest(getPhotos), request = _cancelableRequest.request, cancel = _cancelableRequest.cancel;\n _this4.cancelRequest = cancel;\n numberOfImagesPerBatch = _this4.gridConfig.count * 5; // loading 5 rows\n\n _context2.prev = 7;\n _context2.next = 10;\n return request(_this4.onlyFavorites, {\n page: _this4.page,\n // offset is incremented +1 by the virtualgrid lib\n perPage: numberOfImagesPerBatch\n });\n\n case 10:\n files = _context2.sent;\n\n // If we get less files than requested that means we got to the end\n if (files.length !== numberOfImagesPerBatch) {\n _this4.done = true;\n }\n\n _this4.$store.dispatch('updateTimeline', files);\n\n _this4.$store.dispatch('appendFiles', files);\n\n _this4.page += 1;\n\n if (!doReturn) {\n _context2.next = 17;\n break;\n }\n\n return _context2.abrupt(\"return\", Promise.resolve(files));\n\n case 17:\n return _context2.abrupt(\"return\", Promise.resolve(false));\n\n case 20:\n _context2.prev = 20;\n _context2.t0 = _context2[\"catch\"](7);\n\n if (_context2.t0.response && _context2.t0.response.status) {\n if (_context2.t0.response.status === 404) {\n _this4.error = 404;\n setTimeout(function () {\n _this4.$router.push({\n name: _this4.$route.name\n });\n }, 3000);\n } else {\n _this4.error = _context2.t0;\n }\n } // cancelled request, moving on...\n\n\n console.error('Error fetching timeline', _context2.t0);\n return _context2.abrupt(\"return\", Promise.resolve(true));\n\n case 25:\n _context2.prev = 25;\n\n // done loading even with errors\n _this4.$emit('update:loading', false);\n\n _this4.cancelRequest = null;\n return _context2.finish(25);\n\n case 29:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, null, [[7, 20, 25, 29]]);\n }))();\n },\n\n /**\n * Reset this component data to a pristine state\n */\n resetState: function resetState() {\n this.$store.dispatch('resetTimeline');\n this.done = false;\n this.error = null;\n this.page = 0;\n this.$emit('update:loading', true);\n this.$refs.virtualgrid.resetGrid();\n },\n getFormatedDate: function getFormatedDate(string, format) {\n return moment(string).format(format);\n }\n }\n};","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"@charset \\\"UTF-8\\\";\\n/**\\n * @copyright Copyright (c) 2019 John Molakvoæ \\n *\\n * @author John Molakvoæ \\n *\\n * @license GNU AGPL version 3 or any later version\\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 .\\n *\\n */\\n.file[data-v-5537a555],\\n.folder[data-v-5537a555] {\\n position: relative;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n -ms-user-select: none;\\n user-select: none;\\n border-radius: var(--border-radius);\\n overflow: hidden;\\n}\\n.file .cover[data-v-5537a555],\\n .folder .cover[data-v-5537a555] {\\n z-index: 2;\\n width: 100%;\\n padding-bottom: 100%;\\n transition: opacity var(--animation-quick) ease-in-out;\\n opacity: 0;\\n background-color: var(--color-main-text);\\n}\\n.file.active .cover[data-v-5537a555], .file:active .cover[data-v-5537a555], .file:hover .cover[data-v-5537a555], .file:focus .cover[data-v-5537a555],\\n .folder.active .cover[data-v-5537a555],\\n .folder:active .cover[data-v-5537a555],\\n .folder:hover .cover[data-v-5537a555],\\n .folder:focus .cover[data-v-5537a555] {\\n opacity: .3;\\n}\\n.file--clear.active .cover[data-v-5537a555], .file--clear:active .cover[data-v-5537a555], .file--clear:hover .cover[data-v-5537a555], .file--clear:focus .cover[data-v-5537a555],\\n .folder--clear.active .cover[data-v-5537a555],\\n .folder--clear:active .cover[data-v-5537a555],\\n .folder--clear:hover .cover[data-v-5537a555],\\n .folder--clear:focus .cover[data-v-5537a555] {\\n opacity: .1;\\n}\\n.fade-enter-active[data-v-5537a555], .fade-leave-active[data-v-5537a555] {\\n transition: opacity var(--animation-quick) ease-in-out;\\n}\\n.fade-enter[data-v-5537a555], .fade-leave-to[data-v-5537a555] {\\n opacity: 0;\\n}\\n.icon-video-white[data-v-5537a555] {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n z-index: 5;\\n}\\nimg[data-v-5537a555] {\\n position: absolute;\\n width: 100%;\\n height: 100%;\\n -o-object-fit: cover;\\n object-fit: cover;\\n}\\nsvg[data-v-5537a555] {\\n position: absolute;\\n width: 70%;\\n height: 70%;\\n}\\n.file--clear[data-v-5537a555] {\\n background: var(--color-background-hover);\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".loader {\\n display: grid;\\n height: 60px;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".grid-title[data-v-39804afc] {\\n grid-column: 1/8;\\n padding: 48px 0 12px 0;\\n margin: 0;\\n}\\n.grid-title span[data-v-39804afc] {\\n font-weight: normal;\\n}\\n.grid-title.first-title[data-v-39804afc] {\\n padding: 0 0 12px 0;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \"@media (min-width: 0px) and (max-width: 400px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 8px 256px 8px;\\n}\\n}\\n@media (min-width: 400px) and (max-width: 700px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 8px 256px 8px;\\n}\\n}\\n@media (min-width: 700px) and (max-width: 1024px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 44px 256px 44px;\\n}\\n}\\n@media (min-width: 1024px) and (max-width: 1280px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 44px 256px 44px;\\n}\\n}\\n@media (min-width: 1280px) and (max-width: 1440px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 66px 256px 66px;\\n}\\n}\\n@media (min-width: 1440px) and (max-width: 1600px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 66px 256px 66px;\\n}\\n}\\n@media (min-width: 1600px) and (max-width: 2048px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 66px 256px 66px;\\n}\\n}\\n@media (min-width: 2048px) and (max-width: 2560px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 88px 256px 88px;\\n}\\n}\\n@media (min-width: 2560px) and (max-width: 3440px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 88px 256px 88px;\\n}\\n}\\n@media (min-width: 3440px) {\\n.grid-container[data-v-e945440a] {\\n padding: 0px 88px 256px 88px;\\n}\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"a\",\n {\n staticClass: \"file\",\n class: { \"file--clear\": !_vm.loaded },\n attrs: { href: _vm.davPath, \"aria-label\": _vm.ariaLabel },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.openViewer($event)\n }\n }\n },\n [\n _vm.item.injected.mime.includes(\"video\") && _vm.hasPreview\n ? _c(\"div\", { staticClass: \"icon-video-white\" })\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"transition\", { attrs: { name: \"fade\" } }, [\n _c(\"img\", {\n directives: [\n {\n name: \"show\",\n rawName: \"v-show\",\n value: _vm.loaded,\n expression: \"loaded\"\n }\n ],\n ref: \"img\",\n attrs: {\n src: _vm.src,\n alt: _vm.item.injected.basename,\n \"aria-describedby\": _vm.ariaUuid\n },\n on: { load: _vm.onLoad }\n })\n ]),\n _vm._v(\" \"),\n !_vm.loaded\n ? _c(\n \"svg\",\n {\n attrs: {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 32 32\",\n fill: \"url(#placeholder__gradient)\"\n }\n },\n [\n _vm.isImage\n ? _c(\"use\", { attrs: { \"xlink:href\": \"#placeholder--img\" } })\n : _c(\"use\", { attrs: { \"xlink:href\": \"#placeholder--video\" } })\n ]\n )\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"p\", { staticClass: \"hidden-visually\", attrs: { id: _vm.ariaUuid } }, [\n _vm._v(_vm._s(_vm.item.injected.basename))\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"cover\", attrs: { role: \"none\" } })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { staticClass: \"loader\", attrs: { icon: \"loading\" } },\n [_vm._t(\"icon\", [_c(\"span\", { class: [\"loading\"] })])],\n 2\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"h2\",\n { staticClass: \"grid-title\", style: { height: _vm.item.height + \"px\" } },\n [\n _vm._v(\"\\n\\t\" + _vm._s(_vm.item.injected.month) + \"\\n\\t\"),\n _c(\"span\", [_vm._v(_vm._s(_vm.item.injected.year))])\n ]\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _vm.error === 404\n ? _c(\"EmptyContent\", { attrs: { \"illustration-name\": \"folder\" } }, [\n _vm._v(\n \"\\n\\t\" + _vm._s(_vm.t(\"photos\", \"This folder does not exists\")) + \"\\n\"\n )\n ])\n : _vm.error\n ? _c(\"EmptyContent\", [\n _vm._v(\"\\n\\t\" + _vm._s(_vm.t(\"photos\", \"An error occurred\")) + \"\\n\")\n ])\n : !_vm.loading\n ? _c(\n \"div\",\n [\n _vm.isEmpty\n ? _c(\"Navigation\", {\n key: \"navigation\",\n attrs: {\n basename: _vm.path,\n filename: \"/\",\n \"root-title\": _vm.rootTitle\n }\n })\n : _vm._e(),\n _vm._v(\" \"),\n _vm.isEmpty\n ? _c(\"EmptyContent\", { attrs: { \"illustration-name\": \"empty\" } }, [\n _vm._v(\n \"\\n\\t\\t\" +\n _vm._s(_vm.t(\"photos\", \"No photos in here\")) +\n \"\\n\\t\"\n )\n ])\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"grid-container\" },\n [\n _c(\"VirtualGrid\", {\n ref: \"virtualgrid\",\n attrs: {\n items: _vm.contentList,\n \"update-function\": _vm.getContent,\n \"get-column-count\": function() {\n return _vm.gridConfig.count\n },\n \"get-grid-gap\": function() {\n return _vm.gridConfig.gap\n },\n \"update-trigger-margin\": 700,\n loader: _vm.loaderComponent\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e()\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","// style-loader: Adds some css to the DOM by adding a