diff --git a/src/app/audio/ngAudio.js b/src/app/audio/ngAudio.js index b4b7bf17..b7334a44 100644 --- a/src/app/audio/ngAudio.js +++ b/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. diff --git a/src/app/citizenScience/bristlebird/bristlebird.js b/src/app/citizenScience/bristlebird/bristlebird.js index aa7bd908..61665e18 100644 --- a/src/app/citizenScience/bristlebird/bristlebird.js +++ b/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); diff --git a/src/app/citizenScience/datasetProgress/citizenScienceSamples.js b/src/app/citizenScience/datasetProgress/citizenScienceSamples.js index 1adc9e3f..1b25de9b 100644 --- a/src/app/citizenScience/datasetProgress/citizenScienceSamples.js +++ b/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 = { /** diff --git a/src/components/services/background/background.js b/src/components/services/background/background.js index 79c76b0a..791a114e 100644 --- a/src/components/services/background/background.js +++ b/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: `
`, controller: ["$scope", "backgroundImage", "$timeout", function ($scope, backgroundImage, $timeout) {