@impleotv/stanag-player 0.1.6 → 0.1.8

package/dist/cjs/components/StanagPlayer/StanagPlayer.d.ts

@@ -1,16 +1,24 @@
 /// <reference types="react" />
+export interface StreamType {
+    videoWidth: number;
+    videoHeight: number;
+}
 export interface StanagPlayerProps {
     serverUrl?: string;
+    width: number;
+    defaultAspectRatio?: number;
     controls?: boolean;
     autoplay?: boolean;
     iceServers?: string;
-    onDataReceive?(packetTime: string, klvs: JSON): any;
-    onConnected?(isConnected: boolean): any;
-    onError?(error: string): any;
+    onDataReceive?(packetTime: string, klvs: JSON): void;
+    onConnected?(isConnected: boolean): void;
+    onStreamInfo?(streamIfo: StreamType): void;
+    onError?(error: string): void;
 }
 declare const StanagPlayer: {
     (props: StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;

package/dist/cjs/components/StanagPlayer/StanagPlayer.stories.d.ts

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<{
     (props: import("./StanagPlayer").StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;
@@ -12,6 +13,7 @@ export default _default;
 export declare const Player: ComponentStory<{
     (props: import("./StanagPlayer").StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),o=function(n){var o=e.useRef(null),r=e.useRef(!0),c={iceServers:[{urls:n.iceServers}]};e.useEffect((function(){try{a.ontrack=function(e){var t=document.createElement(e.track.kind);t.srcObject=e.streams[0],t.muted=!0,t.autoplay=n.autoplay,t.controls=n.controls,t.addEventListener("pause",(function(e){r.current=!0})),t.addEventListener("play",(function(e){r.current=!1})),o.current.appendChild(t)},a.onconnectionstatechange=function(e){return console.log(a.iceConnectionState)},a.oniceconnectionstatechange=function(e){return console.log(a.iceConnectionState)},a.onicegatheringstatechange=function(e){return console.log(a.iceGatheringState)},a.addTransceiver("video",{direction:"sendrecv"});var e=a.createDataChannel("klv");e.binaryType="arraybuffer",e.onclose=function(){return console.log("dataChannel has closed")},e.onopen=function(){return console.log("dataChannel has opened")},e.onmessage=function(e){if(!r.current){var t=new DataView(e.data),o=new TextDecoder("utf8"),c=JSON.parse(o.decode(t)),a=(c.packetTime,c.klvs);n.onDataReceive&&n.onDataReceive(new Date(a[2]/1e3).toISOString(),a)}};var t=n.serverUrl?n.serverUrl:window.location.origin,c=new URL(t),i="ws";"http:"!=c.protocol&&(i+="s");var s=new WebSocket(i+"://".concat(c.host,"/ws"));s.onmessage=function(e){var n=JSON.parse(e.data);if(!n)return console.log("failed to parse msg");n.candidate?a.addIceCandidate(n):a.setRemoteDescription(n)},s.onerror=function(e){console.log("Websocket Error.")},s.onclose=function(e){n.onConnected&&n.onConnected(!1),1e3!=e.code&&(n.onError&&console.log("Websocket closed: ".concat(e.code)),n.onError("Websocket error: ".concat(e.code)))},a.onicecandidate=function(e){e.candidate&&""!==e.candidate.candidate&&s.send(JSON.stringify(e.candidate))},s.onopen=function(){n.onConnected&&n.onConnected(!0),a.createOffer().then((function(e){a.setLocalDescription(e),s.send(JSON.stringify(e))}))}}catch(e){console.log("Error: ".concat(e.message))}}),[]);var a=new RTCPeerConnection(c);return t.default.createElement("div",null,t.default.createElement("div",{ref:o}))};o.defaultProps={controls:!0,autoplay:!0,iceServers:"stun:stun.l.google.com:19302"};var r=function(e){return t.default.createElement(r,null,e.label)};exports.KlvView=r,exports.StanagPlayer=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e),o=function(t){e.useRef(null);var o=e.useRef(null),r=e.useRef(!0),c=e.useState(16/9),a=c[0],i=c[1],d=e.useState({width:t.width,height:t.width/a}),s=d[0],u=d[1],l=e.useState({width:1920,height:1080}),h=l[0],f=l[1],g={iceServers:[{urls:t.iceServers}]};e.useEffect((function(){try{v.ontrack=function(e){null!=o.current&&(o.current.srcObject=e.streams[0],o.current.muted=!0,o.current.autoplay=t.autoplay,o.current.controls=t.controls,o.current.addEventListener("pause",(function(e){r.current=!0})),o.current.addEventListener("play",(function(e){r.current=!1})),o.current.addEventListener("loadedmetadata",(function(e){var n;f({width:o.current.videoWidth,height:o.current.videoHeight}),null===(n=t.onStreamInfo)||void 0===n||n.call(t,{videoWidth:o.current.videoWidth,videoHeight:o.current.videoHeight})})))},v.onconnectionstatechange=function(e){return console.log(v.iceConnectionState)},v.oniceconnectionstatechange=function(e){return console.log(v.iceConnectionState)},v.onicegatheringstatechange=function(e){return console.log(v.iceGatheringState)},v.addTransceiver("video",{direction:"sendrecv"});var e=v.createDataChannel("klv");e.binaryType="arraybuffer",e.onclose=function(){return console.log("dataChannel has closed")},e.onopen=function(){return console.log("dataChannel has opened")},e.onmessage=function(e){if(!r.current){var n=new DataView(e.data),o=new TextDecoder("utf8"),c=JSON.parse(o.decode(n)),a=(c.packetTime,c.klvs);t.onDataReceive&&t.onDataReceive(new Date(a[2]/1e3).toISOString(),a)}};var n=t.serverUrl?t.serverUrl:window.location.origin,c=new URL(n),a="ws";"http:"!=c.protocol&&(a+="s");var i=new WebSocket(a+"://".concat(c.host,"/ws"));i.onmessage=function(e){var t=JSON.parse(e.data);if(!t)return console.log("failed to parse msg");t.candidate?v.addIceCandidate(t):v.setRemoteDescription(t)},i.onerror=function(e){console.log("Websocket Error.")},i.onclose=function(e){t.onConnected&&t.onConnected(!1),1e3!=e.code&&(t.onError&&console.log("Websocket closed: ".concat(e.code)),t.onError("Websocket error: ".concat(e.code)))},v.onicecandidate=function(e){e.candidate&&""!==e.candidate.candidate&&i.send(JSON.stringify(e.candidate))},i.onopen=function(){t.onConnected&&t.onConnected(!0),v.createOffer().then((function(e){v.setLocalDescription(e),i.send(JSON.stringify(e))}))}}catch(e){console.log("Error: ".concat(e.message))}}),[]),e.useEffect((function(){try{console.log("Video dimensions: ".concat(h.width,"x").concat(h.height));var e=h.width/h.height;i(e),u({width:t.width,height:t.width/e})}catch(e){}}),[h.width,h.height,t.width]);var v=new RTCPeerConnection(g),w={width:s.width,height:s.height};return n.default.createElement("video",{style:w,ref:o})};o.defaultProps={width:360,controls:!0,autoplay:!0,iceServers:"stun:stun.l.google.com:19302"};var r=function(e){return n.default.createElement(r,null,e.label)};exports.KlvView=r,exports.StanagPlayer=o;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/StanagPlayer/StanagPlayer.tsx","../../src/components/KlvView/KlvView.tsx"],"sourcesContent":[null,null],"names":["StanagPlayer","props","videoWindow","useRef","isPaused","configuration","iceServers","urls","useEffect","pc","ontrack","event","el","document","createElement","track","kind","srcObject","streams","muted","autoplay","controls","addEventListener","current","appendChild","onconnectionstatechange","e","console","log","iceConnectionState","oniceconnectionstatechange","onicegatheringstatechange","iceGatheringState","addTransceiver","direction","dataChannel","createDataChannel","binaryType","onclose","onopen","onmessage","dataView","DataView","data","decoder","TextDecoder","_a","JSON","parse","decode","klvs","onDataReceive","Date","toISOString","location_1","serverUrl","window","location","origin","uri","URL","wsProto","protocol","socket_1","WebSocket","concat","host","msg","candidate","addIceCandidate","setRemoteDescription","onerror","onConnected","code","onError","onicecandidate","send","stringify","createOffer","then","offer","setLocalDescription","error","message","RTCPeerConnection","React","ref","defaultProps","KlvView","label"],"mappings":"8KAeMA,EAAe,SAACC,GACpB,IAAMC,EAAcC,SAAO,MACrBC,EAAWD,UAAO,GAElBE,EAAgB,CACpBC,WAAY,CAAC,CAAEC,KAAMN,EAAMK,cAG7BE,EAAAA,WAAU,WAER,IAEEC,EAAGC,QAAU,SAAUC,GACrB,IAAIC,EAAKC,SAASC,cAAcH,EAAMI,MAAMC,MAC5CJ,EAAGK,UAAYN,EAAMO,QAAQ,GAC7BN,EAAGO,OAAQ,EACXP,EAAGQ,SAAWnB,EAAMmB,SACpBR,EAAGS,SAAWpB,EAAMoB,SACpBT,EAAGU,iBAAiB,SAAS,SAACX,GAC5BP,EAASmB,SAAU,CACrB,IACAX,EAAGU,iBAAiB,QAAQ,SAACX,GAC3BP,EAASmB,SAAU,CACrB,IACArB,EAAYqB,QAAQC,YAAYZ,EAClC,EAEAH,EAAGgB,wBAA0B,SAACC,GAAM,OAAAC,QAAQC,IAAInB,EAAGoB,qBACnDpB,EAAGqB,2BAA6B,SAACJ,GAAM,OAAAC,QAAQC,IAAInB,EAAGoB,qBACtDpB,EAAGsB,0BAA4B,SAACL,GAAM,OAAAC,QAAQC,IAAInB,EAAGuB,oBACrDvB,EAAGwB,eAAe,QAAS,CAAEC,UAAW,aAExC,IAAIC,EAAc1B,EAAG2B,kBAAkB,OACvCD,EAAYE,WAAa,cACzBF,EAAYG,QAAU,WAAM,OAAAX,QAAQC,IAAI,2BACxCO,EAAYI,OAAS,WAAM,OAAAZ,QAAQC,IAAI,2BACvCO,EAAYK,UAAY,SAACd,GAEvB,IAAKtB,EAASmB,QAAS,CACrB,IAAIkB,EAAW,IAAIC,SAAShB,EAAEiB,MAC1BC,EAAU,IAAIC,YAAY,QAE1BC,EAAuBC,KAAKC,MAC9BJ,EAAQK,OAAOR,IADCS,wBAIdjD,EAAMkD,eACRlD,EAAMkD,cAAc,IAAIC,KAAKF,EAAK,GAAO,KAAMG,cAAeH,EAEjE,CACH,EAEA,IAAMI,EAAWrD,EAAMsD,UAAYtD,EAAMsD,UAAYC,OAAOC,SAASC,OAE/DC,EAAM,IAAIC,IAAIN,GAEhBO,EAAU,KACM,SAAhBF,EAAIG,WACND,GAAW,KAEb,IAAME,EAAS,IAAIC,UACjBH,EAAU,MAAAI,OAAMN,EAAIO,KAAI,QAG1BH,EAAOvB,UAAY,SAACd,GAClB,IAAIyC,EAAMpB,KAAKC,MAAMtB,EAAEiB,MACvB,IAAKwB,EACH,OAAOxC,QAAQC,IAAI,uBAGjBuC,EAAIC,UACN3D,EAAG4D,gBAAgBF,GAEnB1D,EAAG6D,qBAAqBH,EAE5B,EAEAJ,EAAOQ,QAAU,SAAC7C,GAChBC,QAAQC,IAAI,mBACd,EAEAmC,EAAOzB,QAAU,SAACZ,GACbzB,EAAMuE,aACPvE,EAAMuE,aAAY,GAEP,KAAV9C,EAAE+C,OACAxE,EAAMyE,SACT/C,QAAQC,IAAI,qBAAAqC,OAAqBvC,EAAE+C,OACnCxE,EAAMyE,QAAQ,oBAAAT,OAAoBvC,EAAE+C,OAExC,EAEAhE,EAAGkE,eAAiB,SAACjD,GACfA,EAAE0C,WAAuC,KAA1B1C,EAAE0C,UAAUA,WAC7BL,EAAOa,KAAK7B,KAAK8B,UAAUnD,EAAE0C,WAEjC,EACAL,EAAOxB,OAAS,WACXtC,EAAMuE,aACPvE,EAAMuE,aAAY,GAEpB/D,EAAGqE,cAAcC,MAAK,SAACC,GACrBvE,EAAGwE,oBAAoBD,GACvBjB,EAAOa,KAAK7B,KAAK8B,UAAUG,GAC7B,GACF,CAGD,CAFC,MAAOE,GACPvD,QAAQC,IAAI,UAAAqC,OAAUiB,EAAMC,SAC7B,CAEF,GAAE,IAEH,IAAI1E,EAAK,IAAI2E,kBAAkB/E,GAI/B,OACEgF,EAAA,QAAAvE,cAAA,MAAA,KACEuE,EAAA,QAAAvE,cAAA,MAAA,CAAKwE,IAAKpF,IAGhB,EAGAF,EAAauF,aAAe,CAC1BlE,UAAU,EACVD,UAAU,EACVd,WAAY,gCCvIR,IAAAkF,EAAU,SAACvF,GACf,OAAOoF,EAAAA,sBAACG,EAAO,KAAEvF,EAAMwF,MACzB"}
+{"version":3,"file":"index.js","sources":["../../src/components/StanagPlayer/StanagPlayer.tsx","../../src/components/KlvView/KlvView.tsx"],"sourcesContent":[null,null],"names":["StanagPlayer","props","useRef","videoPlayer","isPaused","_a","useState","aspectRatio","setAspectRatio","_b","width","height","playerSize","setPlayerSize","_c","videoDimension","setVideoDimension","configuration","iceServers","urls","useEffect","pc","ontrack","event","current","srcObject","streams","muted","autoplay","controls","addEventListener","videoWidth","videoHeight","onStreamInfo","call","onconnectionstatechange","e","console","log","iceConnectionState","oniceconnectionstatechange","onicegatheringstatechange","iceGatheringState","addTransceiver","direction","dataChannel","createDataChannel","binaryType","onclose","onopen","onmessage","dataView","DataView","data","decoder","TextDecoder","JSON","parse","decode","klvs","onDataReceive","Date","toISOString","location_1","serverUrl","window","location","origin","uri","URL","wsProto","protocol","socket_1","WebSocket","concat","host","msg","candidate","addIceCandidate","setRemoteDescription","onerror","onConnected","code","onError","onicecandidate","send","stringify","createOffer","then","offer","setLocalDescription","error","message","curAspectRatio","RTCPeerConnection","playerStyle","React","createElement","style","ref","defaultProps","KlvView","label"],"mappings":"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"}

package/dist/esm/components/StanagPlayer/StanagPlayer.d.ts

@@ -1,16 +1,24 @@
 /// <reference types="react" />
+export interface StreamType {
+    videoWidth: number;
+    videoHeight: number;
+}
 export interface StanagPlayerProps {
     serverUrl?: string;
+    width: number;
+    defaultAspectRatio?: number;
     controls?: boolean;
     autoplay?: boolean;
     iceServers?: string;
-    onDataReceive?(packetTime: string, klvs: JSON): any;
-    onConnected?(isConnected: boolean): any;
-    onError?(error: string): any;
+    onDataReceive?(packetTime: string, klvs: JSON): void;
+    onConnected?(isConnected: boolean): void;
+    onStreamInfo?(streamIfo: StreamType): void;
+    onError?(error: string): void;
 }
 declare const StanagPlayer: {
     (props: StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;

package/dist/esm/components/StanagPlayer/StanagPlayer.stories.d.ts

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<{
     (props: import("./StanagPlayer").StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;
@@ -12,6 +13,7 @@ export default _default;
 export declare const Player: ComponentStory<{
     (props: import("./StanagPlayer").StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import e,{useRef as n,useEffect as o}from"react";var t=function(t){var c=n(null),r=n(!0),a={iceServers:[{urls:t.iceServers}]};o((function(){try{i.ontrack=function(e){var n=document.createElement(e.track.kind);n.srcObject=e.streams[0],n.muted=!0,n.autoplay=t.autoplay,n.controls=t.controls,n.addEventListener("pause",(function(e){r.current=!0})),n.addEventListener("play",(function(e){r.current=!1})),c.current.appendChild(n)},i.onconnectionstatechange=function(e){return console.log(i.iceConnectionState)},i.oniceconnectionstatechange=function(e){return console.log(i.iceConnectionState)},i.onicegatheringstatechange=function(e){return console.log(i.iceGatheringState)},i.addTransceiver("video",{direction:"sendrecv"});var e=i.createDataChannel("klv");e.binaryType="arraybuffer",e.onclose=function(){return console.log("dataChannel has closed")},e.onopen=function(){return console.log("dataChannel has opened")},e.onmessage=function(e){if(!r.current){var n=new DataView(e.data),o=new TextDecoder("utf8"),c=JSON.parse(o.decode(n)),a=(c.packetTime,c.klvs);t.onDataReceive&&t.onDataReceive(new Date(a[2]/1e3).toISOString(),a)}};var n=t.serverUrl?t.serverUrl:window.location.origin,o=new URL(n),a="ws";"http:"!=o.protocol&&(a+="s");var s=new WebSocket(a+"://".concat(o.host,"/ws"));s.onmessage=function(e){var n=JSON.parse(e.data);if(!n)return console.log("failed to parse msg");n.candidate?i.addIceCandidate(n):i.setRemoteDescription(n)},s.onerror=function(e){console.log("Websocket Error.")},s.onclose=function(e){t.onConnected&&t.onConnected(!1),1e3!=e.code&&(t.onError&&console.log("Websocket closed: ".concat(e.code)),t.onError("Websocket error: ".concat(e.code)))},i.onicecandidate=function(e){e.candidate&&""!==e.candidate.candidate&&s.send(JSON.stringify(e.candidate))},s.onopen=function(){t.onConnected&&t.onConnected(!0),i.createOffer().then((function(e){i.setLocalDescription(e),s.send(JSON.stringify(e))}))}}catch(e){console.log("Error: ".concat(e.message))}}),[]);var i=new RTCPeerConnection(a);return e.createElement("div",null,e.createElement("div",{ref:c}))};t.defaultProps={controls:!0,autoplay:!0,iceServers:"stun:stun.l.google.com:19302"};var c=function(n){return e.createElement(c,null,n.label)};export{c as KlvView,t as StanagPlayer};
+import e,{useRef as n,useState as t,useEffect as o}from"react";var r=function(r){n(null);var c=n(null),i=n(!0),a=t(16/9),d=a[0],s=a[1],l=t({width:r.width,height:r.width/d}),u=l[0],h=l[1],g=t({width:1920,height:1080}),f=g[0],v=g[1],w={iceServers:[{urls:r.iceServers}]};o((function(){try{p.ontrack=function(e){null!=c.current&&(c.current.srcObject=e.streams[0],c.current.muted=!0,c.current.autoplay=r.autoplay,c.current.controls=r.controls,c.current.addEventListener("pause",(function(e){i.current=!0})),c.current.addEventListener("play",(function(e){i.current=!1})),c.current.addEventListener("loadedmetadata",(function(e){var n;v({width:c.current.videoWidth,height:c.current.videoHeight}),null===(n=r.onStreamInfo)||void 0===n||n.call(r,{videoWidth:c.current.videoWidth,videoHeight:c.current.videoHeight})})))},p.onconnectionstatechange=function(e){return console.log(p.iceConnectionState)},p.oniceconnectionstatechange=function(e){return console.log(p.iceConnectionState)},p.onicegatheringstatechange=function(e){return console.log(p.iceGatheringState)},p.addTransceiver("video",{direction:"sendrecv"});var e=p.createDataChannel("klv");e.binaryType="arraybuffer",e.onclose=function(){return console.log("dataChannel has closed")},e.onopen=function(){return console.log("dataChannel has opened")},e.onmessage=function(e){if(!i.current){var n=new DataView(e.data),t=new TextDecoder("utf8"),o=JSON.parse(t.decode(n)),c=(o.packetTime,o.klvs);r.onDataReceive&&r.onDataReceive(new Date(c[2]/1e3).toISOString(),c)}};var n=r.serverUrl?r.serverUrl:window.location.origin,t=new URL(n),o="ws";"http:"!=t.protocol&&(o+="s");var a=new WebSocket(o+"://".concat(t.host,"/ws"));a.onmessage=function(e){var n=JSON.parse(e.data);if(!n)return console.log("failed to parse msg");n.candidate?p.addIceCandidate(n):p.setRemoteDescription(n)},a.onerror=function(e){console.log("Websocket Error.")},a.onclose=function(e){r.onConnected&&r.onConnected(!1),1e3!=e.code&&(r.onError&&console.log("Websocket closed: ".concat(e.code)),r.onError("Websocket error: ".concat(e.code)))},p.onicecandidate=function(e){e.candidate&&""!==e.candidate.candidate&&a.send(JSON.stringify(e.candidate))},a.onopen=function(){r.onConnected&&r.onConnected(!0),p.createOffer().then((function(e){p.setLocalDescription(e),a.send(JSON.stringify(e))}))}}catch(e){console.log("Error: ".concat(e.message))}}),[]),o((function(){try{console.log("Video dimensions: ".concat(f.width,"x").concat(f.height));var e=f.width/f.height;s(e),h({width:r.width,height:r.width/e})}catch(e){}}),[f.width,f.height,r.width]);var p=new RTCPeerConnection(w),m={width:u.width,height:u.height};return e.createElement("video",{style:m,ref:c})};r.defaultProps={width:360,controls:!0,autoplay:!0,iceServers:"stun:stun.l.google.com:19302"};var c=function(n){return e.createElement(c,null,n.label)};export{c as KlvView,r as StanagPlayer};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/StanagPlayer/StanagPlayer.tsx","../../src/components/KlvView/KlvView.tsx"],"sourcesContent":[null,null],"names":["StanagPlayer","props","videoWindow","useRef","isPaused","configuration","iceServers","urls","useEffect","pc","ontrack","event","el","document","createElement","track","kind","srcObject","streams","muted","autoplay","controls","addEventListener","current","appendChild","onconnectionstatechange","e","console","log","iceConnectionState","oniceconnectionstatechange","onicegatheringstatechange","iceGatheringState","addTransceiver","direction","dataChannel","createDataChannel","binaryType","onclose","onopen","onmessage","dataView","DataView","data","decoder","TextDecoder","_a","JSON","parse","decode","klvs","onDataReceive","Date","toISOString","location_1","serverUrl","window","location","origin","uri","URL","wsProto","protocol","socket_1","WebSocket","concat","host","msg","candidate","addIceCandidate","setRemoteDescription","onerror","onConnected","code","onError","onicecandidate","send","stringify","createOffer","then","offer","setLocalDescription","error","message","RTCPeerConnection","React","ref","defaultProps","KlvView","label"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/components/StanagPlayer/StanagPlayer.tsx","../../src/components/KlvView/KlvView.tsx"],"sourcesContent":[null,null],"names":["StanagPlayer","props","useRef","videoPlayer","isPaused","_a","useState","aspectRatio","setAspectRatio","_b","width","height","playerSize","setPlayerSize","_c","videoDimension","setVideoDimension","configuration","iceServers","urls","useEffect","pc","ontrack","event","current","srcObject","streams","muted","autoplay","controls","addEventListener","videoWidth","videoHeight","onStreamInfo","call","onconnectionstatechange","e","console","log","iceConnectionState","oniceconnectionstatechange","onicegatheringstatechange","iceGatheringState","addTransceiver","direction","dataChannel","createDataChannel","binaryType","onclose","onopen","onmessage","dataView","DataView","data","decoder","TextDecoder","JSON","parse","decode","klvs","onDataReceive","Date","toISOString","location_1","serverUrl","window","location","origin","uri","URL","wsProto","protocol","socket_1","WebSocket","concat","host","msg","candidate","addIceCandidate","setRemoteDescription","onerror","onConnected","code","onError","onicecandidate","send","stringify","createOffer","then","offer","setLocalDescription","error","message","curAspectRatio","RTCPeerConnection","playerStyle","React","createElement","style","ref","defaultProps","KlvView","label"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,16 +1,24 @@
 /// <reference types="react" />
+interface StreamType {
+    videoWidth: number;
+    videoHeight: number;
+}
 interface StanagPlayerProps {
     serverUrl?: string;
+    width: number;
+    defaultAspectRatio?: number;
     controls?: boolean;
     autoplay?: boolean;
     iceServers?: string;
-    onDataReceive?(packetTime: string, klvs: JSON): any;
-    onConnected?(isConnected: boolean): any;
-    onError?(error: string): any;
+    onDataReceive?(packetTime: string, klvs: JSON): void;
+    onConnected?(isConnected: boolean): void;
+    onStreamInfo?(streamIfo: StreamType): void;
+    onError?(error: string): void;
 }
 declare const StanagPlayer: {
     (props: StanagPlayerProps): JSX.Element;
     defaultProps: {
+        width: number;
         controls: boolean;
         autoplay: boolean;
         iceServers: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impleotv/stanag-player",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Impleotv web player",
   "private": false,
   "scripts": {},