feat(citSci): started setBackgroundImageForItem to show best image fo…

…r dataset item based on site and datetime of image

src/app/audio/ngAudio.js

@@ -181,7 +181,7 @@ angular.module("bawApp.directives.ngAudio", [
                         target.isPlaying = !element.paused;
                         target.canPlay = element.readyState >= readyStates.haveFutureData;
 
-                        console.log("element.readyState", element.readyState);
+                        console.debug("element.readyState", element.readyState);
 
                        // IMPORTANT - setting the position while playing is done by RAF.
                         // Do not set it here or else jittery playback will occur when any event is raised from the element.

src/app/citizenScience/bristlebird/bristlebird.js

@@ -126,12 +126,20 @@ class BristlebirdController {
             },
             function (item, oldVal) {
                 if (item) {
-                    self.showAudio(item.audioRecordingId, item.startTimeSeconds, item.endTimeSeconds);
-                    // for now, we cycle through backgrounds arbitrarily, based on the id of the sample
-                    // todo: store background images as part of the dataset or cs project
-                    var backgroundPath = self.backgroundPaths[parseInt(item.id) % (self.backgroundPaths.length - 1)];
-                    backgroundImage.currentBackground = backgroundPath;
-                    $scope.$broadcast("update-selected-labels", SampleLabels.getLabelsForSample(item.id));
+
+                    if (item.id !== oldVal.id) {
+                        self.showAudio(item.audioRecordingId, item.startTimeSeconds, item.endTimeSeconds);
+                        // for now, we cycle through backgrounds arbitrarily, based on the id of the sample
+                        // todo: store background images as part of the dataset or cs project
+                        var backgroundPath = self.backgroundPaths[parseInt(item.id) % (self.backgroundPaths.length - 1)];
+                        backgroundImage.currentBackground = backgroundPath;
+                        $scope.$broadcast("update-selected-labels", SampleLabels.getLabelsForSample(item.id));
+
+                    }
+
+                    if (item.hasOwnProperty("audioRecording")) {
+                        backgroundImage.setBackgroundImageForItem(item.audioRecording, item.startTimeSeconds);
+                    }
 
                 }
             }, true);

src/app/citizenScience/datasetProgress/citizenScienceSamples.js

@@ -8,7 +8,8 @@ csSamples.factory("CsSamples", [
     "CitizenScienceCommon",
     "DatasetItem",
     "ProgressEvent",
-    function CsSamples(CitizenScienceCommon, DatasetItem, ProgressEvent) {
+    "AudioRecording",
+    function CsSamples(CitizenScienceCommon, DatasetItem, ProgressEvent, AudioRecording) {
 
         var self = this;
 
@@ -112,10 +113,38 @@ csSamples.factory("CsSamples", [
                     self.setCurrentItem();
                 }
 
+                self.addAudioRecordingFields(x.data.data);
+
+            });
+
+        };
+
+
+
+        /**
+         * Adds AudioRecording object to each dataset item, which lets us know the site id and UTC start time of the item
+         * @param datasetItems
+         */
+        self.addAudioRecordingFields = function (datasetItems) {
+
+            var recordingIds = datasetItems.map(x => x.audioRecordingId);
+            // unique values
+            recordingIds = [...new Set(recordingIds)];
+
+            AudioRecording.getRecordingsForLibrary(recordingIds).then(x => {
+
+                var audioRecordings = x.data.data;
+
+                datasetItems.forEach(datasetItem => {
+                    var audioRecording = audioRecordings.find(ar => ar.id === datasetItem.audioRecordingId);
+                    datasetItem.audioRecording = audioRecording;
+                });
+
             });
 
         };
 
+
         self.publicFunctions = {
 
             /**

src/components/services/background/background.js

@@ -1,10 +1,108 @@
 angular.module("bawApp.components.background", [])
-    .service("backgroundImage", function () {
+    .service("backgroundImage", ["conf.paths", function (paths) {
         var currentBackground = "";
+
+        var self = this;
+
+
+        self.images = [];
+        // [filename, site_id, dateTime]
+        self.images[0] = ["1.jpg", 402, "2010-10-14 00:00:00"];
+        self.images[1] = ["2.jpg", 312, "2010-08-01 12:00:00"];
+        self.images[2] = ["3.jpg", 399, "2010-10-30 15:00:00"];
+        self.images[3] = ["4.jpg", 402, "2010-10-14 00:03:00"];
+
+
+        self.temp = new Set();
+
+        // expand the full path
+        self.images = self.images.map(img => {
+            img[0] = paths.site.assets.backgrounds.citizenScience + img[0];
+            return img;
+        });
+
+
+        /**
+         * Temporary function that sets the current background based one or more parameters
+         * Determines the best background image for the given arguments by checking a hardcoded json
+         * This will be replaced with an api call in the future
+         * @param site
+         * @param audioRecordingId
+         * @param hour
+         */
+        self.setBackgroundImageForItem = function (audioRecording, offsetSeconds) {
+
+            //console.log("---------");
+            //console.log(audioRecording.siteId, audioRecording.recordedDate, offsetSeconds);
+            var segmentDate = new Date(audioRecording.recordedDate.getTime() + offsetSeconds * 1000);
+            //self.temp.add(`siteID: ${audioRecording.siteId}, date: ${segmentDate}`);
+            //console.log(self.temp);
+            //console.log("---------");
+
+
+            // order images by sitematch then time difference (rounded to 3 hours), then date difference
+            // not perfect - but this is only temporary
+            self.images.sort(function(a,b) {
+
+                // sort by site match
+                var siteMatchA = (a[1] === audioRecording.siteId);
+                var siteMatchB = (b[1] === audioRecording.siteId);
+
+                if (siteMatchA && !siteMatchB) {
+                    return -1;
+                } else if (siteMatchB && !siteMatchA) {
+                    return 1;
+                }
+
+                // sort by time of day difference
+                var dateA = new Date(a[2]);
+                var dateB = new Date(b[2]);
+                var segmentHours = segmentDate.getHours();
+
+                var timeDifferenceA =  Math.abs(Math.round(((dateA.getHours() - segmentHours) / 3)));
+                var timeDifferenceB =  Math.abs(Math.round(((dateB.getHours() - segmentHours) / 3)));
+
+                if (timeDifferenceA < timeDifferenceB) {
+                    return -1;
+                } else if (timeDifferenceB > timeDifferenceA) {
+                    return 1;
+                }
+
+                segmentDate.getHours();
+
+
+                var dateDifferenceA = Math.abs(dateA.getTime() - segmentDate.getTime());
+                var dateDifferenceB = Math.abs(dateB.getTime() - segmentDate.getTime());
+
+
+                if (dateDifferenceA < dateDifferenceB) {
+                    return -1;
+                } else if (dateDifferenceB > dateDifferenceA) {
+                    return 1;
+                }
+
+                return 0;
+
+            });
+
+            var bestImage = self.images[0][0];
+
+            console.log(bestImage, bestImage, segmentDate, audioRecording.Site);
+
+            self.currentBackground = bestImage;
+
+        };
+
+
+
+
+
+
         return {
-            currentBackground: currentBackground
+            currentBackground: currentBackground,
+            setBackgroundImageForItem: self.setBackgroundImageForItem
         };
-    })
+    }])
     .component("background", {
         template: `<div ng-repeat='background in backgrounds' ng-if="background.state !== 'finished'" class='background {{background.state}}' style='background-image:url({{background.url}});'></div>`,
         controller: ["$scope", "backgroundImage", "$timeout", function ($scope, backgroundImage, $timeout) {