1.21.3

Reviewed-on: #54

app/components/photo-carousel.gjs

@@ -33,6 +33,14 @@ export default class PhotoCarousel extends Component {
     return !this.canScrollRight;
   }
 
+  get isGalleryMain() {
+    return this.args.variant === 'gallery-main';
+  }
+
+  get isGalleryThumbnails() {
+    return this.args.variant === 'gallery-thumbnails';
+  }
+
   get variantClass() {
     return this.args.variant || 'inline';
   }
@@ -205,29 +213,47 @@ export default class PhotoCarousel extends Component {
                 />
               {{/if}}
 
-              {{#if photo.isLandscape}}
+              {{#if this.isGalleryMain}}
-                <picture>
+                <img
-                  {{#if photo.thumbUrl}}
+                  data-src={{photo.url}}
-                    <source
+                  class="place-header-photo
-                      media="(max-width: 768px)"
+                    {{if photo.isLandscape 'landscape' 'portrait'}}"
-                      data-srcset={{photo.thumbUrl}}
+                  alt={{@name}}
-                    />
+                  {{fadeInImage photo.url}}
-                  {{/if}}
+                />
-                  <img
+              {{else if this.isGalleryThumbnails}}
-                    data-src={{photo.url}}
-                    class="place-header-photo landscape"
-                    alt={{@name}}
-                    {{fadeInImage photo.url}}
-                  />
-                </picture>
-              {{else}}
-                {{! Portrait uses thumb everywhere if available }}
                 <img
                   data-src={{if photo.thumbUrl photo.thumbUrl photo.url}}
-                  class="place-header-photo portrait"
+                  class="place-header-photo
+                    {{if photo.isLandscape 'landscape' 'portrait'}}"
                   alt={{@name}}
                   {{fadeInImage (if photo.thumbUrl photo.thumbUrl photo.url)}}
                 />
+              {{else}}
+                {{#if photo.isLandscape}}
+                  <picture>
+                    {{#if photo.thumbUrl}}
+                      <source
+                        media="(max-width: 768px)"
+                        data-srcset={{photo.thumbUrl}}
+                      />
+                    {{/if}}
+                    <img
+                      data-src={{photo.url}}
+                      class="place-header-photo landscape"
+                      alt={{@name}}
+                      {{fadeInImage photo.url}}
+                    />
+                  </picture>
+                {{else}}
+                  {{! Portrait uses thumb everywhere if available }}
+                  <img
+                    data-src={{if photo.thumbUrl photo.thumbUrl photo.url}}
+                    class="place-header-photo portrait"
+                    alt={{@name}}
+                    {{fadeInImage (if photo.thumbUrl photo.thumbUrl photo.url)}}
+                  />
+                {{/if}}
               {{/if}}
             </div>
           {{/each}}

app/components/photo-gallery.gjs

@@ -1,12 +1,15 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 import PhotoCarousel from './photo-carousel';
 import DropdownMenu from '#components/dropdown-menu';
 
 export default class PhotoGallery extends Component {
+  @service toast;
   @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0];
 
   @action
@@ -43,6 +46,20 @@ export default class PhotoGallery extends Component {
     }
   }
 
+  @action
+  async copyEventId(closeMenu) {
+    if (this.currentPhoto?.eventId) {
+      try {
+        await navigator.clipboard.writeText(this.currentPhoto.eventId);
+        this.toast.show('Event ID copied to clipboard');
+      } catch (err) {
+        console.error('Failed to copy event ID:', err);
+        this.toast.show('Failed to copy event ID');
+      }
+    }
+    closeMenu();
+  }
+
   <template>
     <div
       class="photo-gallery-overlay"
@@ -53,12 +70,17 @@ export default class PhotoGallery extends Component {
       {{! template-lint-disable no-invalid-interactive }}
       <div class="photo-gallery-content">
         <div class="actions-btn-container">
-          <DropdownMenu @iconSize={{24}} @triggerIcon="more-horizontal" @iconColor="white" as |closeMenu|>
+          <DropdownMenu
+            @iconSize={{24}}
+            @triggerIcon="more-horizontal"
+            @iconColor="white"
+            as |closeMenu|
+          >
             <button
               class="dropdown-item"
               type="button"
-              {{on "click" closeMenu}}
+              {{on "click" (fn this.copyEventId closeMenu)}}
-            >Copy Raw Event Data</button>
+            >Copy Photo Event ID</button>
             <button
               class="dropdown-item"
               type="button"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "marco",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "private": true,
   "description": "Unhosted maps app",
   "repository": {

release/index.html

@@ -39,8 +39,8 @@
     <meta name="msapplication-TileColor" content="#F6E9A6">
     <meta name="msapplication-TileImage" content="/icons/icon-144.png">
 
-  <script type="module" crossorigin src="/assets/main-CjxGWim8.js"></script>
+  <script type="module" crossorigin src="/assets/main-C_1D7C3-.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/main-M5C-HUrg.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-BmLeTC2Y.css">
 </head>
   <body>
  </body>