You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ConnectionIndicator.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. /* global $, APP, config */
  2. /* jshint -W101 */
  3. import JitsiPopover from "../util/JitsiPopover";
  4. import VideoLayout from "./VideoLayout";
  5. import UIUtil from "../util/UIUtil";
  6. /**
  7. * Maps a connection quality value (in percent) to the width of the "full" icon.
  8. */
  9. const qualityToWidth = [
  10. // Full (5 bars)
  11. {percent: 80, width: "100%"},
  12. // 4 bars
  13. {percent: 60, width: "80%"},
  14. // 3 bars
  15. {percent: 40, width: "55%"},
  16. // 2 bars
  17. {percent: 20, width: "40%"},
  18. // 1 bar
  19. {percent: 0, width: "20%"}
  20. // Note: we never show 0 bars.
  21. ];
  22. /**
  23. * Constructs new connection indicator.
  24. * @param videoContainer the video container associated with the indicator.
  25. * @param videoId the identifier of the video
  26. * @constructor
  27. */
  28. function ConnectionIndicator(videoContainer, videoId) {
  29. this.videoContainer = videoContainer;
  30. this.bandwidth = null;
  31. this.packetLoss = null;
  32. this.bitrate = null;
  33. this.showMoreValue = false;
  34. this.resolution = null;
  35. this.isResolutionHD = null;
  36. this.transport = [];
  37. this.framerate = null;
  38. this.popover = null;
  39. this.id = videoId;
  40. this.create();
  41. }
  42. ConnectionIndicator.getIP = function(value) {
  43. return value.substring(0, value.lastIndexOf(":"));
  44. };
  45. ConnectionIndicator.getPort = function(value) {
  46. return value.substring(value.lastIndexOf(":") + 1, value.length);
  47. };
  48. ConnectionIndicator.getStringFromArray = function (array) {
  49. var res = "";
  50. for(var i = 0; i < array.length; i++) {
  51. res += (i === 0? "" : ", ") + array[i];
  52. }
  53. return res;
  54. };
  55. /**
  56. * Generates the html content.
  57. * @returns {string} the html content.
  58. */
  59. ConnectionIndicator.prototype.generateText = function () {
  60. var downloadBitrate, uploadBitrate, packetLoss, i;
  61. if(!this.bitrate) {
  62. downloadBitrate = "N/A";
  63. uploadBitrate = "N/A";
  64. }
  65. else {
  66. downloadBitrate =
  67. this.bitrate.download? this.bitrate.download + " Kbps" : "N/A";
  68. uploadBitrate =
  69. this.bitrate.upload? this.bitrate.upload + " Kbps" : "N/A";
  70. }
  71. if(!this.packetLoss) {
  72. packetLoss = "N/A";
  73. } else {
  74. packetLoss = "<span class='connection-info__download'>&darr;</span>" +
  75. (this.packetLoss.download !== null ?
  76. this.packetLoss.download : "N/A") +
  77. "% <span class='connection-info__upload'>&uarr;</span>" +
  78. (this.packetLoss.upload !== null? this.packetLoss.upload : "N/A") +
  79. "%";
  80. }
  81. // GENERATE RESOLUTIONS STRING
  82. const resolutions = this.resolution || {};
  83. const resolutionStr = Object.keys(resolutions).map(ssrc => {
  84. let {width, height} = resolutions[ssrc];
  85. return `${width}x${height}`;
  86. }).join(', ') || 'N/A';
  87. const framerates = this.framerate || {};
  88. const frameRateStr = Object.keys(framerates).map(ssrc =>
  89. framerates[ssrc]
  90. ).join(', ') || 'N/A';
  91. let result = (
  92. `<table class="connection-info__container" style='width:100%'>
  93. <tr>
  94. <td>
  95. <span data-i18n='connectionindicator.bitrate'></span>
  96. </td>
  97. <td>
  98. <span class='connection-info__download'>&darr;</span>${downloadBitrate}
  99. <span class='connection-info__upload'>&uarr;</span>${uploadBitrate}
  100. </td>
  101. </tr>
  102. <tr>
  103. <td>
  104. <span data-i18n='connectionindicator.packetloss'></span>
  105. </td>
  106. <td>${packetLoss}</td>
  107. </tr>
  108. <tr>
  109. <td>
  110. <span data-i18n='connectionindicator.resolution'></span>
  111. </td>
  112. <td>
  113. ${resolutionStr}
  114. </td>
  115. </tr>
  116. <tr>
  117. <td>
  118. <span data-i18n='connectionindicator.framerate'></span>
  119. </td>
  120. <td>
  121. ${frameRateStr}
  122. </td>
  123. </tr>
  124. </table>`);
  125. if(this.videoContainer.videoSpanId == "localVideoContainer") {
  126. result += "<a class=\"jitsipopover__showmore link\" " +
  127. "onclick = \"APP.UI.connectionIndicatorShowMore('" +
  128. // FIXME: we do not know local id when this text is generated
  129. //this.id + "')\" data-i18n='connectionindicator." +
  130. "local')\" data-i18n='connectionindicator." +
  131. (this.showMoreValue ? "less" : "more") + "'></a>";
  132. }
  133. if (this.showMoreValue) {
  134. var downloadBandwidth, uploadBandwidth, transport;
  135. if (!this.bandwidth) {
  136. downloadBandwidth = "N/A";
  137. uploadBandwidth = "N/A";
  138. } else {
  139. downloadBandwidth = this.bandwidth.download?
  140. this.bandwidth.download + " Kbps" :
  141. "N/A";
  142. uploadBandwidth = this.bandwidth.upload?
  143. this.bandwidth.upload + " Kbps" :
  144. "N/A";
  145. }
  146. if (!this.transport || this.transport.length === 0) {
  147. transport = "<tr>" +
  148. "<td><span " +
  149. "data-i18n='connectionindicator.address'></span></td>" +
  150. "<td> N/A</td></tr>";
  151. } else {
  152. var data = {
  153. remoteIP: [],
  154. localIP:[],
  155. remotePort:[],
  156. localPort:[],
  157. transportType:[]};
  158. for(i = 0; i < this.transport.length; i++) {
  159. var ip = ConnectionIndicator.getIP(this.transport[i].ip);
  160. var port = ConnectionIndicator.getPort(this.transport[i].ip);
  161. var localIP =
  162. ConnectionIndicator.getIP(this.transport[i].localip);
  163. var localPort =
  164. ConnectionIndicator.getPort(this.transport[i].localip);
  165. if(data.remoteIP.indexOf(ip) == -1) {
  166. data.remoteIP.push(ip);
  167. }
  168. if(data.remotePort.indexOf(port) == -1) {
  169. data.remotePort.push(port);
  170. }
  171. if(data.localIP.indexOf(localIP) == -1) {
  172. data.localIP.push(localIP);
  173. }
  174. if(data.localPort.indexOf(localPort) == -1) {
  175. data.localPort.push(localPort);
  176. }
  177. if(data.transportType.indexOf(this.transport[i].type) == -1) {
  178. data.transportType.push(this.transport[i].type);
  179. }
  180. }
  181. var local_address_key = "connectionindicator.localaddress";
  182. var remote_address_key = "connectionindicator.remoteaddress";
  183. var localTransport =
  184. "<tr><td><span data-i18n='" +
  185. local_address_key +"' data-i18n-options='" +
  186. JSON.stringify({count: data.localIP.length})
  187. + "'></span></td><td> " +
  188. ConnectionIndicator.getStringFromArray(data.localIP) +
  189. "</td></tr>";
  190. transport =
  191. "<tr><td><span data-i18n='" +
  192. remote_address_key + "' data-i18n-options='" +
  193. JSON.stringify({count: data.remoteIP.length})
  194. + "'></span></td><td> " +
  195. ConnectionIndicator.getStringFromArray(data.remoteIP) +
  196. "</td></tr>";
  197. var key_remote = "connectionindicator.remoteport",
  198. key_local = "connectionindicator.localport";
  199. transport += "<tr>" +
  200. "<td>" +
  201. "<span data-i18n='" + key_remote +
  202. "' data-i18n-options='" +
  203. JSON.stringify({count: this.transport.length})
  204. + "'></span></td><td>";
  205. localTransport += "<tr>" +
  206. "<td>" +
  207. "<span data-i18n='" + key_local +
  208. "' data-i18n-options='" +
  209. JSON.stringify({count: this.transport.length})
  210. + "'></span></td><td>";
  211. transport +=
  212. ConnectionIndicator.getStringFromArray(data.remotePort);
  213. localTransport +=
  214. ConnectionIndicator.getStringFromArray(data.localPort);
  215. transport += "</td></tr>";
  216. transport += localTransport + "</td></tr>";
  217. transport +="<tr>" +
  218. "<td><span data-i18n='connectionindicator.transport' "
  219. + " data-i18n-options='" +
  220. JSON.stringify({count: data.transportType.length})
  221. + "'></span></td>" +
  222. "<td>"
  223. + ConnectionIndicator.getStringFromArray(data.transportType)
  224. + "</td></tr>";
  225. }
  226. result += "<table class='connection-info__container' style='width:100%'>" +
  227. "<tr>" +
  228. "<td>" +
  229. "<span data-i18n='connectionindicator.bandwidth'></span>" +
  230. "</td><td>" +
  231. "<span class='connection-info__download'>&darr;</span>" +
  232. downloadBandwidth +
  233. " <span class='connection-info__upload'>&uarr;</span>" +
  234. uploadBandwidth + "</td></tr>";
  235. result += transport + "</table>";
  236. }
  237. return result;
  238. };
  239. /**
  240. * Shows or hide the additional information.
  241. */
  242. ConnectionIndicator.prototype.showMore = function () {
  243. this.showMoreValue = !this.showMoreValue;
  244. this.updatePopoverData();
  245. };
  246. function createIcon(classes, iconClass) {
  247. var icon = document.createElement("span");
  248. for(var i in classes) {
  249. icon.classList.add(classes[i]);
  250. }
  251. icon.appendChild(
  252. document.createElement("i")).classList.add(iconClass);
  253. return icon;
  254. }
  255. /**
  256. * Creates the indicator
  257. */
  258. ConnectionIndicator.prototype.create = function () {
  259. let indicatorId = 'connectionindicator';
  260. let element = UIUtil.getVideoThumbnailIndicatorSpan({
  261. videoSpanId: this.videoContainer.videoSpanId,
  262. indicatorId
  263. });
  264. element.classList.add('show');
  265. this.connectionIndicatorContainer = element;
  266. let popoverContent = (
  267. `<div class="connection-info" data-i18n="${indicatorId}.na"></div>`
  268. );
  269. this.popover = new JitsiPopover($(element), {
  270. content: popoverContent,
  271. skin: "black",
  272. onBeforePosition: el => APP.translation.translateElement(el)
  273. });
  274. // override popover show method to make sure we will update the content
  275. // before showing the popover
  276. var origShowFunc = this.popover.show;
  277. this.popover.show = function () {
  278. // update content by forcing it, to finish even if popover
  279. // is not visible
  280. this.updatePopoverData(true);
  281. // call the original show, passing its actual this
  282. origShowFunc.call(this.popover);
  283. }.bind(this);
  284. let connectionIconContainer = document.createElement('div');
  285. connectionIconContainer.className = 'connection indicatoricon';
  286. this.emptyIcon = connectionIconContainer.appendChild(
  287. createIcon(["connection_empty"], "icon-connection"));
  288. this.fullIcon = connectionIconContainer.appendChild(
  289. createIcon(["connection_full"], "icon-connection"));
  290. this.interruptedIndicator = connectionIconContainer.appendChild(
  291. createIcon(["connection_lost"],"icon-connection-lost"));
  292. $(this.interruptedIndicator).hide();
  293. this.connectionIndicatorContainer.appendChild(connectionIconContainer);
  294. };
  295. /**
  296. * Removes the indicator
  297. */
  298. ConnectionIndicator.prototype.remove = function() {
  299. if (this.connectionIndicatorContainer.parentNode) {
  300. this.connectionIndicatorContainer.parentNode.removeChild(
  301. this.connectionIndicatorContainer);
  302. }
  303. this.popover.forceHide();
  304. };
  305. /**
  306. * Updates the UI which displays warning about user's connectivity problems.
  307. *
  308. * @param {boolean} isActive true if the connection is working fine or false if
  309. * the user is having connectivity issues.
  310. */
  311. ConnectionIndicator.prototype.updateConnectionStatusIndicator
  312. = function (isActive) {
  313. this.isConnectionActive = isActive;
  314. if (this.isConnectionActive) {
  315. $(this.interruptedIndicator).hide();
  316. $(this.emptyIcon).show();
  317. $(this.fullIcon).show();
  318. } else {
  319. $(this.interruptedIndicator).show();
  320. $(this.emptyIcon).hide();
  321. $(this.fullIcon).hide();
  322. }
  323. };
  324. /**
  325. * Updates the data of the indicator
  326. * @param percent the percent of connection quality
  327. * @param object the statistics data.
  328. */
  329. ConnectionIndicator.prototype.updateConnectionQuality =
  330. function (percent, object) {
  331. if (!percent) {
  332. this.connectionIndicatorContainer.style.display = "none";
  333. this.popover.forceHide();
  334. return;
  335. } else {
  336. if(this.connectionIndicatorContainer.style.display == "none") {
  337. this.connectionIndicatorContainer.style.display = "block";
  338. }
  339. }
  340. if (object) {
  341. this.bandwidth = object.bandwidth;
  342. this.bitrate = object.bitrate;
  343. this.packetLoss = object.packetLoss;
  344. this.transport = object.transport;
  345. if (object.resolution) {
  346. this.resolution = object.resolution;
  347. }
  348. if (object.framerate)
  349. this.framerate = object.framerate;
  350. }
  351. let width = qualityToWidth.find(x => percent >= x.percent);
  352. this.fullIcon.style.width = width.width;
  353. if (object && typeof object.isResolutionHD === 'boolean') {
  354. this.isResolutionHD = object.isResolutionHD;
  355. }
  356. this.updateResolutionIndicator();
  357. this.updatePopoverData();
  358. };
  359. /**
  360. * Updates the resolution
  361. * @param resolution the new resolution
  362. */
  363. ConnectionIndicator.prototype.updateResolution = function (resolution) {
  364. this.resolution = resolution;
  365. this.updateResolutionIndicator();
  366. this.updatePopoverData();
  367. };
  368. /**
  369. * Updates the content of the popover if its visible
  370. * @param force to work even if popover is not visible
  371. */
  372. ConnectionIndicator.prototype.updatePopoverData = function (force) {
  373. // generate content, translate it and add it to document only if
  374. // popover is visible or we force to do so.
  375. if(this.popover.popoverShown || force) {
  376. this.popover.updateContent(
  377. `<div class="connection-info">${this.generateText()}</div>`
  378. );
  379. }
  380. };
  381. /**
  382. * Hides the popover
  383. */
  384. ConnectionIndicator.prototype.hide = function () {
  385. this.popover.forceHide();
  386. };
  387. /**
  388. * Hides the indicator
  389. */
  390. ConnectionIndicator.prototype.hideIndicator = function () {
  391. this.connectionIndicatorContainer.style.display = "none";
  392. if(this.popover)
  393. this.popover.forceHide();
  394. };
  395. /**
  396. * Updates the resolution indicator.
  397. */
  398. ConnectionIndicator.prototype.updateResolutionIndicator = function () {
  399. if (this.id !== null
  400. && VideoLayout.isCurrentlyOnLarge(this.id)) {
  401. let showResolutionLabel = false;
  402. if (this.isResolutionHD !== null)
  403. showResolutionLabel = this.isResolutionHD;
  404. else if (this.resolution !== null) {
  405. let resolutions = this.resolution || {};
  406. Object.keys(resolutions).map(function (ssrc) {
  407. const { height } = resolutions[ssrc];
  408. if (height >= config.minHDHeight)
  409. showResolutionLabel = true;
  410. });
  411. }
  412. VideoLayout.updateResolutionLabel(showResolutionLabel);
  413. }
  414. };
  415. /**
  416. * Adds a hover listener to the popover.
  417. */
  418. ConnectionIndicator.prototype.addPopoverHoverListener = function (listener) {
  419. this.popover.addOnHoverPopover(listener);
  420. };
  421. export default ConnectionIndicator;