diff --git a/package-lock.json b/package-lock.json index 1cc4012..c223bb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "ngx-perfect-scrollbar": "^10.1.1", "rxfire": "^6.0.3", "rxjs": "~7.5.6", + "swiper": "^9.3.2", "tslib": "^2.4.0", "uuid": "^8.3.2", "zone.js": "~0.11.8" @@ -23178,6 +23179,11 @@ "node": ">=0.10.0" } }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/ssri": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", @@ -23415,6 +23421,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.3.2.tgz", + "integrity": "sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "dependencies": { + "ssr-window": "^4.0.2" + }, + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", @@ -42174,6 +42201,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "ssri": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz", @@ -42335,6 +42367,14 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "swiper": { + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-9.3.2.tgz", + "integrity": "sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==", + "requires": { + "ssr-window": "^4.0.2" + } + }, "symbol-observable": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz", diff --git a/package.json b/package.json index 957f4f0..c4c057d 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "ngx-perfect-scrollbar": "^10.1.1", "rxfire": "^6.0.3", "rxjs": "~7.5.6", + "swiper": "^9.3.2", "tslib": "^2.4.0", "uuid": "^8.3.2", "zone.js": "~0.11.8" diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3e9c2ce..0ef7c45 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,7 @@ import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/co import {fader} from './animations'; import {ScrollService} from './services/scroll.service'; import {PerfectScrollbarComponent} from 'ngx-perfect-scrollbar'; +import {register} from 'swiper/element/bundle'; @Component({ selector: 'app-root', @@ -17,6 +18,7 @@ export class AppComponent implements OnInit { scrollService.restoreScrollPosition$.subscribe(pos => { if (this.scrollbar && pos) this.scrollbar.directiveRef?.scrollTo(0, pos, 300); }); + register(); } public ngOnInit(): void { diff --git a/src/app/modules/presentation/monitor/monitor.component.ts b/src/app/modules/presentation/monitor/monitor.component.ts index 949f631..1c3bd87 100644 --- a/src/app/modules/presentation/monitor/monitor.component.ts +++ b/src/app/modules/presentation/monitor/monitor.component.ts @@ -12,6 +12,7 @@ import {TextRenderingService} from '../../songs/services/text-rendering.service' import {PresentationBackground, Show} from '../../shows/services/show'; import {GlobalSettings} from '../../../services/global-settings'; import {ShowSongService} from '../../shows/services/show-song.service'; +import {openFullscreen} from '../../../services/fullscreen'; @Component({ selector: 'app-monitor', @@ -45,6 +46,7 @@ export class MonitorComponent implements OnInit { } public ngOnInit(): void { + openFullscreen(); this.globalSettingsService.get$ .pipe( debounceTime(100), diff --git a/src/app/modules/shows/services/show.service.ts b/src/app/modules/shows/services/show.service.ts index 200bef8..90f1bd9 100644 --- a/src/app/modules/shows/services/show.service.ts +++ b/src/app/modules/shows/services/show.service.ts @@ -30,10 +30,6 @@ export class ShowService { map(s => s.shows .sort((a, b) => a.date.toMillis() - b.date.toMillis()) - .map(_ => { - console.log(_); - return _; - }) .filter(_ => !_.archived) .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)) ) diff --git a/src/app/modules/shows/show/show.component.html b/src/app/modules/shows/show/show.component.html index 44949b7..3980de7 100644 --- a/src/app/modules/shows/show/show.component.html +++ b/src/app/modules/shows/show/show.component.html @@ -1,23 +1,30 @@
-

{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von +

{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von

- Text anzeigen
+ Text anzeigen +
+
- + +
-
@@ -27,19 +34,34 @@ [showId]="showId" [showText]="showText" [show]="show" + [fullscreen]="useSwiper" [index]="i" >
+ + + + + + - + diff --git a/src/app/modules/shows/show/show.component.less b/src/app/modules/shows/show/show.component.less index f9f9399..43ac644 100644 --- a/src/app/modules/shows/show/show.component.less +++ b/src/app/modules/shows/show/show.component.less @@ -8,6 +8,12 @@ border-bottom: 1px solid #0002; } +.song-swipe { + margin-bottom: 20px; + min-height: calc(100vh - 60px); +} + + .head { display: flex; justify-content: space-between; @@ -36,3 +42,10 @@ .example-list.cdk-drop-list-dragging .song-list:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } + +.floating { + position: fixed; + right: 20px; + top: 12px; + z-index: 5; +} diff --git a/src/app/modules/shows/show/show.component.ts b/src/app/modules/shows/show/show.component.ts index 000a682..9765257 100644 --- a/src/app/modules/shows/show/show.component.ts +++ b/src/app/modules/shows/show/show.component.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core'; +import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from '@angular/core'; import {filter, map, switchMap, tap} from 'rxjs/operators'; import {ActivatedRoute, Router} from '@angular/router'; import {ShowService} from '../services/show.service'; @@ -13,7 +13,9 @@ import { faBox, faBoxOpen, faExternalLinkAlt, + faFile, faFileDownload, + faFileLines, faLock, faMagnifyingGlassMinus, faMagnifyingGlassPlus, @@ -25,6 +27,7 @@ import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; import {fade} from '../../../animations'; import {MatDialog} from '@angular/material/dialog'; import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component'; +import {closeFullscreen, openFullscreen} from '../../../services/fullscreen'; @Component({ selector: 'app-show', @@ -49,7 +52,10 @@ export class ShowComponent implements OnInit, OnDestroy { public faUsers = faUsers; public faZoomIn = faMagnifyingGlassPlus; public faZoomOut = faMagnifyingGlassMinus; + public faPage = faFile; + public faLines = faFileLines; private subs: Subscription[] = []; + public useSwiper = false; public constructor( private activatedRoute: ActivatedRoute, @@ -161,4 +167,34 @@ export class ShowComponent implements OnInit, OnDestroy { public async onChange(showId: string) { await this.router.navigateByUrl('/shows/' + showId + '/edit'); } + + public faFileLines = faFileLines; + public faFile = faFile; + + @HostListener('document:keydown', ['$event']) + public handleKeyboardEvent(event: KeyboardEvent) { + const swiperEl = document.querySelector('swiper-container') as unknown as Swiper; + switch (event.code) { + case 'ArrowRight': + case 'ArrowDown': + swiperEl.swiper.slideNext(); + break; + case 'ArrowLeft': + case 'ArrowUp': + swiperEl.swiper.slidePrev(); + break; + } + } + + public fullscreen(useSwiper: boolean) { + if (useSwiper) openFullscreen(); + else closeFullscreen(); + } +} + +export interface Swiper { + swiper: { + slideNext(): void; + slidePrev(): void; + }; } diff --git a/src/app/modules/shows/show/song/song.component.html b/src/app/modules/shows/show/song/song.component.html index 785d6c5..0242572 100644 --- a/src/app/modules/shows/show/song/song.component.html +++ b/src/app/modules/shows/show/song/song.component.html @@ -1,10 +1,10 @@
-
+
{{ iSong.key }}
{{ iSong.title }}
-
+
{{ iSong.title }} {{ iSong.keyOriginal }} →  diff --git a/src/app/modules/shows/show/song/song.component.ts b/src/app/modules/shows/show/song/song.component.ts index e9de2de..abf52b2 100644 --- a/src/app/modules/shows/show/song/song.component.ts +++ b/src/app/modules/shows/show/song/song.component.ts @@ -19,6 +19,7 @@ export class SongComponent implements OnInit { @Input() public showId: string | null = null; @Input() public showText: boolean | null = null; @Input() public index = -1; + @Input() public fullscreen = false; public keys: string[] = []; public faDelete = faTrash; diff --git a/src/app/modules/shows/shows.module.ts b/src/app/modules/shows/shows.module.ts index eadba1a..6da70c7 100644 --- a/src/app/modules/shows/shows.module.ts +++ b/src/app/modules/shows/shows.module.ts @@ -1,4 +1,4 @@ -import {NgModule} from '@angular/core'; +import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ShowsRoutingModule} from './shows-routing.module'; @@ -70,5 +70,6 @@ import {MatDialogModule} from '@angular/material/dialog'; MatTooltipModule, MatDialogModule, ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class ShowsModule {} diff --git a/src/app/services/fullscreen.ts b/src/app/services/fullscreen.ts new file mode 100644 index 0000000..aa675d5 --- /dev/null +++ b/src/app/services/fullscreen.ts @@ -0,0 +1,13 @@ +const elem = document.documentElement; + +export const openFullscreen = () => { + if (elem.requestFullscreen) { + void elem.requestFullscreen(); + } +}; + +export const closeFullscreen = () => { + if (document.exitFullscreen) { + void document.exitFullscreen(); + } +}; diff --git a/src/app/widget-modules/components/card/card.component.html b/src/app/widget-modules/components/card/card.component.html index 8738293..9241573 100644 --- a/src/app/widget-modules/components/card/card.component.html +++ b/src/app/widget-modules/components/card/card.component.html @@ -1,13 +1,13 @@ -
+
-
{{ heading }}
-
{{ subheading }}
+
{{ heading }}
+
{{ subheading }}
diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less index 605a019..2d5412b 100644 --- a/src/app/widget-modules/components/card/card.component.less +++ b/src/app/widget-modules/components/card/card.component.less @@ -23,6 +23,20 @@ } box-sizing: border-box; + + &.fullscreen { + border-radius: 0; + background: #ffff; + margin: 0; + color: #000; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: unset; + z-index: 10; + } } .heading { diff --git a/src/app/widget-modules/components/card/card.component.ts b/src/app/widget-modules/components/card/card.component.ts index 9c465e4..54a7536 100644 --- a/src/app/widget-modules/components/card/card.component.ts +++ b/src/app/widget-modules/components/card/card.component.ts @@ -12,4 +12,5 @@ export class CardComponent { @Input() public subheading: string | null = null; @Input() public closeLink: string | null = null; @Input() public closeIcon = faTimes; + @Input() public fullscreen = false; } diff --git a/src/app/widget-modules/components/song-text/song-text.component.less b/src/app/widget-modules/components/song-text/song-text.component.less index 4918ab4..6258c19 100644 --- a/src/app/widget-modules/components/song-text/song-text.component.less +++ b/src/app/widget-modules/components/song-text/song-text.component.less @@ -45,9 +45,7 @@ @media screen and (max-width: 860px) { margin-bottom: 10px; } - border-left: 3px solid #0002; - padding-left: 5px; - margin-left: -8px; + } .chorus {