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

14
src/components/Folder.vue
View File

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

21
src/components/Photo.vue
View File

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

9
src/components/Settings.vue
View File

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

37
src/components/Timeline.vue
View File

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

9
src/main.ts
View File

@ -23,19 +23,10 @@ import 'reflect-metadata'
import Vue from 'vue'
import VueVirtualScroller from 'vue-virtual-scroller'
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 router from './router'
// Adding translations to the whole app
Vue.mixin({
methods: {
t,
n,
},
})
Vue.use(VueVirtualScroller)
// 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'
@Component
export default class MyMixin extends Vue {
export default class UserConfig extends Vue {
timelinePath = loadState('memories', 'timelinePath') || '';
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,
};