From a0556e159c6057d996c1ba015a88403047126754 Mon Sep 17 00:00:00 2001
From: Phil Eichinski <phil.eichinski@gmail.com>
Date: Mon, 2 Sep 2019 00:13:57 +1000
Subject: [PATCH] feat(citSci): small tweaks to cs layout

---
 .../labels/thumbLabels/_thumbs.scss           | 17 +++++++++-
 .../labels/thumbLabels/examples.tpl.html      | 12 +++++--
 .../labels/thumbLabels/label.tpl.html         |  2 +-
 .../labels/thumbLabels/labels.js              | 33 +++++++++++++++++--
 src/baw.paths.nobuild.js                      |  2 +-
 5 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss
index e27e7921..a8030bb1 100644
--- a/src/app/citizenScience/labels/thumbLabels/_thumbs.scss
+++ b/src/app/citizenScience/labels/thumbLabels/_thumbs.scss
@@ -128,8 +128,23 @@ $triangle: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.o
           background-size: cover;
           background-position: center center;
           box-shadow: 0px 0px 1px 10px rgba(0, 0, 0, 0.5) inset;
-          max-width: 60%;
+          max-width: 400px;
           min-width: 30%;
+
+          .img-attribution {
+            background: rgba(0,0,0,0.5);
+            opacity: 0.7;
+            color: #aaaaaa;
+            position: absolute;
+            bottom: 1px;
+            text-align: center;
+            vertical-align: bottom;
+            display: block;
+            a {
+              color: #aaaaaa;
+            }
+          }
+
         }
 
         @media (max-width: 520px) {
diff --git a/src/app/citizenScience/labels/thumbLabels/examples.tpl.html b/src/app/citizenScience/labels/thumbLabels/examples.tpl.html
index 6bdf642b..e3ea7372 100644
--- a/src/app/citizenScience/labels/thumbLabels/examples.tpl.html
+++ b/src/app/citizenScience/labels/thumbLabels/examples.tpl.html
@@ -9,10 +9,18 @@
     <div class="citizen-science-thumb-example">
         <div class="img"
              ng-if="$ctrl.label.examples[currentExample].image"
-             style="background-image: url(/public/citizen_science/labels/images/{{$ctrl.label.examples[currentExample].image}})"
+             style="background-image: url(/public/citizen_science/labels/images/{{$ctrl.label.examples[currentExample].image.file}})"
              >&nbsp;
+            <span class="img-attribution" ng-if="$ctrl.label.examples[currentExample].image.credit">
+                <a href="{{$ctrl.label.examples[currentExample].image.credit.source}}">Photo by {{$ctrl.label.examples[currentExample].image.credit.author}}</a>
+                <a href="{{$ctrl.label.examples[currentExample].image.credit.license_link}}">{{$ctrl.label.examples[currentExample].image.credit.license}}</a>
+            </span>
         </div>
-        <annotation-item annotation="$ctrl.label.examples[currentExample].annotation" download="false" mini-volume="true" class="dark"></annotation-item>
+
+
+        <annotation-item ng-if="$ctrl.label.examples[currentExample].annotation" annotation="$ctrl.label.examples[currentExample].annotation" download="false" mini-volume="true" class="dark"></annotation-item>
+        <img ng-if="$ctrl.label.examples[currentExample].spectrogram_image" src="$ctrl.label.examples[currentExample].spectrogram_image" alt="spectrogram">
+
             </div>
 
 </div>
diff --git a/src/app/citizenScience/labels/thumbLabels/label.tpl.html b/src/app/citizenScience/labels/thumbLabels/label.tpl.html
index aea1e679..4673926c 100644
--- a/src/app/citizenScience/labels/thumbLabels/label.tpl.html
+++ b/src/app/citizenScience/labels/thumbLabels/label.tpl.html
@@ -9,7 +9,7 @@
         ></label-check>
 
 
-        <img ng-src="{{$ctrl.label.examples[0].annotation.media.available.image.png.url}}" alt="{{$ctrl.label.name}}">
+        <img ng-src="{{$ctrl.label.examples[0].thumbsrc}}" alt="{{$ctrl.label.name}}">
 
 
         <span class="thumbtext">{{thumbLabelText}}</span>
diff --git a/src/app/citizenScience/labels/thumbLabels/labels.js b/src/app/citizenScience/labels/thumbLabels/labels.js
index 350750a1..aa6fe704 100644
--- a/src/app/citizenScience/labels/thumbLabels/labels.js
+++ b/src/app/citizenScience/labels/thumbLabels/labels.js
@@ -58,8 +58,10 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
 
                     // transform labels structure into a single array of annotationsIds
                     var labels = self.labels;
-                    var annotationIds = [].concat.apply([], labels.map(l => l.examples)).map(e => e.annotationId);
-
+                    // using concat to allow for labels having multiple annotations
+                    // examples can have annotation ids or spectrogram image filenames (for static image examples)
+                    var annotationIds = [].concat.apply([], labels.map(l => l.examples)).map(e => e.hasOwnProperty("annotationId") ? e.annotationId : null);
+                    annotationIds = annotationIds.filter(id => id);
                     if (annotationIds.length === 0) {
                         return;
                     }
@@ -102,6 +104,33 @@ angular.module("bawApp.components.citizenScienceThumbLabels",
                                self.labels.forEach(function (l) {
                                    l.examples.forEach(function (e) {
                                        if (e.annotationId === annotation.id) {
+
+                                           // for the thumb, we don't want it too narrow, so check the duration
+                                           var endOffset = annotation.media.available.image.png.url.match(/end_offset=([0-9.]+)/);
+                                           var startOffset = annotation.media.available.image.png.url.match(/start_offset=([0-9.]+)/);
+                                           if (endOffset !== null && startOffset !== null) {
+                                               endOffset = parseFloat(endOffset[1]);
+                                               startOffset = parseFloat(startOffset[1]);
+                                           }
+
+                                           var minWidthPx = 100;
+                                           var curWidthPx = ((endOffset - startOffset) * 1000 * annotation.media.available.image.png.ppms);
+
+                                           if (curWidthPx < minWidthPx) {
+
+                                               var diffPx = minWidthPx - curWidthPx;
+                                               var diffS = diffPx / (annotation.media.available.image.png.ppms * 1000);
+
+                                               var newStartOffset = (startOffset + (diffS / 2)).toString();
+                                               var newEndOffset = (endOffset + (diffS / 2)).toString();
+
+                                               console.log(annotation.media.available.image.png.url.replace(/end_offset=[0-9.]+/, "end_offset="+newEndOffset));
+                                               console.log(annotation.media.available.image.png.url.replace(/start_offset=[0-9.]+/, "end_offset="+newStartOffset));
+
+
+                                           }
+
+                                           e.thumbsrc = annotation.media.available.image.png.url;
                                            e.annotation = annotation;
                                        }
                                    });
diff --git a/src/baw.paths.nobuild.js b/src/baw.paths.nobuild.js
index 7291995f..bf6d4a56 100644
--- a/src/baw.paths.nobuild.js
+++ b/src/baw.paths.nobuild.js
@@ -225,7 +225,7 @@ module.exports = function (environment) {
                     "defaultImage": "assets/img/user_spanhalf.png"
                 },
                 "backgrounds": {
-                    "citizenScience": "/build/assets/img/citizen-science/backgrounds/"
+                    "citizenScience": "/public/citizen_science/backgrounds/"
                 }
             }
         }