2022-08-14 20:54:18 +00:00
|
|
|
<template>
|
2022-10-28 19:08:34 +00:00
|
|
|
<FirstStart v-if="isFirstStart" />
|
|
|
|
|
|
|
|
<NcContent
|
|
|
|
app-name="memories"
|
|
|
|
v-else
|
|
|
|
:class="{
|
|
|
|
'remove-gap': removeOuterGap,
|
|
|
|
}"
|
|
|
|
>
|
2022-10-29 01:34:17 +00:00
|
|
|
<NcAppNavigation v-if="showNavigation">
|
2022-10-28 19:08:34 +00:00
|
|
|
<template id="app-memories-navigation" #list>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'timeline' }"
|
|
|
|
:title="t('memories', 'Timeline')"
|
|
|
|
exact
|
|
|
|
>
|
|
|
|
<ImageMultiple slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'folders' }"
|
|
|
|
:title="t('memories', 'Folders')"
|
|
|
|
>
|
|
|
|
<FolderIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'favorites' }"
|
|
|
|
:title="t('memories', 'Favorites')"
|
|
|
|
>
|
|
|
|
<Star slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'videos' }"
|
|
|
|
:title="t('memories', 'Videos')"
|
|
|
|
>
|
|
|
|
<Video slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'albums' }"
|
|
|
|
:title="t('memories', 'Albums')"
|
|
|
|
v-if="showAlbums"
|
|
|
|
>
|
|
|
|
<AlbumIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'people' }"
|
|
|
|
:title="t('memories', 'People')"
|
|
|
|
v-if="showPeople"
|
|
|
|
>
|
|
|
|
<PeopleIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'archive' }"
|
|
|
|
:title="t('memories', 'Archive')"
|
|
|
|
>
|
|
|
|
<ArchiveIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'thisday' }"
|
|
|
|
:title="t('memories', 'On this day')"
|
|
|
|
>
|
|
|
|
<CalendarIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'tags' }"
|
|
|
|
v-if="config_tagsEnabled"
|
|
|
|
:title="t('memories', 'Tags')"
|
|
|
|
>
|
|
|
|
<TagsIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem
|
|
|
|
:to="{ name: 'maps' }"
|
|
|
|
v-if="config_mapsEnabled"
|
|
|
|
:title="t('memories', 'Maps')"
|
|
|
|
>
|
|
|
|
<MapIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
|
|
|
</template>
|
|
|
|
<template #footer>
|
|
|
|
<NcAppNavigationSettings :title="t('memories', 'Settings')">
|
|
|
|
<Settings />
|
|
|
|
</NcAppNavigationSettings>
|
|
|
|
</template>
|
|
|
|
</NcAppNavigation>
|
|
|
|
|
|
|
|
<NcAppContent>
|
|
|
|
<div class="outer">
|
|
|
|
<router-view />
|
|
|
|
</div>
|
|
|
|
</NcAppContent>
|
|
|
|
</NcContent>
|
2022-08-14 20:54:18 +00:00
|
|
|
</template>
|
|
|
|
|
2022-09-13 01:33:24 +00:00
|
|
|
<script lang="ts">
|
2022-10-29 01:58:40 +00:00
|
|
|
import { Component, Mixins, Watch } from "vue-property-decorator";
|
2022-09-16 22:42:29 +00:00
|
|
|
import {
|
2022-10-28 19:08:34 +00:00
|
|
|
NcContent,
|
|
|
|
NcAppContent,
|
|
|
|
NcAppNavigation,
|
|
|
|
NcAppNavigationItem,
|
|
|
|
NcAppNavigationSettings,
|
|
|
|
} from "@nextcloud/vue";
|
|
|
|
import { generateUrl } from "@nextcloud/router";
|
|
|
|
import { getCurrentUser } from "@nextcloud/auth";
|
|
|
|
|
|
|
|
import Timeline from "./components/Timeline.vue";
|
|
|
|
import Settings from "./components/Settings.vue";
|
|
|
|
import FirstStart from "./components/FirstStart.vue";
|
|
|
|
import GlobalMixin from "./mixins/GlobalMixin";
|
|
|
|
import UserConfig from "./mixins/UserConfig";
|
|
|
|
|
|
|
|
import ImageMultiple from "vue-material-design-icons/ImageMultiple.vue";
|
|
|
|
import FolderIcon from "vue-material-design-icons/Folder.vue";
|
|
|
|
import Star from "vue-material-design-icons/Star.vue";
|
2022-10-30 21:38:31 +00:00
|
|
|
import Video from "vue-material-design-icons/PlayCircle.vue";
|
2022-10-28 19:08:34 +00:00
|
|
|
import AlbumIcon from "vue-material-design-icons/ImageAlbum.vue";
|
|
|
|
import ArchiveIcon from "vue-material-design-icons/PackageDown.vue";
|
|
|
|
import CalendarIcon from "vue-material-design-icons/Calendar.vue";
|
|
|
|
import PeopleIcon from "vue-material-design-icons/AccountBoxMultiple.vue";
|
|
|
|
import TagsIcon from "vue-material-design-icons/Tag.vue";
|
|
|
|
import MapIcon from "vue-material-design-icons/Map.vue";
|
2022-09-16 03:17:40 +00:00
|
|
|
|
2022-09-13 02:36:27 +00:00
|
|
|
@Component({
|
2022-10-28 19:08:34 +00:00
|
|
|
components: {
|
|
|
|
NcContent,
|
|
|
|
NcAppContent,
|
|
|
|
NcAppNavigation,
|
|
|
|
NcAppNavigationItem,
|
|
|
|
NcAppNavigationSettings,
|
|
|
|
|
|
|
|
Timeline,
|
|
|
|
Settings,
|
|
|
|
FirstStart,
|
|
|
|
|
|
|
|
ImageMultiple,
|
|
|
|
FolderIcon,
|
|
|
|
Star,
|
|
|
|
Video,
|
|
|
|
AlbumIcon,
|
|
|
|
ArchiveIcon,
|
|
|
|
CalendarIcon,
|
|
|
|
PeopleIcon,
|
|
|
|
TagsIcon,
|
|
|
|
MapIcon,
|
|
|
|
},
|
2022-09-13 02:36:27 +00:00
|
|
|
})
|
2022-10-07 17:46:09 +00:00
|
|
|
export default class App extends Mixins(GlobalMixin, UserConfig) {
|
2022-10-28 19:08:34 +00:00
|
|
|
// Outer element
|
|
|
|
|
|
|
|
get ncVersion() {
|
|
|
|
const version = (<any>window.OC).config.version.split(".");
|
|
|
|
return Number(version[0]);
|
|
|
|
}
|
|
|
|
|
|
|
|
get showPeople() {
|
|
|
|
return this.config_recognizeEnabled || getCurrentUser()?.isAdmin;
|
|
|
|
}
|
|
|
|
|
|
|
|
get isFirstStart() {
|
|
|
|
return this.config_timelinePath === "EMPTY";
|
|
|
|
}
|
|
|
|
|
|
|
|
get showAlbums() {
|
|
|
|
return this.config_albumsEnabled;
|
|
|
|
}
|
|
|
|
|
|
|
|
get removeOuterGap() {
|
|
|
|
return this.ncVersion >= 25;
|
|
|
|
}
|
|
|
|
|
2022-10-29 01:34:17 +00:00
|
|
|
get showNavigation() {
|
|
|
|
return this.$route.name !== "folder-share";
|
|
|
|
}
|
|
|
|
|
2022-10-29 01:58:40 +00:00
|
|
|
@Watch("$route")
|
|
|
|
routeChanged() {
|
|
|
|
this.doRouteChecks();
|
|
|
|
}
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
this.doRouteChecks();
|
2022-10-30 20:24:17 +00:00
|
|
|
|
|
|
|
// Store CSS variables modified
|
|
|
|
const root = document.documentElement;
|
|
|
|
const colorPrimary =
|
|
|
|
getComputedStyle(root).getPropertyValue("--color-primary");
|
|
|
|
root.style.setProperty("--color-primary-select-light", `${colorPrimary}40`);
|
2022-10-29 01:58:40 +00:00
|
|
|
}
|
|
|
|
|
2022-10-28 19:08:34 +00:00
|
|
|
async beforeMount() {
|
|
|
|
if ("serviceWorker" in navigator) {
|
|
|
|
// Use the window load event to keep the page load performant
|
|
|
|
window.addEventListener("load", async () => {
|
|
|
|
try {
|
|
|
|
const url = generateUrl("/apps/memories/service-worker.js");
|
|
|
|
const registration = await navigator.serviceWorker.register(url, {
|
|
|
|
scope: generateUrl("/apps/memories"),
|
|
|
|
});
|
|
|
|
console.log("SW registered: ", registration);
|
|
|
|
} catch (error) {
|
|
|
|
console.error("SW registration failed: ", error);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
console.debug("Service Worker is not enabled on this browser.");
|
2022-10-26 22:12:46 +00:00
|
|
|
}
|
2022-10-28 19:08:34 +00:00
|
|
|
}
|
2022-10-29 01:58:40 +00:00
|
|
|
|
|
|
|
doRouteChecks() {
|
|
|
|
if (this.$route.name === "folder-share") {
|
|
|
|
this.putFolderShareToken(this.$route.params.token);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
putFolderShareToken(token: string) {
|
|
|
|
// Viewer looks for an input with ID sharingToken with the value as the token
|
|
|
|
// Create this element or update it otherwise files not gonna open
|
|
|
|
// https://github.com/nextcloud/viewer/blob/a8c46050fb687dcbb48a022a15a5d1275bf54a8e/src/utils/davUtils.js#L61
|
|
|
|
let tokenInput = document.getElementById(
|
|
|
|
"sharingToken"
|
|
|
|
) as HTMLInputElement;
|
|
|
|
if (!tokenInput) {
|
|
|
|
tokenInput = document.createElement("input");
|
|
|
|
tokenInput.id = "sharingToken";
|
|
|
|
tokenInput.type = "hidden";
|
|
|
|
tokenInput.style.display = "none";
|
|
|
|
document.body.appendChild(tokenInput);
|
|
|
|
}
|
|
|
|
|
|
|
|
tokenInput.value = token;
|
|
|
|
}
|
2022-08-14 20:54:18 +00:00
|
|
|
}
|
|
|
|
</script>
|
2022-09-16 04:06:40 +00:00
|
|
|
|
2022-10-12 19:05:38 +00:00
|
|
|
<style scoped lang="scss">
|
|
|
|
.outer {
|
2022-10-28 19:08:34 +00:00
|
|
|
padding: 0 0 0 44px;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
2022-10-12 19:05:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
2022-10-28 19:08:34 +00:00
|
|
|
.outer {
|
|
|
|
padding: 0px;
|
|
|
|
|
|
|
|
// Get rid of padding on img-outer (1px on mobile)
|
|
|
|
// Also need to make sure we don't end up with a scrollbar -- see below
|
|
|
|
margin-left: -1px;
|
|
|
|
width: calc(100% + 3px); // 1px extra here because ... reasons
|
|
|
|
}
|
2022-10-12 19:05:38 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2022-10-08 23:56:25 +00:00
|
|
|
<style lang="scss">
|
2022-09-16 04:06:40 +00:00
|
|
|
body {
|
2022-10-28 19:08:34 +00:00
|
|
|
overflow: hidden;
|
2022-09-16 04:06:40 +00:00
|
|
|
}
|
2022-10-08 23:56:25 +00:00
|
|
|
|
2022-10-25 04:30:43 +00:00
|
|
|
// Nextcloud 25+: get rid of gap and border radius at right
|
|
|
|
#content-vue.remove-gap {
|
2022-10-28 19:08:34 +00:00
|
|
|
// was var(--body-container-radius)
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
border-bottom-right-radius: 0;
|
2022-10-08 23:56:25 +00:00
|
|
|
|
2022-10-28 19:08:34 +00:00
|
|
|
width: calc(100% - var(--body-container-margin) * 1); // was *2
|
2022-10-08 23:56:25 +00:00
|
|
|
}
|
2022-10-15 18:48:17 +00:00
|
|
|
|
2022-10-26 04:46:23 +00:00
|
|
|
// Prevent content overflow on NC <25
|
2022-10-22 18:37:21 +00:00
|
|
|
#content-vue {
|
2022-10-28 19:08:34 +00:00
|
|
|
max-height: 100vh;
|
2022-11-01 05:33:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Top bar is above everything else on mobile
|
2022-11-06 02:04:48 +00:00
|
|
|
body.has-top-bar header {
|
2022-11-01 05:33:17 +00:00
|
|
|
@media (max-width: 1024px) {
|
2022-11-06 02:04:48 +00:00
|
|
|
z-index: 0 !important;
|
2022-11-01 05:33:17 +00:00
|
|
|
}
|
2022-10-22 18:37:21 +00:00
|
|
|
}
|
2022-11-06 02:04:48 +00:00
|
|
|
body.has-viewer header {
|
|
|
|
z-index: 0 !important;
|
2022-11-06 00:00:55 +00:00
|
|
|
}
|
2022-10-22 18:37:21 +00:00
|
|
|
|
2022-10-26 04:46:23 +00:00
|
|
|
// Patch viewer to remove the title and
|
|
|
|
// make the image fill the entire screen
|
|
|
|
.viewer {
|
2022-10-28 19:08:34 +00:00
|
|
|
.modal-title {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.modal-wrapper .modal-container {
|
|
|
|
top: 0 !important;
|
|
|
|
bottom: 0 !important;
|
2022-11-03 20:43:01 +00:00
|
|
|
|
|
|
|
.viewer__image-editor {
|
|
|
|
top: 0 !important;
|
|
|
|
bottom: 0 !important;
|
|
|
|
}
|
2022-10-28 19:08:34 +00:00
|
|
|
}
|
2022-10-26 04:46:23 +00:00
|
|
|
}
|
|
|
|
|
2022-10-16 02:55:53 +00:00
|
|
|
// Hide horizontal scrollbar on mobile
|
|
|
|
// For the padding removal above
|
|
|
|
#app-content-vue {
|
2022-10-28 19:08:34 +00:00
|
|
|
overflow-x: hidden;
|
2022-10-16 02:55:53 +00:00
|
|
|
}
|
|
|
|
|
2022-10-15 18:48:17 +00:00
|
|
|
// Fill all available space
|
|
|
|
.fill-block {
|
2022-10-28 19:08:34 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: block;
|
2022-10-15 18:48:17 +00:00
|
|
|
}
|
2022-09-16 04:06:40 +00:00
|
|
|
</style>
|