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",
|
||||
"video.js": "^7.21.1",
|
||||
"videojs-contrib-quality-levels": "^2.2.1",
|
||||
"vue": "^2.7.14",
|
||||
"vue": "^3.2.45",
|
||||
"vue-material-design-icons": "^5.1.2",
|
||||
"vue-router": "^3.6.5",
|
||||
"vue-virtual-scroller": "1.1.2",
|
||||
"vue-router": "^4.1.6",
|
||||
"vue-virtual-scroller": "2.0.0-beta.5",
|
||||
"webdav": "^4.11.2"
|
||||
},
|
||||
"browserslist": [
|
||||
|
@ -57,15 +57,20 @@
|
|||
"npm": ">=7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextcloud/babel-config": "^1.0.0",
|
||||
"@nextcloud/browserslist-config": "^2.3.0",
|
||||
"@nextcloud/webpack-vue-config": "^5.4.0",
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@types/url-parse": "^1.4.8",
|
||||
"@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",
|
||||
"sass": "^1.56.2",
|
||||
"sass-loader": "^13.2.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-loader": "^9.4.2",
|
||||
"typescript": "^4.9.4",
|
||||
"vue-loader": "^17.0.1",
|
||||
"webpack-cli": "^5.0.1",
|
||||
"workbox-webpack-plugin": "^6.5.4"
|
||||
}
|
||||
}
|
||||
|
|
10
src/App.vue
10
src/App.vue
|
@ -3,7 +3,7 @@
|
|||
|
||||
<NcContent
|
||||
app-name="memories"
|
||||
v-else
|
||||
v-else-if="false"
|
||||
:class="{
|
||||
'remove-gap': removeOuterGap,
|
||||
}"
|
||||
|
@ -35,10 +35,14 @@
|
|||
</div>
|
||||
</NcAppContent>
|
||||
</NcContent>
|
||||
|
||||
<div class="outer" v-else>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, { defineComponent } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import NcContent from "@nextcloud/vue/dist/Components/NcContent";
|
||||
import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
|
||||
|
@ -178,7 +182,7 @@ export default defineComponent({
|
|||
if (this.metadataComponent) {
|
||||
this.metadataComponent.$destroy();
|
||||
}
|
||||
this.metadataComponent = new Vue(Metadata as any);
|
||||
this.metadataComponent = new Metadata();
|
||||
// Only mount after we have all the info we need
|
||||
await this.metadataComponent.update(fileInfo);
|
||||
this.metadataComponent.$mount(el);
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<TopMatter ref="topmatter" />
|
||||
|
||||
<!-- No content found and nothing is loading -->
|
||||
<NcEmptyContent
|
||||
<!-- <NcEmptyContent
|
||||
title="Nothing to show here"
|
||||
:description="emptyViewDescription"
|
||||
v-if="loading === 0 && list.length === 0"
|
||||
|
@ -18,7 +18,7 @@
|
|||
<ArchiveIcon v-else-if="routeIsArchive" />
|
||||
<ImageMultipleIcon v-else />
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
</NcEmptyContent> -->
|
||||
|
||||
<!-- Main recycler view for rows -->
|
||||
<RecycleScroller
|
||||
|
@ -39,7 +39,10 @@
|
|||
<template #before>
|
||||
<!-- Show dynamic top matter, name of the view -->
|
||||
<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 }}
|
||||
</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" />
|
||||
|
||||
import "reflect-metadata";
|
||||
import Vue from "vue";
|
||||
import { createApp } from "vue";
|
||||
import VueVirtualScroller from "vue-virtual-scroller";
|
||||
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
|
||||
import GlobalMixin from "./mixins/GlobalMixin";
|
||||
|
@ -9,14 +9,14 @@ import UserConfig from "./mixins/UserConfig";
|
|||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { Route } from "vue-router";
|
||||
import { generateFilePath } from "@nextcloud/router";
|
||||
import { getRequestToken } from "@nextcloud/auth";
|
||||
import { IPhoto } from "./types";
|
||||
import type { IPhoto } from "./types";
|
||||
import type { RouteLocationNormalizedLoaded } from "vue-router";
|
||||
|
||||
// Global exposed variables
|
||||
declare global {
|
||||
var vueroute: () => Route;
|
||||
var vueroute: () => RouteLocationNormalizedLoaded;
|
||||
var OC: Nextcloud.v24.OC;
|
||||
var OCP: Nextcloud.v24.OCP;
|
||||
|
||||
|
@ -36,7 +36,7 @@ declare global {
|
|||
}
|
||||
|
||||
// Allow global access to the router
|
||||
globalThis.vueroute = () => router.currentRoute;
|
||||
globalThis.vueroute = () => router.currentRoute.value;
|
||||
|
||||
// Cache these for better performance
|
||||
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
|
||||
// TODO: remove when we have a proper fileinfo standalone library
|
||||
// original scripts are loaded from
|
||||
|
@ -91,8 +87,12 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
);
|
||||
});
|
||||
|
||||
export default new Vue({
|
||||
el: "#content",
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
});
|
||||
const Vue = createApp(App);
|
||||
Vue.use(router);
|
||||
Vue.use(VueVirtualScroller);
|
||||
|
||||
Vue.mixin(GlobalMixin);
|
||||
Vue.mixin(UserConfig);
|
||||
|
||||
Vue.mount("#content");
|
||||
export default Vue;
|
||||
|
|
|
@ -1,16 +1,13 @@
|
|||
import { generateUrl } from "@nextcloud/router";
|
||||
import { translate as t, translatePlural as n } from "@nextcloud/l10n";
|
||||
import Router from "vue-router";
|
||||
import Vue from "vue";
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import Timeline from "./components/Timeline.vue";
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: "history",
|
||||
export default createRouter({
|
||||
// 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
|
||||
base: generateUrl("/apps/memories"),
|
||||
history: createWebHistory(generateUrl("/apps/memories")),
|
||||
|
||||
linkActiveClass: "active",
|
||||
routes: [
|
||||
{
|
||||
|
@ -107,8 +104,8 @@ export default new Router({
|
|||
path: "/maps",
|
||||
name: "maps",
|
||||
// router-link doesn't support external url, let's force the redirect
|
||||
beforeEnter() {
|
||||
window.open(generateUrl("/apps/maps"), "_blank");
|
||||
redirect() {
|
||||
return generateUrl("/apps/maps");
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
@ -12,6 +12,6 @@
|
|||
"esModuleInterop": true
|
||||
},
|
||||
"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 path = require('path')
|
||||
|
||||
|
@ -14,9 +14,6 @@ webpackConfig.module.rules.push({
|
|||
},
|
||||
});
|
||||
webpackConfig.resolve.extensions.push('.ts');
|
||||
webpackConfig.resolve.alias = {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
}
|
||||
webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
|
||||
|
||||
webpackConfig.watchOptions = {
|
||||
|
@ -24,11 +21,13 @@ webpackConfig.watchOptions = {
|
|||
aggregateTimeout: 300,
|
||||
};
|
||||
|
||||
webpackConfig.plugins.push(
|
||||
new WorkboxPlugin.InjectManifest({
|
||||
swSrc: path.resolve(path.join('src', 'service-worker.js')),
|
||||
swDest: 'memories-service-worker.js',
|
||||
})
|
||||
);
|
||||
if (!isDev) {
|
||||
webpackConfig.plugins.push(
|
||||
new WorkboxPlugin.InjectManifest({
|
||||
swSrc: path.resolve(path.join('src', 'service-worker.js')),
|
||||
swDest: 'memories-service-worker.js',
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
|
|
Loading…
Reference in New Issue