updating docs and fixing fullscreen error

README.md

@@ -142,15 +142,17 @@ apt-get install build-essential  libkrb5-dev gcc g++
    * saving generated thumbnails to TEMP folder for reuse
    * supporting multi-core CPUs
    * supporting hardware acceleration ([sharp](https://github.com/lovell/sharp) and [gm](https://github.com/aheckmann/gm) as optional and JS-based [Jimp](https://github.com/oliver-moran/jimp)  as fallback)   
- * Custom lightbox for full screen photo viewing
+ * Custom lightbox for full screen photo and video viewing
    * keyboard support for navigation  
    * showing low-res thumbnail while full image loads
    * Information panel for showing **Exif info**  
    * Automatic playing
    * gesture support (swipe left, right, up)
+   * shortcut support
  * Client side caching (directories and search results)
- * Rendering **photos** with GPS coordinates **on google map**
+ * Rendering **photos** with GPS coordinates **on open street maps**
-   * .gpx file support 
+   * .gpx file support: rendering paths to map
+   * supports [OSM](https://www.openstreetmap.org) and [Mapbox](https://www.mapbox.com) by default, but you can add any provider that has a tile url
  * **Two modes: SQL database and no-database mode**
    * both modes supports
      * user management
@@ -162,6 +164,7 @@ apt-get install build-essential  libkrb5-dev gcc g++
      * sharing 
        * setting link expiration time
  * internalization / translation support
+   * currently supported languages: eng, hun
  * Nice design 
     * responsive design (phone, tablet desktop support)
  * Setup page

docs/index.html

@@ -156,19 +156,21 @@
           </li>
         </ul>
       </li>
-      <li>Custom lightbox for full screen photo viewing
+      <li>Custom lightbox for full screen photo and video viewing
         <ul>
           <li>keyboard support for navigation</li>
           <li>showing low-res thumbnail while full image loads</li>
           <li>Information panel for showing <strong>Exif info</strong></li>
           <li>Automatic playing</li>
           <li>gesture support (swipe left, right, up)</li>
+          <li>shortcut support</li>
         </ul>
       </li>
       <li>Client side caching (directories and search results)</li>
-      <li>Rendering <strong>photos</strong> with GPS coordinates <strong>on google map</strong>
+      <li>Rendering <strong>photos</strong> with GPS coordinates <strong>on open street map</strong>
         <ul>
-          <li>.gpx file support</li>
+          <li>.gpx file support: rendering paths to map</li>
+          <li>supports OSM and Mapbox by default, but you can add any provider that has a tile url</li>
         </ul>
       </li>
       <li><strong>Two modes: SQL database and no-database mode</strong>

frontend/app/gallery/fullscreen.service.ts

@@ -22,19 +22,19 @@ export class FullScreenService {
       document['webkitFullscreenElement']);
   }
 
-  public showFullScreen(element: any) {
+  public showFullScreen(element: Element) {
     if (this.isFullScreenEnabled()) {
       return;
     }
 
     if (element.requestFullscreen) {
-      element.requestFullscreen();
+      element.requestFullscreen().catch(console.error);
-    } else if (element.mozRequestFullScreen) {
+    } else if ((<any>element).mozRequestFullScreen) {
-      element.mozRequestFullScreen();
+      (<any>element).mozRequestFullScreen();
-    } else if (element.webkitRequestFullscreen) {
+    } else if ((<any>element).webkitRequestFullscreen) {
-      element.webkitRequestFullscreen();
+      (<any>element).webkitRequestFullscreen();
-    } else if (element.msRequestFullscreen) {
+    } else if ((<any>element).msRequestFullscreen) {
-      element.msRequestFullscreen();
+      (<any>element).msRequestFullscreen();
     }
     this.OnFullScreenChange.trigger(true);
   }

frontend/app/gallery/lightbox/lightbox.gallery.component.ts

@@ -39,7 +39,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
 
   @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent;
   @ViewChild('lightbox') lightboxElement: ElementRef;
-  @ViewChild('root') root: HTMLElement;
+  @ViewChild('root') root: ElementRef;
 
   public navigation = {hasPrev: true, hasNext: true};
   public blackCanvasOpacity = 0;
@@ -251,7 +251,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
         if (this.fullScreenService.isFullScreenEnabled()) {
           this.fullScreenService.exitFullScreen();
         } else {
-          this.fullScreenService.showFullScreen(this.root);
+          this.fullScreenService.showFullScreen(this.root.nativeElement);
         }
         break;
       case 'c':

frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html

@@ -59,15 +59,15 @@
             <span>
                 <span class="oi  oi-fullscreen-exit highlight"
                       *ngIf="fullScreenService.isFullScreenEnabled()"
-                      (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
+                      (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title></span>
                 </span>
       <span>
              <span class="oi oi-fullscreen-enter highlight"
                    *ngIf="!fullScreenService.isFullScreenEnabled()"
-                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
+                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title></span>
                 </span>
       <span>
-             <span class="oi oi-x highlight" (click)="hide()" title="close"></span>
+             <span class="oi oi-x highlight" (click)="hide()" title="close, key: Escape" i18n-title></span>
              </span>
     </div>
 

frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts

@@ -56,6 +56,25 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
 
   }
 
+  @HostListener('window:resize', ['$event'])
+  async onResize() {
+    this.lightboxDimension = <Dimension>{
+      top: 0,
+      left: 0,
+      width: this.getScreenWidth(),
+      height: this.getScreenHeight()
+    };
+    this.mapDimension = <Dimension>{
+      top: 0,
+      left: 0,
+      width: this.getScreenWidth(),
+      height: this.getScreenHeight()
+    };
+    await Utils.wait(0);
+    this.yagaMap.invalidateSize();
+  }
+
+
 
   public async show(position: Dimension) {
     this.hideImages();
@@ -209,6 +228,14 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
     }
     const event: KeyboardEvent = window.event ? <any>window.event : e;
     switch (event.key) {
+      case 'f':
+      case 'F':
+        if (this.fullScreenService.isFullScreenEnabled()) {
+          this.fullScreenService.exitFullScreen();
+        } else {
+          this.fullScreenService.showFullScreen(this.elementRef.nativeElement);
+        }
+        break;
       case 'Escape': // escape
         this.hide();
         break;

frontend/app/gallery/map/map.gallery.component.html

@@ -12,12 +12,6 @@
         *ngFor="let photo of mapPhotos"
         [lat]="photo.lat"
         [lng]="photo.lng">
-     <!--   <yaga-icon
-          [iconSize]="[25,41]"
-          [iconAnchor]="[13,41]"
-          iconUrl="assets/leaflet/marker-icon.png"
-          shadowUrl="assets/leaflet/marker-shadow.png"
-        ></yaga-icon>-->
       </yaga-marker>
       <yaga-attribution-control
         prefix=""

frontend/translate/messages.en.xlf

@@ -126,6 +126,14 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">47</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">62</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">67</context>
+        </context-group>
         <target>toggle fullscreen, key: f</target>
       </trans-unit>
       <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
@@ -134,6 +142,10 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">54</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">70</context>
+        </context-group>
         <target>close, key: Escape</target>
       </trans-unit>
       <trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">

frontend/translate/messages.hu.xlf

@@ -126,6 +126,14 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">47</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">62</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">67</context>
+        </context-group>
         <target>teljes képernyős váltás, gyorsgomb: f</target>
       </trans-unit>
       <trans-unit id="d78be78234111c1ca3a1d28d981a05ed6ce5d38d" datatype="html">
@@ -134,6 +142,10 @@
           <context context-type="sourcefile">app/gallery/lightbox/lightbox.gallery.component.html</context>
           <context context-type="linenumber">54</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/gallery/map/lightbox/lightbox.map.gallery.component.html</context>
+          <context context-type="linenumber">70</context>
+        </context-group>
         <target>bezárás, gyorsgomb: escape</target>
       </trans-unit>
       <trans-unit id="774684628600c4622be2ed1dab5e1525c03b7bd3" datatype="html">