opentok-annotation - npm Package Compare versions

Comparing version 2.0.50 to 2.0.51

dist/opentok-annotation.min.js

@@ -1,2 +0,2 @@
-(function(){var t,e,n,o={clientVersion:"js-vsol-1.1.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionStartDrawing:"StartDrawing",actionEndDrawing:"EndDrawing",variationSuccess:"Success"},i=function(){var i=window.location.href,a={clientVersion:o.clientVersion,source:i,componentId:o.componentId,name:o.name};e=new t(a);var s={sessionId:n.id,connectionId:n.connection.connectionId,partnerId:n.apiKey};e.addSessionInfo(s)},a=function(t,n){var o={action:t,variation:n};e.logEvent(o)},s="https://assets.tokbox.com/solutions/images/";OTSolution=this.OTSolution||{},OTSolution.Annotations=function(r){function c(t){var e={},n={get X(){var t=C?p.width:f.videoFeed.stream.videoDimensions.width;return t/p.width},get Y(){var t=C?p.height:f.videoFeed.stream.videoDimensions.height;return t/p.height}};return Object.keys(t).forEach(function(n){e[n]=t[n]}),["X","Y"].forEach(function(t){["to","from","last","m","start","point"].forEach(function(o){var i=o+t;e["_"+i]=e[i],Object.defineProperty(e,i,{get:function(){return e["_"+i]/n[t]},set:function(t){e["_"+i]=t}})})}),e}function d(t,e,n){for(var o=e.split(" "),i=0,a=o.length;i<a;i++)t.addEventListener(o[i],n,!0)}function l(t,e){0===p.width&&(p.width=f.parent.getBoundingClientRect().width),0===p.height&&(p.height=f.parent.getBoundingClientRect().height);var n=e?t.canvas.offsetLeft:p.offsetLeft,i=e?t.canvas.offsetTop:p.offsetTop;if(C)var s=e?t.canvas.width:f.parent.clientWidth,r=e?t.canvas.height:f.parent.clientHeight,d=p.width/s,l=p.height/r,h=t.offsetX||t.pageX-n||t.changedTouches&&t.changedTouches[0].pageX-n,u=t.offsetY||t.pageY-i||t.changedTouches&&t.changedTouches[0].pageY-i,m=h*d,g=u*l;else{var b=f.videoFeed.stream.videoDimensions,d=b.width/p.width,l=b.height/p.height;E&&(d=1,l=1);var h=t.offsetX||t.pageX-n||t.changedTouches&&t.changedTouches[0].pageX-n,u=t.offsetY||t.pageY-i||t.changedTouches&&t.changedTouches[0].pageY-i,m=h*d,g=u*l}var w,I=e?t.selectedItem:f.selectedItem;if(I)if("OT_pen"===I.id)switch(t.type){case"mousedown":case"touchstart":O.dragging=!0,O.lastX=m,O.lastY=g,f.isStartPoint=!0,!e&&a(o.actionStartDrawing,o.variationSuccess);break;case"mousemove":case"touchmove":O.dragging&&(w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:m,toY:g,color:e?t.userColor:f.userColor,lineWidth:f.lineWidth,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,startPoint:f.isStartPoint,endPoint:!1,selectedItem:I,platform:"web",guid:t.guid},H(new c(w),!0),O.lastX=m,O.lastY=g,!e&&G(w),f.isStartPoint=!1);break;case"mouseup":case"touchend":O.dragging=!1,w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:m,toY:g,color:e?t.userColor:f.userColor,lineWidth:f.lineWidth,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,startPoint:f.isStartPoint,endPoint:!0,selectedItem:I,platform:"web",guid:t.guid},H(new c(w),!0),O.lastX=m,O.lastY=g,!e&&G(w),f.isStartPoint=!1,!e&&a(o.actionEndDrawing,o.variationSuccess);break;case"mouseout":O.dragging=!1}else if("OT_text"===I.id)w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:m,fromY:g+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,selectedItem:I,platform:"web",guid:t.guid},H(new c(w)),!e&&G(w);else{var x=2;if(I&&I.points)switch(O.mX=m,O.mY=g,t.type){case"mousedown":case"touchstart":O.isDrawing=!0,O.dragging=!0,O.startX=m,O.startY=g;break;case"mousemove":case"touchmove":O.dragging&&(w={color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,selectedItem:I},H(new c(w),!0));break;case"mouseup":case"touchend":O.isDrawing=!1;var T=I.points;if(2===T.length)w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._startX,fromY:O._startY,toX:O._mX,toY:O._mY,color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,smoothed:!1,startPoint:!0,selectedItem:I,platform:"web",guid:t.guid},y.push(new c(w)),!e&&G(w);else{for(var _=D(T),P=0;P<T.length;P++){var S=!1,A=!1,k=O._startX+_.x*T[P][0],W=O._startY+_.y*T[P][1];0===P?(O.lastX=k,O.lastY=W,S=!0):P===T.length-1&&(A=!0),w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:k,toY:W,color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,smoothed:I.enableSmoothing,startPoint:S,endPoint:A,selectedItem:I,platform:"web",guid:t.guid},y.push(new c(w)),!e&&G(w),O.lastX=k,O.lastY=W}H(null)}O.dragging=!1}}}function h(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0,n="x"==t?e:3&e|8;return n.toString(16)})}r=r||{},this.widgetVersion="js-1.0.0-beta",this.parent=r.container,this.videoFeed=r.feed,this.imageAssets=r.imageAssets||s,t=t||r.OTKAnalytics,e||i(),"object"==typeof module&&"object"==typeof module.exports&&($=require("jquery"));var u=r.externalWindow?r.externalWindow.document:window.document,f=this;if(this.parent){var p=document.createElement("canvas");p.setAttribute("id","opentok_canvas"),p.style.position="absolute",this.parent.appendChild(p),p.setAttribute("width",this.parent.clientWidth+"px"),p.style.width=window.getComputedStyle(this.parent).width,p.setAttribute("height",this.parent.clientHeight+"px"),p.style.height=window.getComputedStyle(this.parent).height}var m,g,v,b,f=this,w=[],I=[],y=[],x=[],T=[],_=[],M=!(!f.videoFeed||!f.videoFeed.element),C=!f.videoFeed.stream,E=!1,O=new c({dragging:!1});M?(g=(" "+f.videoFeed.element.className+" ").indexOf(" OT_publisher ")>-1,v=!!g&&(" "+f.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,b=(" "+f.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1):(v=!1,b=!1),this.canvas=function(){return p},this.link=function(t){this.session=t},this.changeColor=function(t){f.userColor=t,f.lineWidth||(f.lineWidth=2)},this.changeColorByIndex=function(t){f.userColor=this.colors[t];var e=u.querySelectorAll(".color-choice");e[t].classList.add("active");var n=u.getElementById("OT_colors");n.setAttribute("class","OT_color annotation-btn colors"),n.style.borderRadius="50%",n.style.backgroundColor=this.colors[t]},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){f.overlay&&(f.parent.removeChild(f.overlay),f.overlay=null);var e=function(){var e=u.getElementById(f.selectedItem.id),n=u.getElementById("OT_shapes"),o=n.classList.contains("selected");o?n.classList.remove("selected"):e.classList.remove("selected");var i=u.getElementById(t.id);i.parentElement.classList.contains("shapes")?n.classList.add("selected"):i.classList.add("selected")};t&&"OT_capture"===t.id?f.captureScreenshot():t&&t.id.indexOf("OT_line_width")!==-1?t.size&&f.changeLineWidth(t.size):"OT_undo"!==t.id&&"OT_clear"!==t.id&&(e(),f.selectedItem=t)},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){V(!1,f.session.connection.connectionId),f.session&&f.session.signal({type:"otAnnotation_clear"})},this.undo=function(){J(!1,f.session.connection.connectionId)},this.captureScreenshot=function(t){var e=document.createElement("canvas");e.width=p.width,e.height=p.height;var n=M?f.videoFeed.videoWidth():p.width,o=M?f.videoFeed.videoHeight():p.height,i=1,a=0,s=0;b?(n<o?(i=p.width/n,n=p.width,o*=i):(i=p.height/o,o=p.height,n*=i),a=(n-p.width)/2,s=(o-p.height)/2):n>o?(i=p.width/n,n=p.width,o*=i,a=0,s=(p.height-o)/2):(i=p.height/o,o=p.height,n*=i,a=(p.width-n)/2,s=0);var c=new Image;if(c.onload=function(){var i=e.getContext("2d");v&&(i.translate(n,0),i.scale(-1,1)),i.drawImage(c,a,s,n,o),v&&(i.translate(n,0),i.scale(-1,1)),i.drawImage(p,0,0),w.forEach(function(n){var o={src:e.toDataURL(),isAnnotationEnd:t};n.call(f,o)}),e=null},M)imgData="data:image/png;base64,"+f.videoFeed.getImgData(),c.src=imgData;else{var d=r.externalWindow?r.externalWindow:window;c.src=d.getComputedStyle(f.parent)["background-image"].replace(/url\("|"\)/g,"")}},this.onScreenCapture=function(t){w.push(t)},this.onMobileScreenShare=function(t){_subscribingToMobileScreen=t},this.onResize=function(){q(T,!0),H(null,!0)},this.onClearAnnotation=function(){z()},d(p,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=f.selectedItem&&"OT_text"===f.selectedItem.id,n="mousemove"===t.type&&!O.dragging;e||n||(t.preventDefault(),t.selectedItem=f.selectedItem,t.selectedItem&&(t.canvas={width:p.width,height:p.height,offsetLeft:p.offsetLeft,offsetTop:p.offsetTop},t.userColor=f.userColor,t.lineWidth=f.lineWidth,t.guid=h(),_.push(t)),l(t))});var P,S="textAnnotation",A="commitTextPop",k="confirm-btn",W="dismiss-btn",X=!1,Y=function(t){t.preventDefault(),f.selectedItem&&"OT_text"===f.selectedItem.id&&!X&&(X=!0,t.selectedItem=f.selectedItem,j(t))},L=function(){var t=u.getElementById(S);t.clientHeight;return t.value?(P.text=t.value,P.font="16px Arial",P.userColor=f.userColor,P.canvas={width:p.width,height:p.height,offsetLeft:p.offsetLeft,offsetTop:p.offsetTop},_.push(P),l(P),z(),void(X=!1)):void(P=null)},j=function(t){var e=u.createElement("input");e.setAttribute("type","text"),e.style.position="fixed",e.style.top=t.clientY+"px",e.style.left=t.clientX+"px",e.style.background="rgba(255,255,255, .5)",e.style.width="100px",e.style.maxWidth="200px",e.style.border="1px dashed red",e.style.fontSize="16px",e.style.color=f.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.setAttribute("data-top",t.clientY-50),e.id=S,u.body.appendChild(e),e.focus(),e.addEventListener("keydown",function(t){13===t.which&&F(e)}),e.addEventListener("blur",function(){F(e)}),P=t,P.inputHeight=e.clientHeight,X=!0},F=function(t){if(!u.getElementById(A)){var e=u.createElement("div");e.style.position="fixed",e.style.top=t.dataset.top+"px",e.style.left=t.style.left,e.style.width="200px",e.style.fontSize="16px",e.style.fontFamily="Arial",e.style.zIndex="2000",e.style.border="1px solid grey",e.style.height="40px",e.className="ots-annotation-prompt",e.id=A;var n=u.createElement("span"),o=u.createTextNode("Commit type?");n.appendChild(o),e.append(n);var i=u.createElement("div");i.id=k,i.className=k;var a=u.createElement("div");a.id=W,a.className=W,e.appendChild(i),e.appendChild(a),u.body.appendChild(e),a.addEventListener("click",z),i.addEventListener("click",function(){L()})}},z=function(){u.getElementById(S)&&u.getElementById(S).remove(),u.getElementById(A)&&u.getElementById(A).remove(),P=null,X=!1};d(p,"click",Y);var H=function(t,e){if(m||(m=p.getContext("2d"),m.lineCap="round",m.lineJoin="round",m.fillStyle="solid"),m.clearRect(0,0,p.width,p.height),y.forEach(function(t){m.strokeStyle=t.color,m.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=t.hasOwnProperty("text");n?(m.font=t.font,m.fillStyle=t.color,m.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?f.isStartPoint=!0:f.isStartPoint&&(e=!0,f.isStartPoint=!1),t.startPoint?(m.closePath(),m.beginPath()):e?m.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(m.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),m.stroke())):(m.beginPath(),m.moveTo(t.fromX,t.fromY),m.lineTo(t.toX,t.toY),m.stroke(),m.closePath())}),!e||t){var n=e?t.selectedItem:f.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?O.isDrawing&&(t&&(m.strokeStyle=t.color,m.lineWidth=t.lineWidth),n&&n.points&&B(m,f.selectedItem.points)):t&&("Pen"===n.title&&(m.strokeStyle=t.color,m.lineWidth=t.lineWidth,m.beginPath(),m.moveTo(t.fromX,t.fromY),m.lineTo(t.toX,t.toY),m.stroke(),m.closePath()),"Text"===n.title&&(m.font=t.font,m.fillStyle=t.color,m.fillText(t.text,t.fromX,t.fromY)),y.push(t))}},B=function(t,e){var n=D(e);if(t.beginPath(),2===e.length)t.moveTo(O.startX,O.startY),t.lineTo(O.mX,O.mY);else for(var o=0;o<e.length;o++)O.pointX=O._startX+n.x*e[o][0],O.pointY=O._startY+n.y*e[o][1],f.selectedItem.enableSmoothing?0===o||(1===o?(t.moveTo((O.pointX+O.lastX)/2,(O.pointY+O.lastY)/2),O.lastX=(O._pointX+O._lastX)/2,O.lastX=(O._pointY+O._lastY)/2):(t.quadraticCurveTo(O.lastX,O.lastY,(O.pointX+O.lastX)/2,(O.pointY+O.lastY)/2),O.lastX=(O._pointX+O._lastX)/2,O.lastY=(O._pointY+O._lastY)/2)):0===o?t.moveTo(O.pointX,O.pointY):t.lineTo(O.pointX,O.pointY),O.lastX=O._pointX,O.lastY=O._pointY;t.stroke(),t.closePath()},D=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,o=0,i=0,a=0;a<t.length;a++)t[a][0]<e?e=t[a][0]:t[a][0]>o&&(o=t[a][0]),t[a][1]<n?n=t[a][1]:t[a][1]>i&&(i=t[a][1]);var s=Math.abs(o-e),r=Math.abs(i-n),c=(O._mX-O._startX)/s,d=(O._mY-O._startY)/r;return{x:c,y:d}},N=function(t,e,n){var o=({width:t.canvasWidth,height:t.canvasHeight},{width:t.videoWidth,height:t.videoHeight},{width:M?f.videoFeed.videoElement().clientWidth:p.width,height:M?f.videoFeed.videoElement().clientHeight:p.height});t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=o.width-t.fromX,t.toX=o.width-t.toX),v&&(t.fromX=o.width-t.fromX,t.toX=o.width-t.toX);var i=JSON.parse(JSON.stringify(t));i.canvasWidth=p.width,i.canvasHeight=p.height,i.videoWidth=o.width,i.videoHeight=o.height,e?T[n]=i:(T.push(i),y.push(new c(t))),H(null)},q=function(t,e){t.forEach(function(t,n){(!M||f.videoFeed&&f.videoFeed.stream&&t.id===f.videoFeed.stream.connection.connectionId)&&N(t,e,n)})},V=function(t,e){y=y.filter(function(t){return t.fromId!==e}),t?T=[]:(f.session&&f.session.signal({type:"otAnnotation_clear"}),_=[]),H()},J=function(t,e,n){for(var o,i,a=!1,s=[],r=y.length-1;r>=0;r--)if(o=y[r],o.fromId===e){if("ios"===o.platform&&n&&n.length&&null!==n[0]){R(t,e,n);break}if(a=a||o.endPoint,i=y.splice(r,1)[0],s.push(i.guid),!a||a&&i.startPoint===!0)break}t?T=T.filter(function(t){return!n.includes(t.guid)}):(_=_.filter(function(t){return!s.includes(t.guid)}),f.session.signal({type:"otAnnotation_undo",data:JSON.stringify(s)})),H()},R=function(t,e,n){for(var o,i,a=[],s=y.length-1;s>=0;s--)o=y[s],o.fromId===e&&o.guid===n[0]&&(i=y.splice(s,1)[0],a.push(i.guid));t?T=T.filter(function(t){return!n.includes(t.guid)}):(_=_.filter(function(t){return!a.includes(t.guid)}),f.session.signal({type:"otAnnotation_undo",data:JSON.stringify(a)})),H()};n&&n.on({"signal:otAnnotation_pen":function(t){if(t.from.connectionId!==n.connection.connectionId){var e=JSON.parse(t.data);q(e)}},"signal:otAnnotation_text":function(t){t.from.connectionId!==n.connection.connectionId&&q(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){x&&x!==t.from.connectionId||(x=t.from.connectionId,q(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==n.connection.connectionId&&V(!0,t.from.connectionId)},"signal:otAnnotation_undo":function(t){t.from.connectionId!==n.connection.connectionId&&J(!0,t.from.connectionId,JSON.parse(t.data))},connectionCreated:function(t){y.length>0&&t.connection.connectionId!==n.connection.connectionId&&U("otWhiteboard_history",y,t.connection)}});var K,U=function(t,e){for(var n,o=function(t){t&&TB.error(t)},i="otAnnotation_pen",a=function(t){if(t&&t[0]&&t[0].selectedItem&&t[0].selectedItem.id){var e=t[0].selectedItem.id;i="OT_text"===e?"otAnnotation_text":"otAnnotation_pen"}},s=0,r=7;s<t.length;){n=t.slice(s,s+r),a(n),s+=r;var c={type:i,data:JSON.stringify(n)};e&&(c.to=e),f.session.signal(c,o)}},G=function(t){f.session&&(I.push(t),K||(K=setTimeout(function(){U(I),I=[],K=null},100)))}},OTSolution.Annotations.Toolbar=function(o){var a=this,r=this;if(o||(o={}),!o.session)throw new Error("OpenTok Annotation Widget requires an OpenTok session");if(n=o.session,!t&&!o.OTKAnalytics)throw new Error("OpenTok Annotation Widget requires an OpenTok Solution");t=t||o.OTKAnalytics,e||i(),this.session=o.session,this.parent=o.container,this.externalWindow=o.externalWindow,this.backgroundColor=o.backgroundColor||"rgba(102, 102, 102, 0.90)",this.subpanelBackgroundColor=o.subpanelBackgroundColor||"#323232";var c=o.imageAssets||s,d=[{id:"OT_pen",title:"Pen",icon:[c,"annotation-pencil.png"].join(""),selectedIcon:[c,"annotation-pencil.png"].join(""),items:{}},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_shapes",title:"Shapes",icon:[c,"annotation-shapes.png"].join(""),items:[{id:"OT_rect",title:"Rectangle",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_rect_fill",title:"Rectangle-Fill",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:[c,"annotation-oval.png"].join(""),enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]},{id:"OT_oval_fill",title:"Oval-Fill",icon:[c,"annotation-oval-fill.png"].join(""),enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]},{id:"OT_star",title:"Star",icon:[c,"annotation-star.png"].join(""),points:[[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))],[.5+.25*Math.cos(126*(Math.PI/180)),.5+.25*Math.sin(126*(Math.PI/180))],[.5+.5*Math.cos(162*(Math.PI/180)),.5+.5*Math.sin(162*(Math.PI/180))],[.5+.25*Math.cos(198*(Math.PI/180)),.5+.25*Math.sin(198*(Math.PI/180))],[.5+.5*Math.cos(234*(Math.PI/180)),.5+.5*Math.sin(234*(Math.PI/180))],[.5+.25*Math.cos(270*(Math.PI/180)),.5+.25*Math.sin(270*(Math.PI/180))],[.5+.5*Math.cos(306*(Math.PI/180)),.5+.5*Math.sin(306*(Math.PI/180))],[.5+.25*Math.cos(342*(Math.PI/180)),.5+.25*Math.sin(342*(Math.PI/180))],[.5+.5*Math.cos(18*(Math.PI/180)),.5+.5*Math.sin(18*(Math.PI/180))],[.5+.25*Math.cos(54*(Math.PI/180)),.5+.25*Math.sin(54*(Math.PI/180))],[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))]]},{id:"OT_arrow",title:"Arrow",icon:[c,"annotation-arrow.png"].join(""),points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_line",title:"Line",icon:[c,"annotation-line.png"].join(""),selectedIcon:[c,"annotation-line.png"].join(""),points:[[0,0],[0,1]]}]},{id:"OT_text",title:"Text",icon:[c,"annotation-text.png"].join(""),selectedIcon:[c,"annotation-text.png"].join("")},{id:"OT_capture",title:"Capture",icon:[c,"annotation-camera.png"].join(""),selectedIcon:[c,"annotation-camera.png"].join("")},{id:"OT_undo",title:"Undo",icon:[c,"annotation-undo.png"].join("")},{id:"OT_clear",title:"Clear",icon:[c,"annotation-clear.png"].join("")}],l=function(){var t=["pen","colors","shapes","text","capture","undo","clear"],e=["rectangle","rectangle-fill","oval","oval-fill","star","arrow","line"],n=function(n,i){var a=t.indexOf(i);if(a!==-1){var s=d[a];if("Shapes"===s.title&&o.shapes){var r=o.shapes.reduce(function(t,n){var o=e.indexOf(n);return o!==-1?t.concat(s.items[o]):t},[]);s.items=r}n.push(s)}return n};if(o.items&&o.items.length){var i="*"===o.items[0]?t:o.items;return i.reduce(n,[])}return d};this.items=l(),this.colors=o.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var h,u=[],f=function(t,e,n){var o=this,i=r.externalWindow?r.externalWindow.document:document;this.getElm=function(t,e){return"string"==typeof t?e?i.querySelectorAll(t):i.querySelector(t):t},this.render=function(){var t=this,e="";t.colors.forEach(function(n){e+=t.options.template.replace(/\{color\}/g,n)}),t.elm.innerHTML=e},this.close=function(){this.elm.classList.add("ots-hidden")},this.open=function(){this.elm.classList.remove("ots-hidden")},this.colorChosen=function(t){this.cbs.push(t)},this.set=function(t,e){var n=this;n.color=t,e!==!1&&n.cbs.forEach(function(e){e.call(n,t)})},n=n||{},n.openEvent=n.openEvent||"click",n.style=Object(n.style),n.template=n.template||'<div class="color-choice" data-col="{color}" style="background-color: {color}"></div>',o.elm=o.getElm(t),o.cbs=[],o.colors=e,o.options=n,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");if(e){var n=Array.from(o.getElm(".color-choice",!0));n.forEach(function(t){t.classList.remove("active")}),t.target.classList.add("active"),o.set(e),o.close()}}),n.autoclose!==!1&&o.close()};this.createPanel=function(t){if(r.parent){var e=t?t.document:document;h=e.createElement("div"),h.setAttribute("id","OT_toolbar"),h.setAttribute("class","OT_panel"),h.style.width="100%",h.style.height="100%",this.parent.appendChild(h),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var n=[],o=e.createElement("div"),i=0,s=this.items.length;i<s;i++){var c=this.items[i],d=e.createElement("input");if(d.setAttribute("type","button"),d.setAttribute("id",c.id),d.classList.add("annotation-btn"),d.classList.add(c.title.split(" ").join("-").toLowerCase()),"OT_colors"===c.id){var l=e.createElement("div");l.setAttribute("class","color-picker"),this.parent.appendChild(l);var m=new f(".color-picker",this.colors,{externalWindow:r.externalWindow});m.colorChosen(function(t){var n=e.getElementById("OT_colors");n.style.backgroundColor=t,u.forEach(function(e){e.changeColor(t)})});var g=e.querySelectorAll(".color-choice");g[0].classList.add("active"),d.setAttribute("class","OT_color annotation-btn colors"),d.style.borderRadius="50%",d.style.backgroundColor=this.colors[0]}"Pen"!==c.title||Array.isArray(c.items)||(c.items=[{id:"OT_line_width_2",title:"Line Width 2",size:2},{id:"OT_line_width_4",title:"Line Width 4",size:4},{id:"OT_line_width_6",title:"Line Width 6",size:6},{id:"OT_line_width_8",title:"Line Width 8",size:8},{id:"OT_line_width_10",title:"Line Width 10",size:10},{id:"OT_line_width_12",title:"Line Width 12",size:12},{id:"OT_line_width_14",title:"Line Width 14",size:14}]),c.items&&d.setAttribute("data-type","group"),d.setAttribute("data-col",c.title),n.push(d.outerHTML)}h.innerHTML=n.join("");var v=function(t){var e=t?"add":"remove";document.getElementById("OT_toolbar").classList[e]("colors-hover")},b=e.getElementById("OT_colors");b.addEventListener("mouseenter",function(){v(!0)}),b.addEventListener("mouseleave",function(){v(!1)}),h.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),s=t.target.getAttribute("id");n?a.items.forEach(function(t){if(t.title===i){if(a.selectedGroup=t,t.items&&(o.setAttribute("class",["OT_subpanel","ots-hidden",t.title.toLowerCase()].join(" ")),a.parent.appendChild(o),Array.isArray(t.items))){var n=[];"OT_pen"===t.id?t.items.forEach(function(t){var o=e.createElement("div");o.setAttribute("data-col",t.title),o.setAttribute("class",["line-width-option",t.size].join(" ")),o.setAttribute("id",t.id);var i=e.createElement("div");i.setAttribute("class","line-width-icon"),i.style.backgroundColor="#FFFFFF",i.style.width="80%",i.style.height=t.size+"px",i.style.position="relative",i.style.left="50%",i.style.top="50%",i.style.transform="translateX(-50%) translateY(-50%)",i.style.pointerEvents="none",o.appendChild(i),n.push(o.outerHTML)}):t.items.forEach(function(t){var o=e.createElement("input");o.setAttribute("type","button"),o.setAttribute("data-col",t.title),o.setAttribute("id",t.id),o.setAttribute("class",["annotation-btn",t.title.toLowerCase()].join(" ")),n.push(o.outerHTML)}),o.innerHTML=n.join("")}"OT_shapes"===s||"OT_pen"===s?(o&&o.classList.remove("ots-hidden"),m.close()):"OT_colors"===s&&(o&&o.classList.add("ots-hidden"),m.open())}}):(a.items.forEach(function(t){if(("Clear"!==t.title||"Undo"!==t.title)&&t.title===i)return a.selectedItem=t,p(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}),o.classList.add("ots-hidden")),a.cbs.forEach(function(t){t.call(a,s)})},o.onclick=function(t){var e="group"===t.target.getAttribute("data-type"),n=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));n&&"linewidth"===n.replace(/[^a-z]/g,"")&&u.forEach(function(t){t.selectItem(a.selectedGroup)}),o.classList.add("ots-hidden"),e||a.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===n){if(a.selectedItem)var e=document.getElementById(a.selectedItem.id);if(t.selectedIcon){var o=document.getElementById(t.id);e&&(o.style.background='url("'+t.selectedIcon+'") no-repeat',o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center")}return a.selectedItem=t,p(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}}),a.cbs.forEach(function(t){t.call(a,n)})};var w=e.getElementById("OT_clear").onclick=function(){u.forEach(function(t){t.clear()})};e.getElementById("OT_undo").onclick=function(){u.forEach(function(t){t.undo()})},window.addEventListener("OT_clear",function(){w(),a.selectedItem=null,u.forEach(function(t){t.selectItem(a.selectedItem)})}),window.addEventListener("OT_pen",function(t){var e=a.items.find(function(t){return"OT_pen"===t.id});a.selectedItem=e,p(e);var n=t.detail.color;u.forEach(function(t){t.selectItem(a.selectedItem),n&&t.changeColor(n)})})}},!this.externalWindow&&this.createPanel();var p=function(t){t.points||("OT_line"===t.id?a.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?a.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?a.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(a.selectedItem.enableSmoothing=!0,a.selectedItem.points=[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]))};this.itemClicked=function(t){this.cbs.push(t)},this.addCanvas=function(t,e){var n=this,o=e?e.document:document;t.link(n.session),t.colors(n.colors),u.push(t),u.forEach(function(t){t.selectedItem=t.selectedItem||n.items[0],o.getElementById(t.selectedItem.id).classList.add("selected")})},this.removeCanvas=function(t){u.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),u=u.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{h.parentNode.removeChild(h)}catch(t){console.log(t)}u.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),u=[]}}}).call(this),function(){var t,e,n;"object"==typeof module&&"object"==typeof module.exports?(t=require("underscore"),e=require("jquery"),n=require("opentok-solutions-logging")):(t=this._,e=this.$,n=this.OTKAnalytics);var o,i,a,s,r,c,d={},l={clientVersion:"js-vsol-1.1.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionInitialize:"Init",actionStart:"Start",actionEnd:"End",actionFreeHand:"FreeHand",actionPickerColor:"PickerColor",actionText:"Text",actionScreenCapture:"ScreenCapture",actionErase:"Erase",actionUseToolbar:"UseToolbar",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},h=function(){var t=window.location.href,e={clientVersion:l.clientVersion,source:t,componentId:l.componentId,name:l.name};c=new n(e);var o={sessionId:a.id,connectionId:a.connection.connectionId,partnerId:a.apiKey};c.addSessionInfo(o)},u=function(t,e){var n={action:t,variation:e};c.logEvent(n)},f=function(t){return"string"==typeof t?document.querySelector(t):t},p=function(t,e){i&&i.triggerEvent(t,e)},m=function(){if(i){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];i.registerEvents(t)}},g=function(){var t=['<div id="annotationToolbarContainer" class="ots-annotation-toolbar-container">','<div id="toolbar"></div>',"</div>"].join("\n");e("body").append(t),u(l.actionUseToolbar,l.variationSuccess)},v=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],b=10/6,w=t.throttle(function(){s.onResize()},1e3),I=function(){var t,n,o=!!d.cobrowsingImage;if(!o){if(null===d.cobrowsingImage){var i=d.absoluteParent||d.canvasContainer;t=i.clientWidth,n=i.clientHeight}var a=s.videoFeed.stream.videoDimensions;r&&(a.width=t,a.height=n);var c=a.width/a.height,l=t/n,h={top:0,left:0,height:n,width:t};d.externalWindow||(c<l?(h.width=h.height*c,h.left=(t-h.width)/2):(h.height=h.width/c,h.top=(n-h.height)/2)),e(d.canvasContainer).find("canvas").css(h),e(d.canvasContainer).find("canvas").attr(h),w(),p("resizeCanvas")}},y=function(t){s.changeColorByIndex(t)},x=function(){s.captureScreenshot(!0)},T=function(){e(d.resizeSubject).on("resize",t.throttle(function(){I()},500))},_=function(e,o,i){g();var a=t.property("toolbarId")(o)||"toolbar",s=t.property("toolbarItems")(o)||[],r=t.property("toolbarShapes")(o)||[],c=t.property("colors")(o)||v,d=t.property("imageAssets")(o)||null,h=t.property("backgroundColor")(o)||null,f=function(){var t=i?i:window;return t.document.getElementById(a)};toolbar=new OTSolution.Annotations.Toolbar({session:e,container:f(),colors:c,items:s.length?s:["*"],shapes:r.length?r:["rectangle","oval","star","arrow","line"],externalWindow:i||null,imageAssets:d,backgroundColor:h,OTKAnalytics:n}),toolbar.itemClicked(function(t){var e={OT_pen:l.actionFreeHand,OT_colors:l.actionPickerColor,OT_text:l.actionText,OT_clear:l.actionErase},n=e[t];n&&u(n,l.variationSuccess)})},M=function(){var t=e.Deferred(),n=.8*screen.width|0,o=n/b,i='<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><link rel="stylesheet" href="https://assets.tokbox.com/solutions/css/style.css"><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.ots-hidden{display:none !important}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;display:flex;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="ots-annotation-toolbar-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, subscribeToVideo: "true", subscribeToAudio: "false", fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>',s=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",n].join(""),["height=",o].join(""),["left=",screen.width/2-n/2].join(""),["top=",screen.height/2-o/2].join("")].join(","),r=window.open("about:blank","",s);
-r.document.write(i),window.onbeforeunload=function(){r.close()},r.toolbar=toolbar,r.OT=OT,r.session=a,r.$=e,r.triggerCloseEvent=function(){p("annotationWindowClosed")},r.onbeforeunload=function(){p("annotationWindowClosed")};var c=function(){r.createContainerElements?e(r.document).ready(function(){t.resolve(r)}):setTimeout(c,100)};return c(),t.promise()},C=function(){s.onClearAnnotation(),e(d.resizeSubject).off("resize",I),toolbar.remove(),e("#annotationToolbarContainer").remove()},E=function(t){t.stream&&(a.signal({type:"otAnnotation_requestPlatform",to:t.stream.connection}),a.on("signal:otAnnotation_mobileScreenShare",function(t){var e=t.data?JSON.parse(t.data).platform:null,n="ios"==e||"android"===e;r=n,s.onMobileScreenShare(n)}))},O=function(n,o){var i=e.Deferred();return t.property("screensharing")(o)?M().then(function(t){_(n,o,t),toolbar.createPanel(t),p("startAnnotation",t),u(l.actionStart,l.variationSuccess),i.resolve(t)}):(_(n,o),p("startAnnotation"),u(l.actionStart,l.variationSuccess),i.resolve()),i.promise()},P=function(n,i,a){d.resizeSubject=f(t.property("externalWindow")(a)||window),d.externalWindow=f(t.property("externalWindow")(a)||null),d.absoluteParent=f(t.property("absoluteParent")(a)||null),d.cobrowsingImage=f(t.property("cobrowsingImage")(a)||null),d.canvasContainer=f(i),s=new OTSolution.Annotations({feed:n,container:d.canvasContainer,externalWindow:d.externalWindow}),toolbar.addCanvas(s,d.externalWindow);var r=o.options.onScreenCapture?o.options.onScreenCapture:function(t){var e=window.open(t,"_blank");e.focus()};s.onScreenCapture(r),E(n);var c=d.externalWindow?d.externalWindow:window;d.canvas=e(t.first(c.document.getElementsByTagName("canvas"))),T(),I(),p("linkAnnotation")},S=function(){I()},A=function(t){y(t)},k=function(){x()},W=function(t){d.externalWindow?d.externalWindow.addSubscriberVideo(t):console.log("OT Annotation: External window does not exist. Cannot add subscriber video.")},X=function(){C(),d.canvas=null,d.externalWindow&&(d.externalWindow.close(),d.externalWindow=null,d.resizeSubject=null),p("endAnnotation"),u(l.actionEnd,l.variationSuccess)},Y=function(){e(toolbar.parent).hide()},L=function(){e(toolbar.parent).show()},j=function(e){if(o=this,o.options=t.omit(e,"accPack","session"),i=t.property("accPack")(e),a=t.property("session")(e),!a)throw new Error("OpenTok Annotation Accelerator Pack requires an OpenTok session");m(),h(),u(l.actionInitialize,l.variationSuccess)};j.prototype={constructor:j,start:O,linkCanvas:P,resizeCanvas:S,addSubscriberToExternalWindow:W,end:X,hideToolbar:Y,showToolbar:L,changeColorByIndex:A,takeScreenShot:k},"object"==typeof exports?module.exports=j:"function"==typeof define&&define.amd?define(function(){return j}):this.AnnotationAccPack=j}.call(this);
+(function(){var t,e,n,o={clientVersion:"js-vsol-1.1.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionStartDrawing:"StartDrawing",actionEndDrawing:"EndDrawing",variationSuccess:"Success"},i=function(){var i=window.location.href,a={clientVersion:o.clientVersion,source:i,componentId:o.componentId,name:o.name};e=new t(a);var s={sessionId:n.id,connectionId:n.connection.connectionId,partnerId:n.apiKey};e.addSessionInfo(s)},a=function(t,n){var o={action:t,variation:n};e.logEvent(o)},s="https://assets.tokbox.com/solutions/images/";OTSolution=this.OTSolution||{},OTSolution.Annotations=function(r){function c(t){var e={},n={get X(){if(C&&E)return t.canvasWidth/p.width;var e=C?p.width:f.videoFeed.stream.videoDimensions.width;return e/p.width},get Y(){if(C&&E)return t.canvasHeight/p.height;var e=C?p.height:f.videoFeed.stream.videoDimensions.height;return e/p.height}};return Object.keys(t).forEach(function(n){e[n]=t[n]}),["X","Y"].forEach(function(t){["to","from","last","m","start","point"].forEach(function(o){var i=o+t;e["_"+i]=e[i],Object.defineProperty(e,i,{get:function(){return e["_"+i]/n[t]},set:function(t){e["_"+i]=t}})})}),e}function d(t,e,n){for(var o=e.split(" "),i=0,a=o.length;i<a;i++)t.addEventListener(o[i],n,!0)}function l(t,e){0===p.width&&(p.width=f.parent.getBoundingClientRect().width),0===p.height&&(p.height=f.parent.getBoundingClientRect().height);var n=e?t.canvas.offsetLeft:p.offsetLeft,i=e?t.canvas.offsetTop:p.offsetTop;if(C)var s=e?t.canvas.width:f.parent.clientWidth,r=e?t.canvas.height:f.parent.clientHeight,d=p.width/s,l=p.height/r,h=t.offsetX||t.pageX-n||t.changedTouches&&t.changedTouches[0].pageX-n,u=t.offsetY||t.pageY-i||t.changedTouches&&t.changedTouches[0].pageY-i,m=h*d,g=u*l;else{var b=f.videoFeed.stream.videoDimensions,d=b.width/p.width,l=b.height/p.height;E&&(d=1,l=1);var h=t.offsetX||t.pageX-n||t.changedTouches&&t.changedTouches[0].pageX-n,u=t.offsetY||t.pageY-i||t.changedTouches&&t.changedTouches[0].pageY-i,m=h*d,g=u*l}var w,I=e?t.selectedItem:f.selectedItem;if(I)if("OT_pen"===I.id)switch(t.type){case"mousedown":case"touchstart":O.dragging=!0,O.lastX=m,O.lastY=g,f.isStartPoint=!0,!e&&a(o.actionStartDrawing,o.variationSuccess);break;case"mousemove":case"touchmove":O.dragging&&(w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:m,toY:g,color:e?t.userColor:f.userColor,lineWidth:f.lineWidth,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,startPoint:f.isStartPoint,endPoint:!1,selectedItem:I,platform:"web",guid:t.guid},z(new c(w),!0),O.lastX=m,O.lastY=g,!e&&G(w),f.isStartPoint=!1);break;case"mouseup":case"touchend":O.dragging=!1,w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:m,toY:g,color:e?t.userColor:f.userColor,lineWidth:f.lineWidth,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,startPoint:f.isStartPoint,endPoint:!0,selectedItem:I,platform:"web",guid:t.guid},z(new c(w),!0),O.lastX=m,O.lastY=g,!e&&G(w),f.isStartPoint=!1,!e&&a(o.actionEndDrawing,o.variationSuccess);break;case"mouseout":O.dragging=!1}else if("OT_text"===I.id)w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:m,fromY:g+t.inputHeight,color:t.userColor,font:t.font,text:t.text,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,selectedItem:I,platform:"web",guid:t.guid},z(new c(w)),!e&&G(w);else{var x=2;if(I&&I.points)switch(O.mX=m,O.mY=g,t.type){case"mousedown":case"touchstart":O.isDrawing=!0,O.dragging=!0,O.startX=m,O.startY=g;break;case"mousemove":case"touchmove":O.dragging&&(w={color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,selectedItem:I},z(new c(w),!0));break;case"mouseup":case"touchend":O.isDrawing=!1;var T=I.points;if(2===T.length)w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._startX,fromY:O._startY,toX:O._mX,toY:O._mY,color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,smoothed:!1,startPoint:!0,selectedItem:I,platform:"web",guid:t.guid},y.push(new c(w)),!e&&G(w);else{for(var _=D(T),P=0;P<T.length;P++){var S=!1,A=!1,W=O._startX+_.x*T[P][0],k=O._startY+_.y*T[P][1];0===P?(O.lastX=W,O.lastY=k,S=!0):P===T.length-1&&(A=!0),w={id:M?f.videoFeed.stream.connection.connectionId:f.session.connection.connectionId,fromId:f.session.connection.connectionId,fromX:O._lastX,fromY:O._lastY,toX:W,toY:k,color:e?t.userColor:f.userColor,lineWidth:e?t.lineWidth:x,videoWidth:M?f.videoFeed.videoElement().clientWidth:p.width,videoHeight:M?f.videoFeed.videoElement().clientHeight:p.height,canvasWidth:p.width,canvasHeight:p.height,mirrored:v,smoothed:I.enableSmoothing,startPoint:S,endPoint:A,selectedItem:I,platform:"web",guid:t.guid},y.push(new c(w)),!e&&G(w),O.lastX=W,O.lastY=k}z(null)}O.dragging=!1}}}function h(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0,n="x"==t?e:3&e|8;return n.toString(16)})}r=r||{},this.widgetVersion="js-1.0.0-beta",this.parent=r.container,this.videoFeed=r.feed,this.imageAssets=r.imageAssets||s,t=t||r.OTKAnalytics,e||i(),"object"==typeof module&&"object"==typeof module.exports&&($=require("jquery"));var u=r.externalWindow?r.externalWindow.document:window.document,f=this;if(this.parent){var p=document.createElement("canvas");p.setAttribute("id","opentok_canvas"),p.style.position="absolute",this.parent.appendChild(p),p.setAttribute("width",this.parent.clientWidth+"px"),p.style.width=window.getComputedStyle(this.parent).width,p.setAttribute("height",this.parent.clientHeight+"px"),p.style.height=window.getComputedStyle(this.parent).height}var m,g,v,b,f=this,w=[],I=[],y=[],x=[],T=[],_=[],M=!(!f.videoFeed||!f.videoFeed.element),C=!f.videoFeed.stream,E=!1,O=new c({dragging:!1});M?(g=(" "+f.videoFeed.element.className+" ").indexOf(" OT_publisher ")>-1,v=!!g&&(" "+f.videoFeed.element.className+" ").indexOf(" OT_mirrored ")>-1,b=(" "+f.videoFeed.element.className+" ").indexOf(" OT_fit-mode-cover ")>-1):(v=!1,b=!1),this.canvas=function(){return p},this.link=function(t){this.session=t},this.changeColor=function(t){f.userColor=t,f.lineWidth||(f.lineWidth=2)},this.changeColorByIndex=function(t){f.userColor=this.colors[t];var e=u.querySelectorAll(".color-choice");e[t].classList.add("active");var n=u.getElementById("OT_colors");n.setAttribute("class","OT_color annotation-btn colors"),n.style.borderRadius="50%",n.style.backgroundColor=this.colors[t]},this.changeLineWidth=function(t){this.lineWidth=t},this.selectItem=function(t){f.overlay&&(f.parent.removeChild(f.overlay),f.overlay=null);var e=function(){var e=u.getElementById(f.selectedItem.id),n=u.getElementById("OT_shapes"),o=n.classList.contains("selected");o?n.classList.remove("selected"):e.classList.remove("selected");var i=u.getElementById(t.id);i.parentElement.classList.contains("shapes")?n.classList.add("selected"):i.classList.add("selected")};t&&"OT_capture"===t.id?f.captureScreenshot():t&&t.id.indexOf("OT_line_width")!==-1?t.size&&f.changeLineWidth(t.size):"OT_undo"!==t.id&&"OT_clear"!==t.id&&(e(),f.selectedItem=t)},this.colors=function(t){this.colors=t,this.changeColor(t[0])},this.clear=function(){V(!1,f.session.connection.connectionId),f.session&&f.session.signal({type:"otAnnotation_clear"})},this.undo=function(){J(!1,f.session.connection.connectionId)},this.captureScreenshot=function(t){var e=document.createElement("canvas");e.width=p.width,e.height=p.height;var n=M?f.videoFeed.videoWidth():p.width,o=M?f.videoFeed.videoHeight():p.height,i=1,a=0,s=0;b?(n<o?(i=p.width/n,n=p.width,o*=i):(i=p.height/o,o=p.height,n*=i),a=(n-p.width)/2,s=(o-p.height)/2):n>o?(i=p.width/n,n=p.width,o*=i,a=0,s=(p.height-o)/2):(i=p.height/o,o=p.height,n*=i,a=(p.width-n)/2,s=0);var c=new Image;if(c.onload=function(){var i=e.getContext("2d");v&&(i.translate(n,0),i.scale(-1,1)),i.drawImage(c,a,s,n,o),v&&(i.translate(n,0),i.scale(-1,1)),i.drawImage(p,0,0),w.forEach(function(n){var o={src:e.toDataURL(),isAnnotationEnd:t};n.call(f,o)}),e=null},M)imgData="data:image/png;base64,"+f.videoFeed.getImgData(),c.src=imgData;else{var d=r.externalWindow?r.externalWindow:window;c.src=d.getComputedStyle(f.parent)["background-image"].replace(/url\("|"\)/g,"")}},this.onScreenCapture=function(t){w.push(t)},this.onMobileScreenShare=function(t){E=t},this.onResize=function(){q(T,!0),z(null,!0)},this.onClearAnnotation=function(){H()},d(p,"mousedown mousemove mouseup mouseout touchstart touchmove touchend",function(t){var e=f.selectedItem&&"OT_text"===f.selectedItem.id,n="mousemove"===t.type&&!O.dragging;e||n||(t.preventDefault(),t.selectedItem=f.selectedItem,t.selectedItem&&(t.canvas={width:p.width,height:p.height,offsetLeft:p.offsetLeft,offsetTop:p.offsetTop},t.userColor=f.userColor,t.lineWidth=f.lineWidth,t.guid=h(),_.push(t)),l(t))});var P,S="textAnnotation",A="commitTextPop",W="confirm-btn",k="dismiss-btn",X=!1,Y=function(t){t.preventDefault(),f.selectedItem&&"OT_text"===f.selectedItem.id&&!X&&(X=!0,t.selectedItem=f.selectedItem,j(t))},L=function(){var t=u.getElementById(S);t.clientHeight;return t.value?(P.text=t.value,P.font="16px Arial",P.userColor=f.userColor,P.canvas={width:p.width,height:p.height,offsetLeft:p.offsetLeft,offsetTop:p.offsetTop},_.push(P),l(P),H(),void(X=!1)):void(P=null)},j=function(t){var e=u.createElement("input");e.setAttribute("type","text"),e.style.position="fixed",e.style.top=t.clientY+"px",e.style.left=t.clientX+"px",e.style.background="rgba(255,255,255, .5)",e.style.width="100px",e.style.maxWidth="200px",e.style.border="1px dashed red",e.style.fontSize="16px",e.style.color=f.userColor,e.style.fontFamily="Arial",e.style.zIndex="1001",e.setAttribute("data-canvas-origin",JSON.stringify({x:t.offsetX,y:t.offsetY})),e.setAttribute("data-top",t.clientY-50),e.id=S,u.body.appendChild(e),e.focus(),e.addEventListener("keydown",function(t){13===t.which&&F(e)}),e.addEventListener("blur",function(){F(e)}),P=t,P.inputHeight=e.clientHeight,X=!0},F=function(t){if(!u.getElementById(A)){var e=u.createElement("div");e.style.position="fixed",e.style.top=t.dataset.top+"px",e.style.left=t.style.left,e.style.width="200px",e.style.fontSize="16px",e.style.fontFamily="Arial",e.style.zIndex="2000",e.style.border="1px solid grey",e.style.height="40px",e.className="ots-annotation-prompt",e.id=A;var n=u.createElement("span"),o=u.createTextNode("Commit type?");n.appendChild(o),e.append(n);var i=u.createElement("div");i.id=W,i.className=W;var a=u.createElement("div");a.id=k,a.className=k,e.appendChild(i),e.appendChild(a),u.body.appendChild(e),a.addEventListener("click",H),i.addEventListener("click",function(){L()})}},H=function(){u.getElementById(S)&&u.getElementById(S).remove(),u.getElementById(A)&&u.getElementById(A).remove(),P=null,X=!1};d(p,"click",Y);var z=function(t,e){if(m||(m=p.getContext("2d"),m.lineCap="round",m.lineJoin="round",m.fillStyle="solid"),m.clearRect(0,0,p.width,p.height),y.forEach(function(t){m.strokeStyle=t.color,m.lineWidth=t.lineWidth,t.smoothed=!!t.smoothed,t.startPoint=!!t.startPoint;var e=!1,n=t.hasOwnProperty("text");n?(m.font=t.font,m.fillStyle=t.color,m.fillText(t.text,t.fromX,t.fromY)):t.smoothed?(t.startPoint?f.isStartPoint=!0:f.isStartPoint&&(e=!0,f.isStartPoint=!1),t.startPoint?(m.closePath(),m.beginPath()):e?m.moveTo((t.fromX+t.toX)/2,(t.fromY+t.toY)/2):(m.quadraticCurveTo(t.fromX,t.fromY,(t.fromX+t.toX)/2,(t.fromY+t.toY)/2),m.stroke())):(m.beginPath(),m.moveTo(t.fromX,t.fromY),m.lineTo(t.toX,t.toY),m.stroke(),m.closePath())}),!e||t){var n=e?t.selectedItem:f.selectedItem;!n||"Pen"!==n.title&&"Text"!==n.title?O.isDrawing&&(t&&(m.strokeStyle=t.color,m.lineWidth=t.lineWidth),n&&n.points&&B(m,f.selectedItem.points)):t&&("Pen"===n.title&&(m.strokeStyle=t.color,m.lineWidth=t.lineWidth,m.beginPath(),m.moveTo(t.fromX,t.fromY),m.lineTo(t.toX,t.toY),m.stroke(),m.closePath()),"Text"===n.title&&(m.font=t.font,m.fillStyle=t.color,m.fillText(t.text,t.fromX,t.fromY)),y.push(t))}},B=function(t,e){var n=D(e);if(t.beginPath(),2===e.length)t.moveTo(O.startX,O.startY),t.lineTo(O.mX,O.mY);else for(var o=0;o<e.length;o++)O.pointX=O._startX+n.x*e[o][0],O.pointY=O._startY+n.y*e[o][1],f.selectedItem.enableSmoothing?0===o||(1===o?(t.moveTo((O.pointX+O.lastX)/2,(O.pointY+O.lastY)/2),O.lastX=(O._pointX+O._lastX)/2,O.lastX=(O._pointY+O._lastY)/2):(t.quadraticCurveTo(O.lastX,O.lastY,(O.pointX+O.lastX)/2,(O.pointY+O.lastY)/2),O.lastX=(O._pointX+O._lastX)/2,O.lastY=(O._pointY+O._lastY)/2)):0===o?t.moveTo(O.pointX,O.pointY):t.lineTo(O.pointX,O.pointY),O.lastX=O._pointX,O.lastY=O._pointY;t.stroke(),t.closePath()},D=function(t){for(var e=Number.MAX_VALUE,n=Number.MAX_VALUE,o=0,i=0,a=0;a<t.length;a++)t[a][0]<e?e=t[a][0]:t[a][0]>o&&(o=t[a][0]),t[a][1]<n?n=t[a][1]:t[a][1]>i&&(i=t[a][1]);var s=Math.abs(o-e),r=Math.abs(i-n),c=(O._mX-O._startX)/s,d=(O._mY-O._startY)/r;return{x:c,y:d}},N=function(t,e,n){var o=({width:t.canvasWidth,height:t.canvasHeight},{width:t.videoWidth,height:t.videoHeight},{width:M?f.videoFeed.videoElement().clientWidth:p.width,height:M?f.videoFeed.videoElement().clientHeight:p.height});t.mirrored=!!t.mirrored,t.mirrored&&(t.fromX=o.width-t.fromX,t.toX=o.width-t.toX),v&&(t.fromX=o.width-t.fromX,t.toX=o.width-t.toX);var i=JSON.parse(JSON.stringify(t));i.canvasWidth=p.width,i.canvasHeight=p.height,i.videoWidth=o.width,i.videoHeight=o.height,e?T[n]=i:(T.push(i),y.push(new c(t))),z(null)},q=function(t,e){t.forEach(function(t,n){(!M||f.videoFeed&&f.videoFeed.stream&&t.id===f.videoFeed.stream.connection.connectionId)&&N(t,e,n)})},V=function(t,e){y=y.filter(function(t){return t.fromId!==e}),t?T=[]:(f.session&&f.session.signal({type:"otAnnotation_clear"}),_=[]),z()},J=function(t,e,n){for(var o,i,a=!1,s=[],r=y.length-1;r>=0;r--)if(o=y[r],o.fromId===e){if("ios"===o.platform&&n&&n.length&&null!==n[0]){R(t,e,n);break}if(a=a||o.endPoint,i=y.splice(r,1)[0],s.push(i.guid),!a||a&&i.startPoint===!0)break}t?T=T.filter(function(t){return!n.includes(t.guid)}):(_=_.filter(function(t){return!s.includes(t.guid)}),f.session.signal({type:"otAnnotation_undo",data:JSON.stringify(s)})),z()},R=function(t,e,n){for(var o,i,a=[],s=y.length-1;s>=0;s--)o=y[s],o.fromId===e&&o.guid===n[0]&&(i=y.splice(s,1)[0],a.push(i.guid));t?T=T.filter(function(t){return!n.includes(t.guid)}):(_=_.filter(function(t){return!a.includes(t.guid)}),f.session.signal({type:"otAnnotation_undo",data:JSON.stringify(a)})),z()};n&&n.on({"signal:otAnnotation_pen":function(t){if(t.from.connectionId!==n.connection.connectionId){var e=JSON.parse(t.data);q(e)}},"signal:otAnnotation_text":function(t){t.from.connectionId!==n.connection.connectionId&&q(JSON.parse(t.data))},"signal:otAnnotation_history":function(t){x&&x!==t.from.connectionId||(x=t.from.connectionId,q(JSON.parse(t.data)))},"signal:otAnnotation_clear":function(t){t.from.connectionId!==n.connection.connectionId&&V(!0,t.from.connectionId)},"signal:otAnnotation_undo":function(t){t.from.connectionId!==n.connection.connectionId&&J(!0,t.from.connectionId,JSON.parse(t.data))},connectionCreated:function(t){y.length>0&&t.connection.connectionId!==n.connection.connectionId&&U("otWhiteboard_history",y,t.connection)}});var K,U=function(t,e){for(var n,o=function(t){t&&TB.error(t)},i="otAnnotation_pen",a=function(t){if(t&&t[0]&&t[0].selectedItem&&t[0].selectedItem.id){var e=t[0].selectedItem.id;i="OT_text"===e?"otAnnotation_text":"otAnnotation_pen"}},s=0,r=7;s<t.length;){n=t.slice(s,s+r),a(n),s+=r;var c={type:i,data:JSON.stringify(n)};e&&(c.to=e),f.session.signal(c,o)}},G=function(t){f.session&&(I.push(t),K||(K=setTimeout(function(){U(I),I=[],K=null},100)))}},OTSolution.Annotations.Toolbar=function(o){var a=this,r=this;if(o||(o={}),!o.session)throw new Error("OpenTok Annotation Widget requires an OpenTok session");if(n=o.session,!t&&!o.OTKAnalytics)throw new Error("OpenTok Annotation Widget requires an OpenTok Solution");t=t||o.OTKAnalytics,e||i(),this.session=o.session,this.parent=o.container,this.externalWindow=o.externalWindow,this.backgroundColor=o.backgroundColor||"rgba(102, 102, 102, 0.90)",this.subpanelBackgroundColor=o.subpanelBackgroundColor||"#323232";var c=o.imageAssets||s,d=[{id:"OT_pen",title:"Pen",icon:[c,"annotation-pencil.png"].join(""),selectedIcon:[c,"annotation-pencil.png"].join(""),items:{}},{id:"OT_colors",title:"Colors",icon:"",items:{}},{id:"OT_shapes",title:"Shapes",icon:[c,"annotation-shapes.png"].join(""),items:[{id:"OT_rect",title:"Rectangle",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_rect_fill",title:"Rectangle-Fill",icon:[c,"annotation-rectangle.png"].join(""),points:[[0,0],[1,0],[1,1],[0,1],[0,0]]},{id:"OT_oval",title:"Oval",icon:[c,"annotation-oval.png"].join(""),enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]},{id:"OT_oval_fill",title:"Oval-Fill",icon:[c,"annotation-oval-fill.png"].join(""),enableSmoothing:!0,points:[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]},{id:"OT_star",title:"Star",icon:[c,"annotation-star.png"].join(""),points:[[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))],[.5+.25*Math.cos(126*(Math.PI/180)),.5+.25*Math.sin(126*(Math.PI/180))],[.5+.5*Math.cos(162*(Math.PI/180)),.5+.5*Math.sin(162*(Math.PI/180))],[.5+.25*Math.cos(198*(Math.PI/180)),.5+.25*Math.sin(198*(Math.PI/180))],[.5+.5*Math.cos(234*(Math.PI/180)),.5+.5*Math.sin(234*(Math.PI/180))],[.5+.25*Math.cos(270*(Math.PI/180)),.5+.25*Math.sin(270*(Math.PI/180))],[.5+.5*Math.cos(306*(Math.PI/180)),.5+.5*Math.sin(306*(Math.PI/180))],[.5+.25*Math.cos(342*(Math.PI/180)),.5+.25*Math.sin(342*(Math.PI/180))],[.5+.5*Math.cos(18*(Math.PI/180)),.5+.5*Math.sin(18*(Math.PI/180))],[.5+.25*Math.cos(54*(Math.PI/180)),.5+.25*Math.sin(54*(Math.PI/180))],[.5+.5*Math.cos(90*(Math.PI/180)),.5+.5*Math.sin(90*(Math.PI/180))]]},{id:"OT_arrow",title:"Arrow",icon:[c,"annotation-arrow.png"].join(""),points:[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]},{id:"OT_line",title:"Line",icon:[c,"annotation-line.png"].join(""),selectedIcon:[c,"annotation-line.png"].join(""),points:[[0,0],[0,1]]}]},{id:"OT_text",title:"Text",icon:[c,"annotation-text.png"].join(""),selectedIcon:[c,"annotation-text.png"].join("")},{id:"OT_capture",title:"Capture",icon:[c,"annotation-camera.png"].join(""),selectedIcon:[c,"annotation-camera.png"].join("")},{id:"OT_undo",title:"Undo",icon:[c,"annotation-undo.png"].join("")},{id:"OT_clear",title:"Clear",icon:[c,"annotation-clear.png"].join("")}],l=function(){var t=["pen","colors","shapes","text","capture","undo","clear"],e=["rectangle","rectangle-fill","oval","oval-fill","star","arrow","line"],n=function(n,i){var a=t.indexOf(i);if(a!==-1){var s=d[a];if("Shapes"===s.title&&o.shapes){var r=o.shapes.reduce(function(t,n){var o=e.indexOf(n);return o!==-1?t.concat(s.items[o]):t},[]);s.items=r}n.push(s)}return n};if(o.items&&o.items.length){var i="*"===o.items[0]?t:o.items;return i.reduce(n,[])}return d};this.items=l(),this.colors=o.colors||["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#ecf0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],this.cbs=[];var h,u=[],f=function(t,e,n){var o=this,i=r.externalWindow?r.externalWindow.document:document;this.getElm=function(t,e){return"string"==typeof t?e?i.querySelectorAll(t):i.querySelector(t):t},this.render=function(){var t=this,e="";t.colors.forEach(function(n){e+=t.options.template.replace(/\{color\}/g,n)}),t.elm.innerHTML=e},this.close=function(){this.elm.classList.add("ots-hidden")},this.open=function(){this.elm.classList.remove("ots-hidden")},this.colorChosen=function(t){this.cbs.push(t)},this.set=function(t,e){var n=this;n.color=t,e!==!1&&n.cbs.forEach(function(e){e.call(n,t)})},n=n||{},n.openEvent=n.openEvent||"click",n.style=Object(n.style),n.template=n.template||'<div class="color-choice" data-col="{color}" style="background-color: {color}"></div>',o.elm=o.getElm(t),o.cbs=[],o.colors=e,o.options=n,o.render(),o.elm.addEventListener("click",function(t){var e=t.target.getAttribute("data-col");if(e){var n=Array.from(o.getElm(".color-choice",!0));n.forEach(function(t){t.classList.remove("active")}),t.target.classList.add("active"),o.set(e),o.close()}}),n.autoclose!==!1&&o.close()};this.createPanel=function(t){if(r.parent){var e=t?t.document:document;h=e.createElement("div"),h.setAttribute("id","OT_toolbar"),h.setAttribute("class","OT_panel"),h.style.width="100%",h.style.height="100%",this.parent.appendChild(h),this.parent.style.position="relative",this.parent.zIndex=1e3;for(var n=[],o=e.createElement("div"),i=0,s=this.items.length;i<s;i++){var c=this.items[i],d=e.createElement("input");if(d.setAttribute("type","button"),d.setAttribute("id",c.id),d.classList.add("annotation-btn"),d.classList.add(c.title.split(" ").join("-").toLowerCase()),"OT_colors"===c.id){var l=e.createElement("div");l.setAttribute("class","color-picker"),this.parent.appendChild(l);var m=new f(".color-picker",this.colors,{externalWindow:r.externalWindow});m.colorChosen(function(t){var n=e.getElementById("OT_colors");n.style.backgroundColor=t,u.forEach(function(e){e.changeColor(t)})});var g=e.querySelectorAll(".color-choice");g[0].classList.add("active"),d.setAttribute("class","OT_color annotation-btn colors"),d.style.borderRadius="50%",d.style.backgroundColor=this.colors[0]}"Pen"!==c.title||Array.isArray(c.items)||(c.items=[{id:"OT_line_width_2",title:"Line Width 2",size:2},{id:"OT_line_width_4",title:"Line Width 4",size:4},{id:"OT_line_width_6",title:"Line Width 6",size:6},{id:"OT_line_width_8",title:"Line Width 8",size:8},{id:"OT_line_width_10",title:"Line Width 10",size:10},{id:"OT_line_width_12",title:"Line Width 12",size:12},{id:"OT_line_width_14",title:"Line Width 14",size:14}]),c.items&&d.setAttribute("data-type","group"),d.setAttribute("data-col",c.title),n.push(d.outerHTML)}h.innerHTML=n.join("");var v=function(t){var e=t?"add":"remove";document.getElementById("OT_toolbar").classList[e]("colors-hover")},b=e.getElementById("OT_colors");b.addEventListener("mouseenter",function(){v(!0)}),b.addEventListener("mouseleave",function(){v(!1)}),h.onclick=function(t){var n="group"===t.target.getAttribute("data-type"),i=t.target.getAttribute("data-col"),s=t.target.getAttribute("id");n?a.items.forEach(function(t){if(t.title===i){if(a.selectedGroup=t,t.items&&(o.setAttribute("class",["OT_subpanel","ots-hidden",t.title.toLowerCase()].join(" ")),a.parent.appendChild(o),Array.isArray(t.items))){var n=[];"OT_pen"===t.id?t.items.forEach(function(t){var o=e.createElement("div");o.setAttribute("data-col",t.title),o.setAttribute("class",["line-width-option",t.size].join(" ")),o.setAttribute("id",t.id);var i=e.createElement("div");i.setAttribute("class","line-width-icon"),i.style.backgroundColor="#FFFFFF",i.style.width="80%",i.style.height=t.size+"px",i.style.position="relative",i.style.left="50%",i.style.top="50%",i.style.transform="translateX(-50%) translateY(-50%)",i.style.pointerEvents="none",o.appendChild(i),n.push(o.outerHTML)}):t.items.forEach(function(t){var o=e.createElement("input");o.setAttribute("type","button"),o.setAttribute("data-col",t.title),o.setAttribute("id",t.id),o.setAttribute("class",["annotation-btn",t.title.toLowerCase()].join(" ")),n.push(o.outerHTML)}),o.innerHTML=n.join("")}"OT_shapes"===s||"OT_pen"===s?(o&&o.classList.remove("ots-hidden"),m.close()):"OT_colors"===s&&(o&&o.classList.add("ots-hidden"),m.open())}}):(a.items.forEach(function(t){if(("Clear"!==t.title||"Undo"!==t.title)&&t.title===i)return a.selectedItem=t,p(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}),o.classList.add("ots-hidden")),a.cbs.forEach(function(t){t.call(a,s)})},o.onclick=function(t){var e="group"===t.target.getAttribute("data-type"),n=(t.target.getAttribute("data-col"),t.target.getAttribute("id"));n&&"linewidth"===n.replace(/[^a-z]/g,"")&&u.forEach(function(t){t.selectItem(a.selectedGroup)}),o.classList.add("ots-hidden"),e||a.selectedGroup.items.forEach(function(t){if("OT_clear"!==t.id&&t.id===n){if(a.selectedItem)var e=document.getElementById(a.selectedItem.id);if(t.selectedIcon){var o=document.getElementById(t.id);e&&(o.style.background='url("'+t.selectedIcon+'") no-repeat',o.style.backgroundSize=a.iconWidth+" "+a.iconHeight,o.style.backgroundPosition="center")}return a.selectedItem=t,p(t),u.forEach(function(t){t.selectItem(a.selectedItem)}),!1}}),a.cbs.forEach(function(t){t.call(a,n)})};var w=e.getElementById("OT_clear").onclick=function(){u.forEach(function(t){t.clear()})};e.getElementById("OT_undo").onclick=function(){u.forEach(function(t){t.undo()})},window.addEventListener("OT_clear",function(){w(),a.selectedItem=null,u.forEach(function(t){t.selectItem(a.selectedItem)})}),window.addEventListener("OT_pen",function(t){var e=a.items.find(function(t){return"OT_pen"===t.id});a.selectedItem=e,p(e);var n=t.detail.color;u.forEach(function(t){t.selectItem(a.selectedItem),n&&t.changeColor(n)})})}},!this.externalWindow&&this.createPanel();var p=function(t){t.points||("OT_line"===t.id?a.selectedItem.points=[[0,0],[0,1]]:"OT_arrow"===t.id?a.selectedItem.points=[[0,1],[3,1],[3,0],[5,2],[3,4],[3,3],[0,3],[0,1]]:"OT_rect"===t.id?a.selectedItem.points=[[0,0],[1,0],[1,1],[0,1],[0,0]]:"OT_oval"===t.id&&(a.selectedItem.enableSmoothing=!0,a.selectedItem.points=[[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)],[.5,0],[.5+.5*Math.cos(7*Math.PI/4),.5+.5*Math.sin(7*Math.PI/4)],[1,.5],[.5+.5*Math.cos(Math.PI/4),.5+.5*Math.sin(Math.PI/4)],[.5,1],[.5+.5*Math.cos(3*Math.PI/4),.5+.5*Math.sin(3*Math.PI/4)],[0,.5],[.5+.5*Math.cos(5*Math.PI/4),.5+.5*Math.sin(5*Math.PI/4)]]))};this.itemClicked=function(t){this.cbs.push(t)},this.addCanvas=function(t,e){var n=this,o=e?e.document:document;t.link(n.session),t.colors(n.colors),u.push(t),u.forEach(function(t){t.selectedItem=t.selectedItem||n.items[0],o.getElementById(t.selectedItem.id).classList.add("selected")})},this.removeCanvas=function(t){u.forEach(function(e){var n=e.canvas();e.videoFeed.stream.connection.connectionId===t&&n.parentNode&&n.parentNode.removeChild(n)}),u=u.filter(function(e){return e.videoFeed.stream.connection.connectionId!==t})},this.remove=function(){try{h.parentNode.removeChild(h)}catch(t){console.log(t)}u.forEach(function(t){var e=t.canvas();e.parentNode&&e.parentNode.removeChild(e)}),u=[]}}}).call(this),function(){var t,e,n;"object"==typeof module&&"object"==typeof module.exports?(t=require("underscore"),e=require("jquery"),n=require("opentok-solutions-logging")):(t=this._,e=this.$,n=this.OTKAnalytics);var o,i,a,s,r,c,d={},l={clientVersion:"js-vsol-1.1.0",componentId:"annotationsAccPack",name:"guidAnnotationsKit",actionInitialize:"Init",actionStart:"Start",actionEnd:"End",actionFreeHand:"FreeHand",actionPickerColor:"PickerColor",actionText:"Text",actionScreenCapture:"ScreenCapture",actionErase:"Erase",actionUseToolbar:"UseToolbar",variationAttempt:"Attempt",variationError:"Failure",variationSuccess:"Success"},h=function(){var t=window.location.href,e={clientVersion:l.clientVersion,source:t,componentId:l.componentId,name:l.name};c=new n(e);var o={sessionId:a.id,connectionId:a.connection.connectionId,partnerId:a.apiKey};c.addSessionInfo(o)},u=function(t,e){var n={action:t,variation:e};c.logEvent(n)},f=function(t){return"string"==typeof t?document.querySelector(t):t},p=function(t,e){i&&i.triggerEvent(t,e)},m=function(){if(i){var t=["startAnnotation","linkAnnotation","resizeCanvas","annotationWindowClosed","endAnnotation"];i.registerEvents(t)}},g=function(){var t=['<div id="annotationToolbarContainer" class="ots-annotation-toolbar-container">','<div id="toolbar"></div>',"</div>"].join("\n");e("body").append(t),u(l.actionUseToolbar,l.variationSuccess)},v=["#1abc9c","#2ecc71","#3498db","#9b59b6","#8e44ad","#f1c40f","#e67e22","#e74c3c","#ded5d5"],b=10/6,w=t.throttle(function(){s.onResize()},1e3),I=function(){var t,n,o=!!d.cobrowsingImage;if(!o){if(null===d.cobrowsingImage){var i=d.absoluteParent||d.canvasContainer;t=i.clientWidth,n=i.clientHeight}try{var a=s.videoFeed.stream.videoDimensions}catch(c){return void console.log("OT Annotation: Annotation video stream no longer exists")}r&&(a.width=t,a.height=n);var l=a.width/a.height,h=t/n,u={top:0,left:0,height:n,width:t};d.externalWindow||(l<h?(u.width=u.height*l,u.left=(t-u.width)/2):(u.height=u.width/l,u.top=(n-u.height)/2)),e(d.canvasContainer).find("canvas").css(u),e(d.canvasContainer).find("canvas").attr(u),w(),p("resizeCanvas")}},y=function(t){s.changeColorByIndex(t)},x=function(){s.captureScreenshot(!0)},T=function(){e(d.resizeSubject).on("resize",t.throttle(function(){I()},500))},_=function(e,o,i){g();var a=t.property("toolbarId")(o)||"toolbar",s=t.property("toolbarItems")(o)||[],r=t.property("toolbarShapes")(o)||[],c=t.property("colors")(o)||v,d=t.property("imageAssets")(o)||null,h=t.property("backgroundColor")(o)||null,f=function(){var t=i?i:window;return t.document.getElementById(a)};toolbar=new OTSolution.Annotations.Toolbar({session:e,container:f(),colors:c,items:s.length?s:["*"],shapes:r.length?r:["rectangle","oval","star","arrow","line"],externalWindow:i||null,imageAssets:d,backgroundColor:h,OTKAnalytics:n}),toolbar.itemClicked(function(t){var e={OT_pen:l.actionFreeHand,OT_colors:l.actionPickerColor,OT_text:l.actionText,OT_clear:l.actionErase},n=e[t];n&&u(n,l.variationSuccess)})},M=function(){var t=e.Deferred(),n=.8*screen.width|0,o=n/b,i='<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><link rel="stylesheet" href="https://assets.tokbox.com/solutions/css/style.css"><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.ots-hidden{display:none !important}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;display:flex;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="ots-annotation-toolbar-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, subscribeToVideo: "true", subscribeToAudio: "false", fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>',s=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no",["width=",n].join(""),["height=",o].join(""),["left=",screen.width/2-n/2].join(""),["top=",screen.height/2-o/2].join("")].join(","),r=window.open("about:blank","",s);
+r.document.write(i),window.onbeforeunload=function(){r.close()},r.toolbar=toolbar,r.OT=OT,r.session=a,r.$=e,r.triggerCloseEvent=function(){p("annotationWindowClosed")},r.onbeforeunload=function(){p("annotationWindowClosed")};var c=function(){r.createContainerElements?e(r.document).ready(function(){t.resolve(r)}):setTimeout(c,100)};return c(),t.promise()},C=function(){s.onClearAnnotation(),e(d.resizeSubject).off("resize",I),toolbar.remove(),e("#annotationToolbarContainer").remove()},E=function(t,e){t.stream&&(a.signal({type:"otAnnotation_requestPlatform",to:t.stream.connection}),a.on("signal:otAnnotation_mobileScreenShare",function(t){var e=t.data?JSON.parse(t.data).platform:null,n="ios"==e||"android"===e;r=n,s.onMobileScreenShare(n)})),e&&(r=!0,s.onMobileScreenShare(!0))},O=function(n,o){var i=e.Deferred();return t.property("screensharing")(o)?M().then(function(t){_(n,o,t),toolbar.createPanel(t),p("startAnnotation",t),u(l.actionStart,l.variationSuccess),i.resolve(t)}):(_(n,o),p("startAnnotation"),u(l.actionStart,l.variationSuccess),i.resolve()),i.promise()},P=function(n,i,a){d.resizeSubject=f(t.property("externalWindow")(a)||window),d.externalWindow=f(t.property("externalWindow")(a)||null),d.absoluteParent=f(t.property("absoluteParent")(a)||null),d.cobrowsingImage=f(t.property("cobrowsingImage")(a)||null),d.canvasContainer=f(i),s=new OTSolution.Annotations({feed:n,container:d.canvasContainer,externalWindow:d.externalWindow}),toolbar.addCanvas(s,d.externalWindow);var r=o.options.onScreenCapture?o.options.onScreenCapture:function(t){var e=window.open(t,"_blank");e.focus()};s.onScreenCapture(r),E(n,a&&a.mobileInitiator);var c=d.externalWindow?d.externalWindow:window;d.canvas=e(t.first(c.document.getElementsByTagName("canvas"))),T(),I(),p("linkAnnotation")},S=function(){I()},A=function(t){y(t)},W=function(){x()},k=function(t){d.externalWindow?d.externalWindow.addSubscriberVideo(t):console.log("OT Annotation: External window does not exist. Cannot add subscriber video.")},X=function(){C(),d.canvas=null,d.externalWindow&&(d.externalWindow.close(),d.externalWindow=null,d.resizeSubject=null),p("endAnnotation"),u(l.actionEnd,l.variationSuccess)},Y=function(){e(toolbar.parent).hide()},L=function(){e(toolbar.parent).show()},j=function(e){if(o=this,o.options=t.omit(e,"accPack","session"),i=t.property("accPack")(e),a=t.property("session")(e),!a)throw new Error("OpenTok Annotation Accelerator Pack requires an OpenTok session");m(),h(),u(l.actionInitialize,l.variationSuccess)};j.prototype={constructor:j,start:O,linkCanvas:P,resizeCanvas:S,addSubscriberToExternalWindow:k,end:X,hideToolbar:Y,showToolbar:L,changeColorByIndex:A,takeScreenShot:W},"object"==typeof exports?module.exports=j:"function"==typeof define&&define.amd?define(function(){return j}):this.AnnotationAccPack=j}.call(this);

package.json

 {
   "name": "opentok-annotation",
-  "version": "2.0.50",
+  "version": "2.0.51",
   "description": "OpenTok annotation accelerator pack",
@@ -5,0 +5,0 @@ "main": "dist/opentok-annotation.js",

src/acc-pack-annotation.js

@@ -320,18 +320,21 @@ /* global OT OTSolution OTKAnalytics ScreenSharingAccPack define */
   // Determine whether or not the subscriber stream is from a mobile device
-  var _requestPlatformData = function (pubSub) {
-    if (!pubSub.stream) {
-      // Are we cobrowsing?
-      return;
+  var _requestPlatformData = function (pubSub, mobileInitiator) {
+    if (!!pubSub.stream) {
+      _session.signal({
+        type: 'otAnnotation_requestPlatform',
+        to: pubSub.stream.connection,
+      });
+
+      _session.on('signal:otAnnotation_mobileScreenShare', function (event) {
+        var platform = event.data ? JSON.parse(event.data).platform : null;
+        var isMobile = (platform == 'ios' || platform === 'android');
+        _subscribingToMobileScreen = isMobile;
+        _canvas.onMobileScreenShare(isMobile);
+      });
     }
-    _session.signal({
-      type: 'otAnnotation_requestPlatform',
-      to: pubSub.stream.connection,
-    });
 
-    _session.on('signal:otAnnotation_mobileScreenShare', function (event) {
-      var platform = event.data ? JSON.parse(event.data).platform : null;
-      var isMobile = (platform == 'ios' || platform === 'android')
-      _subscribingToMobileScreen = isMobile;
-      _canvas.onMobileScreenShare(isMobile);
-    });
+    if (mobileInitiator) {
+      _subscribingToMobileScreen = true;
+      _canvas.onMobileScreenShare(true);
+    }
   };
@@ -379,2 +382,3 @@
    * @param {array | string} [options.absoluteParent] - Reference to element (or query selector) for resize if other than container
+   * * @param {Boolean} [options.mobileInitiator] - Is cobrowsing being initiated by a mobile device
    */
@@ -411,5 +415,4 @@ var linkCanvas = function (pubSub, container, options) {
     _canvas.onScreenCapture(onScreenCapture);
-    _requestPlatformData(pubSub);
+    _requestPlatformData(pubSub, options && options.mobileInitiator);
 
-
     var context = _elements.externalWindow ? _elements.externalWindow : window;
@@ -416,0 +419,0 @@ // The canvas DOM element

No alert changes

Improved metrics

Total package byte prevSize

419881

increased by0.3%

Lines of code

5612

increased by0.34%

No dependency changes