Compare commits
3 Commits
Author | SHA1 | Date |
---|---|---|
Varun Patil | addb60d9af | |
Varun Patil | fac51d30ab | |
Varun Patil | 5ad6f0e042 |
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
|
@ -43,10 +43,10 @@
|
||||||
"reflect-metadata": "^0.1.13",
|
"reflect-metadata": "^0.1.13",
|
||||||
"video.js": "^7.21.1",
|
"video.js": "^7.21.1",
|
||||||
"videojs-contrib-quality-levels": "^2.2.1",
|
"videojs-contrib-quality-levels": "^2.2.1",
|
||||||
"vue": "^2.7.14",
|
"vue": "^3.2.45",
|
||||||
"vue-material-design-icons": "^5.1.2",
|
"vue-material-design-icons": "^5.1.2",
|
||||||
"vue-router": "^3.6.5",
|
"vue-router": "^4.1.6",
|
||||||
"vue-virtual-scroller": "1.1.2",
|
"vue-virtual-scroller": "2.0.0-beta.5",
|
||||||
"webdav": "^4.11.2"
|
"webdav": "^4.11.2"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
|
@ -57,15 +57,20 @@
|
||||||
"npm": ">=7.0.0"
|
"npm": ">=7.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@nextcloud/babel-config": "^1.0.0",
|
|
||||||
"@nextcloud/browserslist-config": "^2.3.0",
|
"@nextcloud/browserslist-config": "^2.3.0",
|
||||||
"@nextcloud/webpack-vue-config": "^5.4.0",
|
|
||||||
"@playwright/test": "^1.28.1",
|
"@playwright/test": "^1.28.1",
|
||||||
"@types/url-parse": "^1.4.8",
|
|
||||||
"@types/video.js": "^7.3.50",
|
"@types/video.js": "^7.3.50",
|
||||||
|
"babel-loader": "^9.1.0",
|
||||||
|
"css-loader": "^6.7.2",
|
||||||
|
"node-polyfill-webpack-plugin": "^2.0.1",
|
||||||
"playwright": "^1.28.1",
|
"playwright": "^1.28.1",
|
||||||
|
"sass": "^1.56.2",
|
||||||
|
"sass-loader": "^13.2.0",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
"ts-loader": "^9.4.2",
|
"ts-loader": "^9.4.2",
|
||||||
"typescript": "^4.9.4",
|
"typescript": "^4.9.4",
|
||||||
|
"vue-loader": "^17.0.1",
|
||||||
|
"webpack-cli": "^5.0.1",
|
||||||
"workbox-webpack-plugin": "^6.5.4"
|
"workbox-webpack-plugin": "^6.5.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
10
src/App.vue
10
src/App.vue
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<NcContent
|
<NcContent
|
||||||
app-name="memories"
|
app-name="memories"
|
||||||
v-else
|
v-else-if="false"
|
||||||
:class="{
|
:class="{
|
||||||
'remove-gap': removeOuterGap,
|
'remove-gap': removeOuterGap,
|
||||||
}"
|
}"
|
||||||
|
@ -35,10 +35,14 @@
|
||||||
</div>
|
</div>
|
||||||
</NcAppContent>
|
</NcAppContent>
|
||||||
</NcContent>
|
</NcContent>
|
||||||
|
|
||||||
|
<div class="outer" v-else>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue, { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
import NcContent from "@nextcloud/vue/dist/Components/NcContent";
|
import NcContent from "@nextcloud/vue/dist/Components/NcContent";
|
||||||
import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
|
import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
|
||||||
|
@ -178,7 +182,7 @@ export default defineComponent({
|
||||||
if (this.metadataComponent) {
|
if (this.metadataComponent) {
|
||||||
this.metadataComponent.$destroy();
|
this.metadataComponent.$destroy();
|
||||||
}
|
}
|
||||||
this.metadataComponent = new Vue(Metadata as any);
|
this.metadataComponent = new Metadata();
|
||||||
// Only mount after we have all the info we need
|
// Only mount after we have all the info we need
|
||||||
await this.metadataComponent.update(fileInfo);
|
await this.metadataComponent.update(fileInfo);
|
||||||
this.metadataComponent.$mount(el);
|
this.metadataComponent.$mount(el);
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<TopMatter ref="topmatter" />
|
<TopMatter ref="topmatter" />
|
||||||
|
|
||||||
<!-- No content found and nothing is loading -->
|
<!-- No content found and nothing is loading -->
|
||||||
<NcEmptyContent
|
<!-- <NcEmptyContent
|
||||||
title="Nothing to show here"
|
title="Nothing to show here"
|
||||||
:description="emptyViewDescription"
|
:description="emptyViewDescription"
|
||||||
v-if="loading === 0 && list.length === 0"
|
v-if="loading === 0 && list.length === 0"
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
<ArchiveIcon v-else-if="routeIsArchive" />
|
<ArchiveIcon v-else-if="routeIsArchive" />
|
||||||
<ImageMultipleIcon v-else />
|
<ImageMultipleIcon v-else />
|
||||||
</template>
|
</template>
|
||||||
</NcEmptyContent>
|
</NcEmptyContent> -->
|
||||||
|
|
||||||
<!-- Main recycler view for rows -->
|
<!-- Main recycler view for rows -->
|
||||||
<RecycleScroller
|
<RecycleScroller
|
||||||
|
@ -39,7 +39,10 @@
|
||||||
<template #before>
|
<template #before>
|
||||||
<!-- Show dynamic top matter, name of the view -->
|
<!-- Show dynamic top matter, name of the view -->
|
||||||
<div class="recycler-before" ref="recyclerBefore">
|
<div class="recycler-before" ref="recyclerBefore">
|
||||||
<div class="text" v-show="!$refs.topmatter.type && list.length > 0">
|
<div
|
||||||
|
class="text"
|
||||||
|
v-show="!(<any>$refs.topmatter)?.type && list.length > 0"
|
||||||
|
>
|
||||||
{{ viewName }}
|
{{ viewName }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1408,4 +1411,4 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
28
src/main.ts
28
src/main.ts
|
@ -1,7 +1,7 @@
|
||||||
/// <reference types="@nextcloud/typings" />
|
/// <reference types="@nextcloud/typings" />
|
||||||
|
|
||||||
import "reflect-metadata";
|
import "reflect-metadata";
|
||||||
import Vue from "vue";
|
import { createApp } from "vue";
|
||||||
import VueVirtualScroller from "vue-virtual-scroller";
|
import VueVirtualScroller from "vue-virtual-scroller";
|
||||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||||
import GlobalMixin from "./mixins/GlobalMixin";
|
import GlobalMixin from "./mixins/GlobalMixin";
|
||||||
|
@ -9,14 +9,14 @@ import UserConfig from "./mixins/UserConfig";
|
||||||
|
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import { Route } from "vue-router";
|
|
||||||
import { generateFilePath } from "@nextcloud/router";
|
import { generateFilePath } from "@nextcloud/router";
|
||||||
import { getRequestToken } from "@nextcloud/auth";
|
import { getRequestToken } from "@nextcloud/auth";
|
||||||
import { IPhoto } from "./types";
|
import type { IPhoto } from "./types";
|
||||||
|
import type { RouteLocationNormalizedLoaded } from "vue-router";
|
||||||
|
|
||||||
// Global exposed variables
|
// Global exposed variables
|
||||||
declare global {
|
declare global {
|
||||||
var vueroute: () => Route;
|
var vueroute: () => RouteLocationNormalizedLoaded;
|
||||||
var OC: Nextcloud.v24.OC;
|
var OC: Nextcloud.v24.OC;
|
||||||
var OCP: Nextcloud.v24.OCP;
|
var OCP: Nextcloud.v24.OCP;
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ declare global {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Allow global access to the router
|
// Allow global access to the router
|
||||||
globalThis.vueroute = () => router.currentRoute;
|
globalThis.vueroute = () => router.currentRoute.value;
|
||||||
|
|
||||||
// Cache these for better performance
|
// Cache these for better performance
|
||||||
globalThis.windowInnerWidth = window.innerWidth;
|
globalThis.windowInnerWidth = window.innerWidth;
|
||||||
|
@ -67,10 +67,6 @@ if (!globalThis.videoClientIdPersistent) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Vue.mixin(GlobalMixin);
|
|
||||||
Vue.mixin(UserConfig);
|
|
||||||
Vue.use(VueVirtualScroller);
|
|
||||||
|
|
||||||
// https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js
|
// https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js
|
||||||
// TODO: remove when we have a proper fileinfo standalone library
|
// TODO: remove when we have a proper fileinfo standalone library
|
||||||
// original scripts are loaded from
|
// original scripts are loaded from
|
||||||
|
@ -91,8 +87,12 @@ window.addEventListener("DOMContentLoaded", () => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export default new Vue({
|
const Vue = createApp(App);
|
||||||
el: "#content",
|
Vue.use(router);
|
||||||
router,
|
Vue.use(VueVirtualScroller);
|
||||||
render: (h) => h(App),
|
|
||||||
});
|
Vue.mixin(GlobalMixin);
|
||||||
|
Vue.mixin(UserConfig);
|
||||||
|
|
||||||
|
Vue.mount("#content");
|
||||||
|
export default Vue;
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
import { generateUrl } from "@nextcloud/router";
|
import { generateUrl } from "@nextcloud/router";
|
||||||
import { translate as t, translatePlural as n } from "@nextcloud/l10n";
|
import { translate as t, translatePlural as n } from "@nextcloud/l10n";
|
||||||
import Router from "vue-router";
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
import Vue from "vue";
|
|
||||||
import Timeline from "./components/Timeline.vue";
|
import Timeline from "./components/Timeline.vue";
|
||||||
|
|
||||||
Vue.use(Router);
|
export default createRouter({
|
||||||
|
|
||||||
export default new Router({
|
|
||||||
mode: "history",
|
|
||||||
// if index.php is in the url AND we got this far, then it's working:
|
// if index.php is in the url AND we got this far, then it's working:
|
||||||
// let's keep using index.php in the url
|
// let's keep using index.php in the url
|
||||||
base: generateUrl("/apps/memories"),
|
history: createWebHistory(generateUrl("/apps/memories")),
|
||||||
|
|
||||||
linkActiveClass: "active",
|
linkActiveClass: "active",
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
|
@ -107,8 +104,8 @@ export default new Router({
|
||||||
path: "/maps",
|
path: "/maps",
|
||||||
name: "maps",
|
name: "maps",
|
||||||
// router-link doesn't support external url, let's force the redirect
|
// router-link doesn't support external url, let's force the redirect
|
||||||
beforeEnter() {
|
redirect() {
|
||||||
window.open(generateUrl("/apps/maps"), "_blank");
|
return generateUrl("/apps/maps");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,6 @@
|
||||||
"esModuleInterop": true
|
"esModuleInterop": true
|
||||||
},
|
},
|
||||||
"vueCompilerOptions": {
|
"vueCompilerOptions": {
|
||||||
"target": 2.7
|
"target": 3
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,144 @@
|
||||||
|
/**
|
||||||
|
* @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
*
|
||||||
|
* @license AGPL-3.0-or-later
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require("path");
|
||||||
|
const webpack = require("webpack");
|
||||||
|
|
||||||
|
const { VueLoaderPlugin } = require("vue-loader");
|
||||||
|
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
|
||||||
|
const TerserPlugin = require("terser-webpack-plugin");
|
||||||
|
|
||||||
|
const appName = process.env.npm_package_name;
|
||||||
|
const appVersion = process.env.npm_package_version;
|
||||||
|
const buildMode = process.env.NODE_ENV;
|
||||||
|
const isDev = buildMode === "development";
|
||||||
|
console.info("Building", appName, appVersion, "\n");
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
RULE_CSS: {
|
||||||
|
test: /\.css$/,
|
||||||
|
use: ["style-loader", "css-loader"],
|
||||||
|
},
|
||||||
|
RULE_SCSS: {
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: ["style-loader", "css-loader", "sass-loader"],
|
||||||
|
},
|
||||||
|
RULE_VUE: {
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: "vue-loader",
|
||||||
|
},
|
||||||
|
RULE_JS: {
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: "babel-loader",
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
RULE_ASSETS: {
|
||||||
|
test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
|
||||||
|
type: "asset/inline",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
target: "web",
|
||||||
|
mode: buildMode,
|
||||||
|
devtool: isDev ? "cheap-source-map" : "source-map",
|
||||||
|
|
||||||
|
entry: {
|
||||||
|
main: path.resolve(path.join("src", "main.js")),
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve("./js"),
|
||||||
|
publicPath: path.join("/apps/", appName, "/js/"),
|
||||||
|
|
||||||
|
// Output file names
|
||||||
|
filename: `${appName}-[name].js?v=[contenthash]`,
|
||||||
|
chunkFilename: `${appName}-[name].js?v=[contenthash]`,
|
||||||
|
|
||||||
|
// Clean output before each build
|
||||||
|
clean: true,
|
||||||
|
|
||||||
|
// Make sure sourcemaps have a proper path and do not
|
||||||
|
// leak local paths https://github.com/webpack/webpack/issues/3603
|
||||||
|
devtoolNamespace: appName,
|
||||||
|
devtoolModuleFilenameTemplate(info) {
|
||||||
|
const rootDir = process.cwd();
|
||||||
|
const rel = path.relative(rootDir, info.absoluteResourcePath);
|
||||||
|
return `webpack:///${appName}/${rel}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
hot: true,
|
||||||
|
host: "127.0.0.1",
|
||||||
|
port: 3000,
|
||||||
|
client: {
|
||||||
|
overlay: false,
|
||||||
|
},
|
||||||
|
devMiddleware: {
|
||||||
|
writeToDisk: true,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
cache: !isDev,
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
chunkIds: "named",
|
||||||
|
splitChunks: {
|
||||||
|
automaticNameDelimiter: "-",
|
||||||
|
},
|
||||||
|
minimize: !isDev,
|
||||||
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
terserOptions: {
|
||||||
|
output: {
|
||||||
|
comments: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extractComments: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: Object.values(rules),
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
|
||||||
|
// Make sure we auto-inject node polyfills on demand
|
||||||
|
// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
|
||||||
|
new NodePolyfillPlugin(),
|
||||||
|
|
||||||
|
// Make appName & appVersion available as a constant
|
||||||
|
new webpack.DefinePlugin({ appName: JSON.stringify(appName) }),
|
||||||
|
new webpack.DefinePlugin({ appVersion: JSON.stringify(appVersion) }),
|
||||||
|
],
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ["*", ".js", ".vue"],
|
||||||
|
symlinks: false,
|
||||||
|
},
|
||||||
|
};
|
19
webpack.js
19
webpack.js
|
@ -1,4 +1,4 @@
|
||||||
const webpackConfig = require('@nextcloud/webpack-vue-config')
|
const webpackConfig = require('./webpack-base')
|
||||||
const WorkboxPlugin = require('workbox-webpack-plugin')
|
const WorkboxPlugin = require('workbox-webpack-plugin')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
|
|
||||||
|
@ -14,9 +14,6 @@ webpackConfig.module.rules.push({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
webpackConfig.resolve.extensions.push('.ts');
|
webpackConfig.resolve.extensions.push('.ts');
|
||||||
webpackConfig.resolve.alias = {
|
|
||||||
'vue$': 'vue/dist/vue.esm.js',
|
|
||||||
}
|
|
||||||
webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
|
webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
|
||||||
|
|
||||||
webpackConfig.watchOptions = {
|
webpackConfig.watchOptions = {
|
||||||
|
@ -24,11 +21,13 @@ webpackConfig.watchOptions = {
|
||||||
aggregateTimeout: 300,
|
aggregateTimeout: 300,
|
||||||
};
|
};
|
||||||
|
|
||||||
webpackConfig.plugins.push(
|
if (!isDev) {
|
||||||
new WorkboxPlugin.InjectManifest({
|
webpackConfig.plugins.push(
|
||||||
swSrc: path.resolve(path.join('src', 'service-worker.js')),
|
new WorkboxPlugin.InjectManifest({
|
||||||
swDest: 'memories-service-worker.js',
|
swSrc: path.resolve(path.join('src', 'service-worker.js')),
|
||||||
})
|
swDest: 'memories-service-worker.js',
|
||||||
);
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = webpackConfig
|
module.exports = webpackConfig
|
||||||
|
|
Loading…
Reference in New Issue