RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More migration

pull/37/head
Varun Patil 2022-09-12 19:36:27 -07:00
parent d496ee57bd
commit dfe88f6aaa
11 changed files with 69 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/memories-main.js
View File

File diff suppressed because one or more lines are too long

2
js/memories-main.js.map
View File

File diff suppressed because one or more lines are too long

27
src/App.vue
View File

@ -46,13 +46,14 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { NcContent, NcAppContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings} from '@nextcloud/vue' import { NcContent, NcAppContent, NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings} from '@nextcloud/vue'
import Timeline from './components/Timeline.vue' import Timeline from './components/Timeline.vue'
import Settings from './components/Settings.vue' import Settings from './components/Settings.vue'
import GlobalMixin from './mixins/GlobalMixin';
export default { @Component({
name: 'App',
components: { components: {
NcContent, NcContent,
NcAppContent, NcAppContent,
@ -63,24 +64,8 @@ export default {
Timeline, Timeline,
Settings, Settings,
}, },
data() { })
return { export default class App extends Mixins(GlobalMixin) {
loading: false, // Outer element
show: true,
starred: false,
}
},
methods: {
close() {
this.show = false
console.debug(arguments)
},
newButtonAction() {
console.debug(arguments)
},
log() {
console.debug(arguments)
},
},
} }
</script> </script>

14
src/components/Folder.vue
View File

@ -33,19 +33,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
import { IFileInfo, IFolder } from '../types'; import { IFileInfo, IFolder } from '../types';
import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import constants from "../mixins/constants"
import { getPreviewUrl } from "../services/FileUtils"; import { getPreviewUrl } from "../services/FileUtils";
@Component({}) @Component({})
export default class Folder extends Vue { export default class Folder extends Mixins(GlobalMixin) {
@Prop() data: IFolder; @Prop() data: IFolder;
@Prop() rowHeight: number; @Prop() rowHeight: number;
private readonly c = constants // Separate property because the one on data isn't reactive
private previewFileInfos: IFileInfo[] = []; private previewFileInfos: IFileInfo[] = [];
/** Passthrough */ /** Passthrough */
@ -82,8 +82,10 @@ export default class Folder extends Vue {
} }
/** Open folder */ /** Open folder */
openFolder(id) { openFolder(id: number) {
this.$router.push({ name: 'folders', params: { id } }); this.$router.push({ name: 'folders', params: {
id: id.toString(),
}});
} }
} }
</script> </script>

21
src/components/Photo.vue
View File

@ -37,18 +37,17 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'; import { Component, Prop, Emit, Mixins } from 'vue-property-decorator';
import { IDay, IPhoto } from "../types"; import { IDay, IPhoto } from "../types";
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import constants from "../mixins/constants"
import errorsvg from "../assets/error.svg"; import errorsvg from "../assets/error.svg";
import { getPreviewUrl } from "../services/FileUtils"; import { getPreviewUrl } from "../services/FileUtils";
import GlobalMixin from '../mixins/GlobalMixin';
@Component({}) @Component({})
export default class Photo extends Vue { export default class Photo extends Mixins(GlobalMixin) {
private touchTimer = 0; private touchTimer = 0;
private readonly c = constants;
@Prop() data: IPhoto; @Prop() data: IPhoto;
@Prop() rowHeight: number; @Prop() rowHeight: number;
@ -60,12 +59,12 @@ export default class Photo extends Vue {
/** Get URL for image to show */ /** Get URL for image to show */
getUrl() { getUrl() {
if (this.data.flag & constants.FLAG_PLACEHOLDER) { if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return undefined; return undefined;
} else if (this.data.flag & constants.FLAG_LOAD_FAIL) { } else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
return errorsvg; return errorsvg;
} else if (this.data.flag & constants.FLAG_FORCE_RELOAD) { } else if (this.data.flag & this.c.FLAG_FORCE_RELOAD) {
this.data.flag &= ~constants.FLAG_FORCE_RELOAD; this.data.flag &= ~this.c.FLAG_FORCE_RELOAD;
return undefined; return undefined;
} else { } else {
return getPreviewUrl(this.data.fileid, this.data.etag); return getPreviewUrl(this.data.fileid, this.data.etag);
@ -74,7 +73,7 @@ export default class Photo extends Vue {
/** Error in loading image */ /** Error in loading image */
error(e: any) { error(e: any) {
this.data.flag |= (constants.FLAG_LOADED | constants.FLAG_LOAD_FAIL); this.data.flag |= (this.c.FLAG_LOADED | this.c.FLAG_LOAD_FAIL);
} }
/** Pass to parent */ /** Pass to parent */
@ -85,7 +84,7 @@ export default class Photo extends Vue {
/** Open viewer */ /** Open viewer */
async openFile() { async openFile() {
// Check if this is a placeholder // Check if this is a placeholder
if (this.data.flag & constants.FLAG_PLACEHOLDER) { if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return; return;
} }
@ -170,7 +169,7 @@ export default class Photo extends Vue {
} }
toggleSelect() { toggleSelect() {
if (this.data.flag & constants.FLAG_PLACEHOLDER) { if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return; return;
} }
this.emitSelect(this.data); this.emitSelect(this.data);

9
src/components/Settings.vue
View File

@ -41,14 +41,11 @@ input[type=text] {
<script lang="ts"> <script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'; import { Component, Mixins } from 'vue-property-decorator';
import GlobalMixin from '../mixins/GlobalMixin';
import UserConfig from '../mixins/UserConfig' import UserConfig from '../mixins/UserConfig'
@Component({ @Component
mixins: [ export default class Settings extends Mixins(UserConfig, GlobalMixin) {
UserConfig,
],
})
export default class Settings extends Mixins(UserConfig) {
async updateAll() { async updateAll() {
const res = await this.updateSetting('timelinePath'); const res = await this.updateSetting('timelinePath');
if (res.status === 200) { if (res.status === 200) {

37
src/components/Timeline.vue
View File

@ -91,17 +91,17 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'; import { Component, Watch, Mixins } from 'vue-property-decorator';
import { IDay, IPhoto, IRow, ITick } from "../types"; import { IDay, IPhoto, IRow, ITick } from "../types";
import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue'; import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue';
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import * as utils from "../services/Utils"; import * as utils from "../services/Utils";
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import Folder from "./Folder.vue"; import Folder from "./Folder.vue";
import Photo from "./Photo.vue"; import Photo from "./Photo.vue";
import constants from "../mixins/constants";
const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
const MAX_PHOTO_WIDTH = 175; // Max width of a photo const MAX_PHOTO_WIDTH = 175; // Max width of a photo
@ -128,7 +128,7 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
NcButton NcButton
} }
}) })
export default class Timeline extends Vue { export default class Timeline extends Mixins(GlobalMixin) {
/** Loading days response */ /** Loading days response */
private loading = true; private loading = true;
/** Main list of rows */ /** Main list of rows */
@ -180,9 +180,6 @@ export default class Timeline extends Vue {
/** State for request cancellations */ /** State for request cancellations */
private state = Math.random(); private state = Math.random();
/** Constants for HTML template */
private readonly c = constants;
mounted() { mounted() {
this.handleResize(); this.handleResize();
this.fetchDays(); this.fetchDays();
@ -300,7 +297,7 @@ export default class Timeline extends Vue {
row.photos = new Array(row.pct); row.photos = new Array(row.pct);
for (let j = 0; j < row.pct; j++) { for (let j = 0; j < row.pct; j++) {
row.photos[j] = { row.photos[j] = {
flag: constants.FLAG_PLACEHOLDER, flag: this.c.FLAG_PLACEHOLDER,
fileid: row.dayId * 10000 + i * 1000 + j, fileid: row.dayId * 10000 + i * 1000 + j,
}; };
} }
@ -310,8 +307,8 @@ export default class Timeline extends Vue {
// Force reload all loaded images // Force reload all loaded images
if ((i < this.currentStart || i > this.currentEnd) && row.photos) { if ((i < this.currentStart || i > this.currentEnd) && row.photos) {
for (const photo of row.photos) { for (const photo of row.photos) {
if (photo.flag & constants.FLAG_LOADED) { if (photo.flag & this.c.FLAG_LOADED) {
photo.flag = (photo.flag & ~constants.FLAG_LOADED) | constants.FLAG_FORCE_RELOAD; photo.flag = (photo.flag & ~this.c.FLAG_LOADED) | this.c.FLAG_FORCE_RELOAD;
} }
} }
} }
@ -663,11 +660,11 @@ export default class Timeline extends Vue {
// Flag conversion // Flag conversion
if (photo.isvideo) { if (photo.isvideo) {
photo.flag |= constants.FLAG_IS_VIDEO; photo.flag |= this.c.FLAG_IS_VIDEO;
delete photo.isvideo; delete photo.isvideo;
} }
if (photo.isfavorite) { if (photo.isfavorite) {
photo.flag |= constants.FLAG_IS_FAVORITE; photo.flag |= this.c.FLAG_IS_FAVORITE;
delete photo.isfavorite; delete photo.isfavorite;
} }
@ -784,10 +781,10 @@ export default class Timeline extends Vue {
selectPhoto(photo: IPhoto) { selectPhoto(photo: IPhoto) {
const nval = !this.selection.has(photo); const nval = !this.selection.has(photo);
if (nval) { if (nval) {
photo.flag |= constants.FLAG_SELECTED; photo.flag |= this.c.FLAG_SELECTED;
this.selection.add(photo); this.selection.add(photo);
} else { } else {
photo.flag &= ~constants.FLAG_SELECTED; photo.flag &= ~this.c.FLAG_SELECTED;
this.selection.delete(photo); this.selection.delete(photo);
} }
this.$forceUpdate(); this.$forceUpdate();
@ -796,7 +793,7 @@ export default class Timeline extends Vue {
/** Clear all selected photos */ /** Clear all selected photos */
clearSelection() { clearSelection() {
for (const photo of this.selection) { for (const photo of this.selection) {
photo.flag &= ~constants.FLAG_SELECTED; photo.flag &= ~this.c.FLAG_SELECTED;
} }
this.selection.clear(); this.selection.clear();
this.$forceUpdate(); this.$forceUpdate();
@ -844,7 +841,7 @@ export default class Timeline extends Vue {
for (const row of day.rows) { for (const row of day.rows) {
for (const photo of row.photos) { for (const photo of row.photos) {
if (delIds.has(photo.fileid)) { if (delIds.has(photo.fileid)) {
photo.flag |= constants.FLAG_LEAVING; photo.flag |= this.c.FLAG_LEAVING;
} }
} }
} }
@ -859,10 +856,10 @@ export default class Timeline extends Vue {
let nextExit = false; let nextExit = false;
for (const row of day.rows) { for (const row of day.rows) {
for (const photo of row.photos) { for (const photo of row.photos) {
if (photo.flag & constants.FLAG_LEAVING) { if (photo.flag & this.c.FLAG_LEAVING) {
nextExit = true; nextExit = true;
} else if (nextExit) { } else if (nextExit) {
photo.flag |= constants.FLAG_EXIT_LEFT; photo.flag |= this.c.FLAG_EXIT_LEFT;
exitedLeft.add(photo); exitedLeft.add(photo);
} }
} }
@ -881,8 +878,8 @@ export default class Timeline extends Vue {
// Enter from right all photos that exited left // Enter from right all photos that exited left
exitedLeft.forEach((photo: any) => { exitedLeft.forEach((photo: any) => {
photo.flag &= ~constants.FLAG_EXIT_LEFT; photo.flag &= ~this.c.FLAG_EXIT_LEFT;
photo.flag |= constants.FLAG_ENTER_RIGHT; photo.flag |= this.c.FLAG_ENTER_RIGHT;
}); });
// clear selection at this point // clear selection at this point
@ -893,7 +890,7 @@ export default class Timeline extends Vue {
// Clear enter right flags // Clear enter right flags
exitedLeft.forEach((photo: any) => { exitedLeft.forEach((photo: any) => {
photo.flag &= ~constants.FLAG_ENTER_RIGHT; photo.flag &= ~this.c.FLAG_ENTER_RIGHT;
}); });
// Reflow timeline // Reflow timeline

9
src/main.ts
View File

@ -23,19 +23,10 @@ import 'reflect-metadata'
import Vue from 'vue' import Vue 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 { translate as t, translatePlural as n } from '@nextcloud/l10n'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
// Adding translations to the whole app
Vue.mixin({
methods: {
t,
n,
},
})
Vue.use(VueVirtualScroller) Vue.use(VueVirtualScroller)
// https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js // https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js

21
src/mixins/GlobalMixin.ts 100644
View File

@ -0,0 +1,21 @@
import { Component, Vue } from 'vue-property-decorator';
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
@Component
export default class GlobalMixin extends Vue {
public readonly t = t;
public readonly n = n;
public readonly c = {
FLAG_PLACEHOLDER: 1 << 0,
FLAG_LOADED: 1 << 1,
FLAG_LOAD_FAIL: 1 << 2,
FLAG_IS_VIDEO: 1 << 3,
FLAG_IS_FAVORITE: 1 << 4,
FLAG_SELECTED: 1 << 5,
FLAG_LEAVING: 1 << 6,
FLAG_EXIT_LEFT: 1 << 7,
FLAG_ENTER_RIGHT: 1 << 8,
FLAG_FORCE_RELOAD: 1 << 9,
}
}

2
src/mixins/UserConfig.ts
View File

@ -29,7 +29,7 @@ import axios from '@nextcloud/axios'
const eventName = 'memories:user-config-changed' const eventName = 'memories:user-config-changed'
@Component @Component
export default class MyMixin extends Vue { export default class UserConfig extends Vue {
timelinePath = loadState('memories', 'timelinePath') || ''; timelinePath = loadState('memories', 'timelinePath') || '';
created() { created() {

12
src/mixins/constants.ts
View File

@ -1,12 +0,0 @@
export default {
FLAG_PLACEHOLDER: 1 << 0,
FLAG_LOADED: 1 << 1,
FLAG_LOAD_FAIL: 1 << 2,
FLAG_IS_VIDEO: 1 << 3,
FLAG_IS_FAVORITE: 1 << 4,
FLAG_SELECTED: 1 << 5,
FLAG_LEAVING: 1 << 6,
FLAG_EXIT_LEFT: 1 << 7,
FLAG_ENTER_RIGHT: 1 << 8,
FLAG_FORCE_RELOAD: 1 << 9,
};