memories/src/App.vue

400 lines
9.8 KiB
Vue
Raw Normal View History

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-11-11 13:55:47 +00:00
<NcAppNavigation v-if="showNavigation" ref="nav">
2022-10-28 19:08:34 +00:00
<template id="app-memories-navigation" #list>
<NcAppNavigationItem
2022-11-11 13:55:47 +00:00
v-for="item in navItems"
:key="item.name"
:to="{ name: item.name }"
:title="item.title"
@click="linkClick"
2022-10-28 19:08:34 +00:00
exact
>
2022-11-11 13:55:47 +00:00
<component :is="item.icon" slot="icon" :size="20" />
2022-10-28 19:08:34 +00:00
</NcAppNavigationItem>
</template>
2022-11-11 13:55:47 +00:00
2022-10-28 19:08:34 +00:00
<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-11-24 19:54:29 +00:00
import NcContent from "@nextcloud/vue/dist/Components/NcContent";
import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
import NcAppNavigation from "@nextcloud/vue/dist/Components/NcAppNavigation";
2022-11-24 21:07:09 +00:00
const NcAppNavigationItem = () =>
import("@nextcloud/vue/dist/Components/NcAppNavigationItem");
const NcAppNavigationSettings = () =>
import("@nextcloud/vue/dist/Components/NcAppNavigationSettings");
2022-11-24 19:54:29 +00:00
2022-10-28 19:08:34 +00:00
import { generateUrl } from "@nextcloud/router";
import { getCurrentUser } from "@nextcloud/auth";
2022-11-11 13:55:47 +00:00
import { translate as t } from "@nextcloud/l10n";
2022-10-28 19:08:34 +00:00
import Timeline from "./components/Timeline.vue";
import Settings from "./components/Settings.vue";
import FirstStart from "./components/FirstStart.vue";
2022-11-07 21:55:11 +00:00
import Metadata from "./components/Metadata.vue";
2022-10-28 19:08:34 +00:00
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
2022-11-07 21:55:11 +00:00
private metadataComponent!: Metadata;
2022-11-11 13:55:47 +00:00
private readonly navItemsAll = [
{
name: "timeline",
icon: ImageMultiple,
title: t("memories", "Timeline"),
},
{
name: "folders",
icon: FolderIcon,
title: t("memories", "Folders"),
},
{
name: "favorites",
icon: Star,
title: t("memories", "Favorites"),
},
{
name: "videos",
icon: Video,
title: t("memories", "Videos"),
},
{
name: "albums",
icon: AlbumIcon,
title: t("memories", "Albums"),
if: (self: any) => self.showAlbums,
},
{
name: "people",
icon: PeopleIcon,
title: t("memories", "People"),
if: (self: any) => self.showPeople,
},
{
name: "archive",
icon: ArchiveIcon,
title: t("memories", "Archive"),
},
{
name: "thisday",
icon: CalendarIcon,
title: t("memories", "On this day"),
},
{
name: "tags",
icon: TagsIcon,
title: t("memories", "Tags"),
if: (self: any) => self.config_tagsEnabled,
},
{
name: "maps",
icon: MapIcon,
title: t("memories", "Maps"),
if: (self: any) => self.config_mapsEnabled,
},
];
private navItems = [];
2022-10-28 19:08:34 +00:00
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
2022-11-11 13:55:47 +00:00
// Populate navigation
this.navItems = this.navItemsAll.filter(
(item) => !item.if || item.if(this)
);
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-11-14 05:43:43 +00:00
root.style.setProperty("--plyr-color-main", colorPrimary);
2022-11-07 21:55:11 +00:00
// Register sidebar metadata tab
const OCA = globalThis.OCA;
if (OCA.Files && OCA.Files.Sidebar) {
OCA.Files.Sidebar.registerTab(
new OCA.Files.Sidebar.Tab({
id: "memories-metadata",
2022-11-08 00:33:45 +00:00
name: this.t("memories", "EXIF"),
2022-11-07 21:55:11 +00:00
icon: "icon-details",
async mount(el, fileInfo, context) {
if (this.metadataComponent) {
this.metadataComponent.$destroy();
}
this.metadataComponent = new Metadata({
// Better integration with vue parent component
parent: context,
});
// Only mount after we have all the info we need
await this.metadataComponent.update(fileInfo);
this.metadataComponent.$mount(el);
},
update(fileInfo) {
this.metadataComponent.update(fileInfo);
},
destroy() {
this.metadataComponent.$destroy();
this.metadataComponent = null;
},
})
);
}
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
2022-11-11 13:55:47 +00:00
linkClick() {
const nav: any = this.$refs.nav;
2022-11-23 11:16:45 +00:00
if (globalThis.windowInnerWidth <= 1024) nav?.toggleNavigation(false);
2022-11-11 13:55:47 +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)
2022-11-12 14:35:28 +00:00
// now set on #app-navigation-vue
border-radius: 0;
2022-10-28 19:08:34 +00:00
width: calc(100% - var(--body-container-margin) * 1); // was *2
2022-11-22 18:34:44 +00:00
// Reduce size of navigation. NC <25 doesn't like this on mobile.
#app-navigation-vue {
max-width: 250px;
}
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-12 14:35:28 +00:00
// https://bugs.webkit.org/show_bug.cgi?id=160953
overflow: visible;
#app-navigation-vue {
border-top-left-radius: var(--body-container-radius);
border-bottom-left-radius: var(--body-container-radius);
}
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-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
}
// Prevent sidebar from becoming too big
aside.app-sidebar {
max-width: 360px !important;
}
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-11-22 13:57:34 +00:00
:root {
--livephoto-img-transition: opacity 0.4s linear, transform 0.3s ease-in-out;
2022-11-22 13:57:34 +00:00
}
// Live photo transitions
.memories-livephoto {
position: relative;
overflow: hidden;
img,
video {
position: absolute;
2022-11-22 14:08:36 +00:00
padding: inherit;
2022-11-22 13:57:34 +00:00
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
transition: var(--livephoto-img-transition);
}
video,
&.playing.canplay img {
opacity: 0;
}
img,
&.playing.canplay video {
opacity: 1;
}
&.playing.canplay img {
transform: scale(1.05);
2022-11-22 13:57:34 +00:00
}
}
2022-09-16 04:06:40 +00:00
</style>