diff --git a/src/app/annotationLibrary/annotationItem.js b/src/app/annotationLibrary/annotationItem.js index 376cd913..5290057b 100644 --- a/src/app/annotationLibrary/annotationItem.js +++ b/src/app/annotationLibrary/annotationItem.js @@ -6,21 +6,14 @@ angular.module("bawApp.components.annotationItem", []) "$http", function ($scope, $http) { - var controllerSelf = this; - console.log(controllerSelf); - - - - this.audioElement = { volume: 1, muted: false, - autoPlay: true, + autoPlay: false, position: 0 }; - }], bindings: { annotation: "=annotation", diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html index c0857938..52c60be4 100644 --- a/src/app/annotationLibrary/annotationItem.tpl.html +++ b/src/app/annotationLibrary/annotationItem.tpl.html @@ -2,9 +2,10 @@ ng-style="{width:$ctrl.annotation.bounds.enforcedImageWidth + 100}">
+ ng-style="{width: $ctrl.annotation.bounds.enforcedImageWidth, height: $ctrl.annotation.bounds.enforcedImageHeight}" class="spectrogram"> +
-
+
@@ -20,4 +21,4 @@ type="{{$ctrl.annotation.media.available.audio[key].mimeType}}"> Your browser does not support the audio element. -
ß \ No newline at end of file +
\ No newline at end of file diff --git a/src/app/annotationLibrary/annotationLibrary.tpl.html b/src/app/annotationLibrary/annotationLibrary.tpl.html index 910d4594..aa90ec7d 100644 --- a/src/app/annotationLibrary/annotationLibrary.tpl.html +++ b/src/app/annotationLibrary/annotationLibrary.tpl.html @@ -190,23 +190,25 @@

-
- - -
-
-
+ + + + + + + + + +
- + + + + + + diff --git a/src/app/annotationViewer/_positionLine.scss b/src/app/annotationViewer/_positionLine.scss index f131bc9f..795aa558 100644 --- a/src/app/annotationViewer/_positionLine.scss +++ b/src/app/annotationViewer/_positionLine.scss @@ -3,15 +3,15 @@ * as a reusable component, it shouldn't be inside annotation viewer */ .positionLine { - //border-left: solid 1px $spectrogramProgressLine; - background-color: $spectrogramProgressLine; + border-left: solid 1px $spectrogramProgressLine; + //background-color: $spectrogramProgressLine; height: 100%; - width: 1px; + width: 100%; position: absolute; z-index: 1000; top: 0; left: 0; - @include vendor-prefix(transform, translate3d(0px, 0, 0)); + @include vendor-prefix(transform, translate3d(0%, 0, 0)); &.hidden { display: none; diff --git a/src/app/annotationViewer/positionLine.js b/src/app/annotationViewer/positionLine.js index c2b5ab19..0809f0c4 100644 --- a/src/app/annotationViewer/positionLine.js +++ b/src/app/annotationViewer/positionLine.js @@ -9,35 +9,70 @@ angular scope: { media: " 3 || element.tagName === "BODY") { + return null; + } + + var containingElement = element.parentElement; + var images = containingElement.getElementsByClassName(scope.imageClass); + if (images.length > 0) { + return images[0]; + } else { + return this.getImageElement(containingElement, depth + 1); + } + }; + + if (scope.imageClass !== undefined) { + image = this.getImageElement(elements[0], 0); + } else { + image = null; + } + + + scope.secondsToPixels = function (audioPositionSeconds) { + var pixelPosition, imageWidth; if (image.clientWidth > 0) { imageWidth = image.clientWidth; } else { - // use number of colums of spectrogram as image width + // use number of columns of spectrogram as image width imageWidth = 1; } - pixelPosition = imageWidth * (audioPositionSeconds / (scope.media.endOffset - scope.media.startOffset)); - } else { - pixelPosition = 0; - } + pixelPosition = imageWidth * (scope.secondsToRatio(audioPositionSeconds)); + return pixelPosition; }; + scope.secondsToRatio = function (audioPositionSeconds) { + if (scope.media && scope.media.endOffset) { + return audioPositionSeconds / (scope.media.endOffset - scope.media.startOffset); + } + return 0; + + }; + + + angular.element($window).on("resize", function () { //scope.updateConverters(scope.media); scope.$apply(); @@ -51,12 +86,20 @@ angular return 0; } + }; + scope.positionLinePercent = function () { - + if (typeof(this.audioData) === "object") { + return (scope.secondsToRatio(this.audioData.position) * 100) + "%"; + } else { + return "0%"; + } }; + + } }; diff --git a/src/app/annotationViewer/positionLine.tpl.html b/src/app/annotationViewer/positionLine.tpl.html index 2702edf7..ff57e143 100644 --- a/src/app/annotationViewer/positionLine.tpl.html +++ b/src/app/annotationViewer/positionLine.tpl.html @@ -1,3 +1,3 @@ -
+
 
\ No newline at end of file diff --git a/src/components/directives/ngAudio.js b/src/components/directives/ngAudio.js index 1c299b26..aab7bcbf 100644 --- a/src/components/directives/ngAudio.js +++ b/src/components/directives/ngAudio.js @@ -120,7 +120,7 @@ angular.module("bawApp.directives.ngAudio", [ function updateState(event) { console.debug("ngAudio:audioElement:eventType: ", event ? event.type : "", element.currentTime); - scope.$safeApply2(function () { + scope.$root.$safeApply(scope, function () { if (attributes.ngAudio) { var target = expression(scope); if (!target) { diff --git a/src/components/directives/others.js b/src/components/directives/others.js index 725071e0..6ed8a871 100644 --- a/src/components/directives/others.js +++ b/src/components/directives/others.js @@ -203,11 +203,27 @@ angular var element = elements[0]; function leftWatcher(newValue, oldValue) { - element.style[transformProperty] = "" + newValue.toFixed(3) + "px"; + element.style[transformProperty] = "" + translateValue(newValue); } function transformWatcher(newValue, oldValue) { - element.style[transformProperty] = "translate3d(" + newValue.toFixed(3) + "px, 0, 0)"; + element.style[transformProperty] = "translate3d(" + translateValue(newValue) + ", 0, 0)"; + } + + /** + * allows val to be either string with desired units (px or %) or number, + * in which case defaults to px + * @param val + * @returns string + */ + function translateValue (val) { + + if (typeof(val) === "number") { + return val.toFixed(3) + "px"; + } else { + return val; + } + } var watcher = getSupportedTransform() ? transformWatcher : leftWatcher;