Skip to content

Commit

Permalink
annotation item as component, used in library item
Browse files Browse the repository at this point in the history
  • Loading branch information
@peichins
peichins committed Dec 13, 2016
1 parent 966d290 commit 7088801
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 44 deletions.
9 changes: 1 addition & 8 deletions src/app/annotationLibrary/annotationItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions src/app/annotationLibrary/annotationItem.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
ng-style="{width:$ctrl.annotation.bounds.enforcedImageWidth + 100}">
<div class="library-spectrogram">
<img ng-src="{{$ctrl.annotation.media.available.image.png.url}}"
ng-style="{width: $ctrl.annotation.bounds.enforcedImageWidth, height: $ctrl.annotation.bounds.enforcedImageHeight}" id="spectrogram">
ng-style="{width: $ctrl.annotation.bounds.enforcedImageWidth, height: $ctrl.annotation.bounds.enforcedImageHeight}" class="spectrogram">
<div position-line media="$ctrl.annotation.media" audio-data="$ctrl.audioElement" image-class="'spectrogram'"></div>
<grid-lines configuration="$ctrl.annotation.gridConfig" class="library-spectrogram-grid"></grid-lines>
<div position-line media="$ctrl.annotation.media" audio-data="$ctrl.audioElement" image-id="'spectrogram'"></div>

<div class="marquee-clipper">
<div class="library-spectrogram-bounds"
ng-style="{top: $ctrl.annotation.bounds.top, left: $ctrl.annotation.bounds.left, width: $ctrl.annotation.bounds.width, height: $ctrl.annotation.bounds.height}"></div>
Expand All @@ -20,4 +21,4 @@
type="{{$ctrl.annotation.media.available.audio[key].mimeType}}">
Your browser does not support the audio element.
</audio>
</div>ß
</div>
30 changes: 16 additions & 14 deletions src/app/annotationLibrary/annotationLibrary.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,23 +190,25 @@ <h3 class="col-sm-4 text-right">
<div class="annotation-library clearfix">
<div ng-repeat="item in annotations" class="pull-left library-item thumbnail">

<div class="library-spectrogram">
<img ng-src="{{item.media.available.image.png.url}}" src=""
ng-style="{width: item.bounds.enforcedImageWidth, height: item.bounds.enforcedImageHeight}">
<grid-lines configuration="item.gridConfig" class="library-spectrogram-grid"></grid-lines>
<div position-line media="item.media" audio-data="item.audioElement"></div>
<div class="library-spectrogram-bounds"
ng-style="{top: item.bounds.top, left: item.bounds.left, width: item.bounds.width, height: item.bounds.height}"></div>
</div>
<annotation-item annotation="item"></annotation-item>

<!--<div class="library-spectrogram">-->
<!--<img ng-src="{{item.media.available.image.png.url}}" src=""-->
<!--ng-style="{width: item.bounds.enforcedImageWidth, height: item.bounds.enforcedImageHeight}">-->
<!--<grid-lines configuration="item.gridConfig" class="library-spectrogram-grid"></grid-lines>-->
<!--<div position-line media="item.media" audio-data="item.audioElement"></div>-->
<!--<div class="library-spectrogram-bounds"-->
<!--ng-style="{top: item.bounds.top, left: item.bounds.left, width: item.bounds.width, height: item.bounds.height}"></div>-->
<!--</div>-->

<div class="library-item-info"
ng-style="{width:item.bounds.enforcedImageWidth}">
<audio controls>
<source ng-repeat="key in item.media.available.audioOrder"
ng-src="{{item.media.available.audio[key].url}}" src=""
type="{{item.media.available.audio[key].mimeType}}">
Your browser does not support the audio element.wel
</audio>
<!--<audio controls>-->
<!--<source ng-repeat="key in item.media.available.audioOrder"-->
<!--ng-src="{{item.media.available.audio[key].url}}" src=""-->
<!--type="{{item.media.available.audio[key].mimeType}}">-->
<!--Your browser does not support the audio element.wel-->
<!--</audio>-->
<span>
<span class="info-entry"
ng-switch="item.taggings.length > 0">
Expand Down
8 changes: 4 additions & 4 deletions src/app/annotationViewer/_positionLine.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
65 changes: 54 additions & 11 deletions src/app/annotationViewer/positionLine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,70 @@ angular
scope: {
media: "<media",
audioData: "<audioData",
imageId: "<imageId"
imageClass: "<imageClass"
},
link: function (scope, elements, attributes, controller) {

var image;

scope.converters = false;

var image = document.querySelector("#"+scope.imageId);

scope.secondsToPixels = function (audioPositionSeconds) {
var pixelPosition, imageWidth;

/**
* Searches for the closest node to the position line element that has the class
* scope.imageClass
* @param element
* @returns DOM element or NULL
*/
this.getImageElement = function (element, depth) {

if (scope.media && scope.media.endOffset) {
if (depth > 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();
Expand All @@ -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%";
}

};



}
};

Expand Down
2 changes: 1 addition & 1 deletion src/app/annotationViewer/positionLine.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="positionLine" baw-translate-x="positionLine()">
<div class="positionLine" baw-translate-x="positionLinePercent()">
&nbsp;
</div>
2 changes: 1 addition & 1 deletion src/components/directives/ngAudio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ angular.module("bawApp.directives.ngAudio", [
function updateState(event) {
console.debug("ngAudio:audioElement:eventType: ", event ? event.type : "<unknown>", element.currentTime);

scope.$safeApply2(function () {
scope.$root.$safeApply(scope, function () {
if (attributes.ngAudio) {
var target = expression(scope);
if (!target) {
Expand Down
20 changes: 18 additions & 2 deletions src/components/directives/others.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 7088801

Please sign in to comment.