New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@akkadu/rsi-api-vue
Advanced tools
@akkadu/rsi-api-vue - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
@@ -5,390 +5,226 @@ import events_1 from 'events'; | ||
| var Base = | ||
| /** @class */ | ||
| function () { | ||
| function Base() { | ||
| this.emitter = new events_1.EventEmitter(); | ||
| } | ||
| Base.prototype.gatewayRequest = function (apiKey, roomName) { | ||
| if (!apiKey) { | ||
| throw Error('base akadu-rsi: apiKey is undefined.'); | ||
| var Base = /** @class */ (function () { | ||
| function Base() { | ||
| this.emitter = new events_1.EventEmitter(); | ||
| } | ||
| Base.prototype.gatewayRequest = function (apiKey, roomName) { | ||
| if (!apiKey) { | ||
| throw Error('base akadu-rsi: apiKey is undefined.'); | ||
| } | ||
| if (!roomName) { | ||
| throw Error('base akkadu-rsi: roomname is undefined.'); | ||
| } | ||
| return 'test gateway'; | ||
| }; | ||
| Base.prototype.on = function (event, fn) { | ||
| this.emitter.on(event, fn); | ||
| }; | ||
| return Base; | ||
| }()); | ||
| var _default$2 = Base; | ||
| if (!roomName) { | ||
| throw Error('base akkadu-rsi: roomname is undefined.'); | ||
| } | ||
| return 'test gateway'; | ||
| }; | ||
| Base.prototype.on = function (event, fn) { | ||
| this.emitter.on(event, fn); | ||
| }; | ||
| return Base; | ||
| }(); | ||
| var _default$2 = Base; | ||
| var lib = /*#__PURE__*/Object.defineProperty({ | ||
| default: _default$2 | ||
| }, '__esModule', { | ||
| value: true | ||
| }); | ||
| default: _default$2 | ||
| }, '__esModule', {value: true}); | ||
| var component = { | ||
| html: "\n <body>\n <div class=\"select\">\n <div class=\"selectWrapper\" >\n <div class=\"selectCustom js-selectCustom\">\n <div id=\"interpretation-player-custom-value\" class=\"selectCustom-trigger\"> <img src=''/> <h3> </h3> </div>\n <div id=\"interpretation-player-options\" class=\"selectCustom-options\">\n </div>\n </div>\n </div>\n </body>\n ", | ||
| css: "\n\n #akkadu-interpretation-player {\n display: inline-table;\n position: relative;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n }\n #akkadu-interpretation-player .select {\n position: relative;\n }\n #akkadu-interpretation-player .selectLabel {\n display: block;\n margin-bottom: 10px;\n }\n #akkadu-interpretation-player .selectWrapper {\n position: relative;\n }\n #akkadu-interpretation-player .selectCustom {\n position: relative;\n height: 100%;\n }\n #akkadu-interpretation-player .selectCustom-trigger {\n display: flex;\n position: relative;\n min-width: 150px;\n background-color: white;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n cursor: pointer;\n padding: 10px 15px;\n width: 100%;\n height: 100%;\n }\n #akkadu-interpretation-player h3{\n margin:0px;\n padding:0px;\n }\n #akkadu-interpretation-player img{\n margin:0px;\n padding:0px;\n max-width: 20px;\n margin-right:10px;\n }\n #akkadu-interpretation-player h3, #akkadu-interpretation-player .selectCustom-trigger{\n font-size: 16px;\n font-weight: 400;\n text-transform: capitalize;\n }\n #akkadu-interpretation-player .selectCustom-trigger::after {\n content: \"\u25BE\";\n color:#908f8f;\n position: absolute;\n top: 7px;\n line-height: 20px;\n right: 10px;\n }\n \n #akkadu-interpretation-player .selectCustom-trigger:hover {\n box-shadow: 0 0 4px #e9e1f8;\n }\n #akkadu-interpretation-player .selectCustom-options {\n position: absolute;\n top: 45px;\n left: 0;\n width: 100%;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n background-color: #fff;\n box-shadow: 0 0 4px #e9e1f8;\n z-index: 1;\n padding:0px;\n display: none;\n cursor: pointer;\n box-shadow: 3px 6px 7px 4px #e3e3e3;\n }\n \n #akkadu-interpretation-player .selectCustom.isActive .selectCustom-options {\n display: block;\n min-width: 260px;\n }\n \n #akkadu-interpretation-player .selectCustom-option {\n position: relative;\n padding: 10px 15px;\n display: flex;\n }\n \n #akkadu-interpretation-player .selectCustom-option:hover {\n background-color: #F2F2F2;\n }\n \n #akkadu-interpretation-player .selectCustom-option:not(:last-of-type)::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 5px;\n width: 95%;\n border-bottom: 1px solid #e0e7ef;\n }\n \n\n \n " | ||
| html: "\n <body>\n <div class=\"select\">\n <div class=\"selectWrapper\" >\n <div class=\"selectCustom js-selectCustom\">\n <div id=\"interpretation-player-custom-value\" class=\"selectCustom-trigger\"> <img src=''/> <h3> </h3> </div>\n <div id=\"interpretation-player-options\" class=\"selectCustom-options\">\n </div>\n </div>\n </div>\n </body>\n ", | ||
| css: "\n\n #akkadu-interpretation-player {\n display: inline-table;\n position: relative;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n }\n #akkadu-interpretation-player .select {\n position: relative;\n }\n #akkadu-interpretation-player .selectLabel {\n display: block;\n margin-bottom: 10px;\n }\n #akkadu-interpretation-player .selectWrapper {\n position: relative;\n }\n #akkadu-interpretation-player .selectCustom {\n position: relative;\n height: 100%;\n }\n #akkadu-interpretation-player .selectCustom-trigger {\n display: flex;\n position: relative;\n min-width: 150px;\n background-color: white;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n cursor: pointer;\n padding: 10px 15px;\n width: 100%;\n height: 100%;\n }\n #akkadu-interpretation-player h3{\n margin:0px;\n padding:0px;\n }\n #akkadu-interpretation-player img{\n margin:0px;\n padding:0px;\n max-width: 20px;\n margin-right:10px;\n }\n #akkadu-interpretation-player h3, #akkadu-interpretation-player .selectCustom-trigger{\n font-size: 16px;\n font-weight: 400;\n text-transform: capitalize;\n }\n #akkadu-interpretation-player .selectCustom-trigger::after {\n content: \"\u25BE\";\n color:#908f8f;\n position: absolute;\n top: 7px;\n line-height: 20px;\n right: 10px;\n }\n \n #akkadu-interpretation-player .selectCustom-trigger:hover {\n box-shadow: 0 0 4px #e9e1f8;\n }\n #akkadu-interpretation-player .selectCustom-options {\n position: absolute;\n top: 45px;\n left: 0;\n width: 100%;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n background-color: #fff;\n box-shadow: 0 0 4px #e9e1f8;\n z-index: 1;\n padding:0px;\n display: none;\n cursor: pointer;\n box-shadow: 3px 6px 7px 4px #e3e3e3;\n }\n \n #akkadu-interpretation-player .selectCustom.isActive .selectCustom-options {\n display: block;\n min-width: 260px;\n }\n \n #akkadu-interpretation-player .selectCustom-option {\n position: relative;\n padding: 10px 15px;\n display: flex;\n }\n \n #akkadu-interpretation-player .selectCustom-option:hover {\n background-color: #F2F2F2;\n }\n \n #akkadu-interpretation-player .selectCustom-option:not(:last-of-type)::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 5px;\n width: 95%;\n border-bottom: 1px solid #e0e7ef;\n }\n \n\n \n " | ||
| }; | ||
| var _default$1 = component; | ||
| var widgetComponent = /*#__PURE__*/Object.defineProperty({ | ||
| default: _default$1 | ||
| }, '__esModule', { | ||
| value: true | ||
| }); | ||
| default: _default$1 | ||
| }, '__esModule', {value: true}); | ||
| var __extends = commonjsGlobal && commonjsGlobal.__extends || function () { | ||
| var extendStatics = function (d, b) { | ||
| extendStatics = Object.setPrototypeOf || { | ||
| __proto__: [] | ||
| } instanceof Array && function (d, b) { | ||
| d.__proto__ = b; | ||
| } || function (d, b) { | ||
| for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; | ||
| var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () { | ||
| var extendStatics = function (d, b) { | ||
| extendStatics = Object.setPrototypeOf || | ||
| ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || | ||
| function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; | ||
| return extendStatics(d, b); | ||
| }; | ||
| return extendStatics(d, b); | ||
| }; | ||
| return function (d, b) { | ||
| if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
| extendStatics(d, b); | ||
| function __() { | ||
| this.constructor = d; | ||
| } | ||
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
| }; | ||
| }(); | ||
| var __awaiter = commonjsGlobal && commonjsGlobal.__awaiter || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { | ||
| return value instanceof P ? value : new P(function (resolve) { | ||
| resolve(value); | ||
| return function (d, b) { | ||
| if (typeof b !== "function" && b !== null) | ||
| throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
| extendStatics(d, b); | ||
| function __() { this.constructor = d; } | ||
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
| }; | ||
| })(); | ||
| var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
| function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
| function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { | ||
| try { | ||
| step(generator.next(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| }; | ||
| var __generator = (commonjsGlobal && commonjsGlobal.__generator) || function (thisArg, body) { | ||
| var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
| return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
| function verb(n) { return function (v) { return step([n, v]); }; } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: case 1: t = op; break; | ||
| case 4: _.label++; return { value: op[1], done: false }; | ||
| case 5: _.label++; y = op[1]; op = [0]; continue; | ||
| case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
| if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
| if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
| if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
| if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
| } | ||
| function rejected(value) { | ||
| try { | ||
| step(generator["throw"](value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| } | ||
| function step(result) { | ||
| result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); | ||
| } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| }; | ||
| var __generator = commonjsGlobal && commonjsGlobal.__generator || function (thisArg, body) { | ||
| var _ = { | ||
| label: 0, | ||
| sent: function () { | ||
| if (t[0] & 1) throw t[1]; | ||
| return t[1]; | ||
| }, | ||
| trys: [], | ||
| ops: [] | ||
| }, | ||
| f, | ||
| y, | ||
| t, | ||
| g; | ||
| return g = { | ||
| next: verb(0), | ||
| "throw": verb(1), | ||
| "return": verb(2) | ||
| }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { | ||
| return this; | ||
| }), g; | ||
| function verb(n) { | ||
| return function (v) { | ||
| return step([n, v]); | ||
| }; | ||
| } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: | ||
| case 1: | ||
| t = op; | ||
| break; | ||
| case 4: | ||
| _.label++; | ||
| return { | ||
| value: op[1], | ||
| done: false | ||
| }; | ||
| case 5: | ||
| _.label++; | ||
| y = op[1]; | ||
| op = [0]; | ||
| continue; | ||
| case 7: | ||
| op = _.ops.pop(); | ||
| _.trys.pop(); | ||
| continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { | ||
| _ = 0; | ||
| continue; | ||
| } | ||
| if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { | ||
| _.label = op[1]; | ||
| break; | ||
| } | ||
| if (op[0] === 6 && _.label < t[1]) { | ||
| _.label = t[1]; | ||
| t = op; | ||
| break; | ||
| } | ||
| if (t && _.label < t[2]) { | ||
| _.label = t[2]; | ||
| _.ops.push(op); | ||
| break; | ||
| } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); | ||
| continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { | ||
| op = [6, e]; | ||
| y = 0; | ||
| } finally { | ||
| f = t = 0; | ||
| } | ||
| if (op[0] & 5) throw op[1]; | ||
| return { | ||
| value: op[0] ? op[1] : void 0, | ||
| done: true | ||
| }; | ||
| } | ||
| }; | ||
| var defaultConsumerConfig = { | ||
| languages: [], | ||
| container: null | ||
| languages: [], | ||
| container: null, | ||
| }; | ||
| var InterpretationPlayer = | ||
| /** @class */ | ||
| function (_super) { | ||
| __extends(InterpretationPlayer, _super); | ||
| function InterpretationPlayer(config) { | ||
| var _this = _super.call(this) || this; | ||
| var apiKey = config.apiKey, | ||
| roomName = config.roomName, | ||
| container = config.container, | ||
| positionMenu = config.positionMenu; | ||
| _this.apiKey = apiKey; | ||
| _this.roomName = roomName; | ||
| _this.positionMenu = positionMenu; | ||
| _this.consumerConfig = defaultConsumerConfig; | ||
| _this.consumerConfig.container = container; | ||
| _this.consumerConfig.domContainer = document.querySelector("#" + _this.consumerConfig.container); | ||
| if (!_this.apiKey) { | ||
| throw Error('InterpretationPlayer: apiKey is undefined'); | ||
| var InterpretationPlayer = /** @class */ (function (_super) { | ||
| __extends(InterpretationPlayer, _super); | ||
| function InterpretationPlayer(config) { | ||
| var _this = _super.call(this) || this; | ||
| var apiKey = config.apiKey, roomName = config.roomName, container = config.container, positionMenu = config.positionMenu; | ||
| _this.apiKey = apiKey; | ||
| _this.roomName = roomName; | ||
| _this.positionMenu = positionMenu; | ||
| _this.consumerConfig = defaultConsumerConfig; | ||
| _this.consumerConfig.container = container; | ||
| _this.consumerConfig.domContainer = document.querySelector("#" + _this.consumerConfig.container); | ||
| if (!_this.apiKey) { | ||
| throw Error('InterpretationPlayer: apiKey is undefined'); | ||
| } | ||
| if (!_this.roomName) { | ||
| throw Error('InterpretationPlayer: roomName is undefined'); | ||
| } | ||
| if (!_this.consumerConfig.domContainer) { | ||
| throw new Error("Unable to detect stream container " + _this.consumerConfig.container + " on the DOM"); | ||
| } | ||
| return _this; | ||
| } | ||
| if (!_this.roomName) { | ||
| throw Error('InterpretationPlayer: roomName is undefined'); | ||
| } | ||
| if (!_this.consumerConfig.domContainer) { | ||
| throw new Error("Unable to detect stream container " + _this.consumerConfig.container + " on the DOM"); | ||
| } | ||
| return _this; | ||
| } | ||
| InterpretationPlayer.prototype.init = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| this.gatewayRequest(this.apiKey, this.roomName); | ||
| this.initListeners(); | ||
| this.addInterpretationPlayer(); | ||
| return [2 | ||
| /*return*/ | ||
| ]; | ||
| }); | ||
| }); | ||
| }; | ||
| InterpretationPlayer.prototype.initListeners = function () {// | ||
| }; | ||
| /** | ||
| * @description add the interpretation player to the dom "#akkadu-interpretation-player" | ||
| * @private | ||
| */ | ||
| InterpretationPlayer.prototype.addInterpretationPlayer = function () { | ||
| this.emitter.emit('interpretation-player:on-ready', { | ||
| isReady: true | ||
| }); | ||
| /** * @description widget: {html:string, css:string} */ | ||
| var widget = widgetComponent.default; // Add Html to the DOM | ||
| this.consumerConfig.domContainer.insertAdjacentHTML('beforeend', widget.html); // Add Styles to the DOM | ||
| var style = document.createElement('style'); | ||
| style.textContent = widget.css; | ||
| document.head.appendChild(style); | ||
| var styleStr = this.updateStylesWithProps(); | ||
| if (styleStr) { | ||
| var styleProp = document.createElement('style'); | ||
| styleProp.textContent = styleStr; | ||
| document.head.appendChild(styleProp); | ||
| } // Add Script to the DOM | ||
| // to update with the list of languages | ||
| var languagesList = [{ | ||
| iso: 'us', | ||
| name: 'english' | ||
| }, { | ||
| iso: 'es', | ||
| name: 'spanish' | ||
| }, { | ||
| iso: 'cn', | ||
| name: 'chinese' | ||
| }]; | ||
| var languagesOptions = document.createDocumentFragment(); | ||
| for (var i = 0; i < languagesList.length; i++) { | ||
| var newOption = void 0; | ||
| var newImage = void 0; | ||
| var newText = void 0; | ||
| newOption = document.createElement('div'); | ||
| newOption.className = 'selectCustom-option'; | ||
| newOption.id = i; | ||
| newText = document.createElement('h3'); | ||
| newText.textContent = languagesList[i].name; | ||
| newImage = document.createElement('img'); | ||
| newImage.src = this.getFlagUrl(languagesList[i].iso); | ||
| newOption.appendChild(newImage); | ||
| newOption.appendChild(newText); | ||
| languagesOptions.appendChild(newOption); | ||
| } | ||
| document.getElementById('interpretation-player-options').appendChild(languagesOptions); | ||
| var script = document.createElement('script'); | ||
| script.textContent = widget.js; | ||
| document.body.appendChild(script); // interpretation-player-custom-value | ||
| var elSelectCustom = document.getElementsByClassName("js-selectCustom")[0]; | ||
| var elSelectCustomValue = document.getElementById('interpretation-player-custom-value'); | ||
| var elSelectCustomOptions = document.getElementById('interpretation-player-options'); | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languagesList[0].name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = this.getFlagUrl(languagesList[0].iso); // Listen for each custom language option selected | ||
| var that = this; | ||
| Array.from(elSelectCustomOptions.children).forEach(function (elOption) { | ||
| elOption.addEventListener("click", function (e) { | ||
| // Update custom select text | ||
| var languageSelected; | ||
| var idOption = e.target.id; | ||
| languageSelected = languagesList[idOption]; | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languageSelected.name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = that.getFlagUrl(languageSelected.iso); | ||
| that.emitter.emit('interpretation-player:on-language-selected', { | ||
| languageSelected: languageSelected | ||
| }); // Close select | ||
| elSelectCustom.classList.remove("isActive"); | ||
| }); | ||
| }); // Toggle select on label click | ||
| elSelectCustomValue.addEventListener("click", function (e) { | ||
| elSelectCustom.classList.toggle("isActive"); | ||
| }); // close the custom select when clicking outside. | ||
| document.addEventListener("click", function (e) { | ||
| var didClickedOutside = !elSelectCustom.contains(event.target); | ||
| if (didClickedOutside) { | ||
| elSelectCustom.classList.remove("isActive"); | ||
| } | ||
| }); // prop for position box - should do an auto one first ? | ||
| // 6px -1px 8px 1px #e3e3e3 !important | ||
| // bottom: 55px; top 0px for .selectCustom-options | ||
| }; | ||
| InterpretationPlayer.prototype.updateStylesWithProps = function () { | ||
| var propsDefault = { | ||
| 'positionMenu': 'bottom' | ||
| InterpretationPlayer.prototype.init = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| this.gatewayRequest(this.apiKey, this.roomName); | ||
| this.initListeners(); | ||
| this.addInterpretationPlayer(); | ||
| return [2 /*return*/]; | ||
| }); | ||
| }); | ||
| }; | ||
| var stylesStr; | ||
| var styles = []; | ||
| if (this.positionMenu !== propsDefault['positionMenu']) { | ||
| var style = ".selectCustom-options{\n box-shadow:6px -1px 8px 1px #e3e3e3 !important;\n top: -130px !important;\n }"; | ||
| styles.push(style); | ||
| } | ||
| stylesStr = styles.join(' '); | ||
| return stylesStr; | ||
| }; // Api to get the flags icons: https://www.countryflags.io/ | ||
| InterpretationPlayer.prototype.getFlagUrl = function (iso) { | ||
| return "https://www.countryflags.io/" + iso + "/flat/64.png"; | ||
| }; | ||
| return InterpretationPlayer; | ||
| }(lib.default); | ||
| InterpretationPlayer.prototype.initListeners = function () { | ||
| // | ||
| }; | ||
| /** | ||
| * @description add the interpretation player to the dom "#akkadu-interpretation-player" | ||
| * @private | ||
| */ | ||
| InterpretationPlayer.prototype.addInterpretationPlayer = function () { | ||
| this.emitter.emit('interpretation-player:on-ready', { isReady: true }); | ||
| /** * @description widget: {html:string, css:string} */ | ||
| var widget = widgetComponent.default; | ||
| // Add Html to the DOM | ||
| this.consumerConfig.domContainer.insertAdjacentHTML('beforeend', widget.html); | ||
| // Add Styles to the DOM | ||
| var style = document.createElement('style'); | ||
| style.textContent = widget.css; | ||
| document.head.appendChild(style); | ||
| var styleStr = this.updateStylesWithProps(); | ||
| if (styleStr) { | ||
| var styleProp = document.createElement('style'); | ||
| styleProp.textContent = styleStr; | ||
| document.head.appendChild(styleProp); | ||
| } | ||
| // Add Script to the DOM | ||
| // to update with the list of languages | ||
| var languagesList = [{ iso: 'us', name: 'english' }, { iso: 'es', name: 'spanish' }, { iso: 'cn', name: 'chinese' },]; | ||
| var languagesOptions = document.createDocumentFragment(); | ||
| for (var i = 0; i < languagesList.length; i++) { | ||
| var newOption = void 0; | ||
| var newImage = void 0; | ||
| var newText = void 0; | ||
| newOption = document.createElement('div'); | ||
| newOption.className = 'selectCustom-option'; | ||
| newOption.id = i; | ||
| newText = document.createElement('h3'); | ||
| newText.textContent = languagesList[i].name; | ||
| newImage = document.createElement('img'); | ||
| newImage.src = this.getFlagUrl(languagesList[i].iso); | ||
| newOption.appendChild(newImage); | ||
| newOption.appendChild(newText); | ||
| languagesOptions.appendChild(newOption); | ||
| } | ||
| document.getElementById('interpretation-player-options').appendChild(languagesOptions); | ||
| var script = document.createElement('script'); | ||
| script.textContent = widget.js; | ||
| document.body.appendChild(script); | ||
| // interpretation-player-custom-value | ||
| var elSelectCustom = document.getElementsByClassName("js-selectCustom")[0]; | ||
| var elSelectCustomValue = document.getElementById('interpretation-player-custom-value'); | ||
| var elSelectCustomOptions = document.getElementById('interpretation-player-options'); | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languagesList[0].name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = this.getFlagUrl(languagesList[0].iso); | ||
| // Listen for each custom language option selected | ||
| var that = this; | ||
| Array.from(elSelectCustomOptions.children).forEach(function (elOption) { | ||
| elOption.addEventListener("click", function (e) { | ||
| // Update custom select text | ||
| var languageSelected; | ||
| var idOption = e.target.id; | ||
| languageSelected = languagesList[idOption]; | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languageSelected.name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = that.getFlagUrl(languageSelected.iso); | ||
| that.emitter.emit('interpretation-player:on-language-selected', { languageSelected: languageSelected }); | ||
| // Close select | ||
| elSelectCustom.classList.remove("isActive"); | ||
| }); | ||
| }); | ||
| // Toggle select on label click | ||
| elSelectCustomValue.addEventListener("click", function (e) { | ||
| elSelectCustom.classList.toggle("isActive"); | ||
| }); | ||
| // close the custom select when clicking outside. | ||
| document.addEventListener("click", function (e) { | ||
| var didClickedOutside = !elSelectCustom.contains(event.target); | ||
| if (didClickedOutside) { | ||
| elSelectCustom.classList.remove("isActive"); | ||
| } | ||
| }); | ||
| // prop for position box - should do an auto one first ? | ||
| // 6px -1px 8px 1px #e3e3e3 !important | ||
| // bottom: 55px; top 0px for .selectCustom-options | ||
| }; | ||
| InterpretationPlayer.prototype.updateStylesWithProps = function () { | ||
| var propsDefault = { | ||
| 'positionMenu': 'bottom' | ||
| }; | ||
| var stylesStr; | ||
| var styles = []; | ||
| if (this.positionMenu !== propsDefault['positionMenu']) { | ||
| var style = ".selectCustom-options{\n box-shadow:6px -1px 8px 1px #e3e3e3 !important;\n top: -130px !important;\n }"; | ||
| styles.push(style); | ||
| } | ||
| stylesStr = styles.join(' '); | ||
| return stylesStr; | ||
| }; | ||
| // Api to get the flags icons: https://www.countryflags.io/ | ||
| InterpretationPlayer.prototype.getFlagUrl = function (iso) { | ||
| return "https://www.countryflags.io/" + iso + "/flat/64.png"; | ||
| }; | ||
| return InterpretationPlayer; | ||
| }(lib.default)); | ||
| var _default = InterpretationPlayer; | ||
@@ -432,5 +268,3 @@ | ||
| throw Error('interpretation-player: apiKey is not defined'); | ||
| } | ||
| /* const InterpretationPlayer = (await import('@/rsi-api-widget/modules/rsi-api-interpretation-player')).default */ | ||
| //const InterpretationPlayer = (await import('@akkadu/rsi-api-interpretation-player')).default // @akkadu/rsi-api-interpretation-player //to update to @akkadu/rsi-api-interpretation-player | ||
| } //const InterpretationPlayer = (await import('@akkadu/rsi-api-interpretation-player')).default // @akkadu/rsi-api-interpretation-player | ||
@@ -450,3 +284,3 @@ | ||
| getRoomname() { | ||
| return 'test'; | ||
| return 'test'; // to update later with the gateway api | ||
| }, | ||
@@ -453,0 +287,0 @@ |
@@ -94,391 +94,222 @@ 'use strict';var events_1=require('events');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var events_1__default=/*#__PURE__*/_interopDefaultLegacy(events_1);function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { | ||
| throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| }var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};var Base = | ||
| /** @class */ | ||
| function () { | ||
| function Base() { | ||
| this.emitter = new events_1__default['default'].EventEmitter(); | ||
| } | ||
| Base.prototype.gatewayRequest = function (apiKey, roomName) { | ||
| if (!apiKey) { | ||
| throw Error('base akadu-rsi: apiKey is undefined.'); | ||
| }var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};var Base = /** @class */ (function () { | ||
| function Base() { | ||
| this.emitter = new events_1__default['default'].EventEmitter(); | ||
| } | ||
| Base.prototype.gatewayRequest = function (apiKey, roomName) { | ||
| if (!apiKey) { | ||
| throw Error('base akadu-rsi: apiKey is undefined.'); | ||
| } | ||
| if (!roomName) { | ||
| throw Error('base akkadu-rsi: roomname is undefined.'); | ||
| } | ||
| return 'test gateway'; | ||
| }; | ||
| Base.prototype.on = function (event, fn) { | ||
| this.emitter.on(event, fn); | ||
| }; | ||
| return Base; | ||
| }()); | ||
| var _default$2 = Base; | ||
| if (!roomName) { | ||
| throw Error('base akkadu-rsi: roomname is undefined.'); | ||
| } | ||
| return 'test gateway'; | ||
| }; | ||
| Base.prototype.on = function (event, fn) { | ||
| this.emitter.on(event, fn); | ||
| }; | ||
| return Base; | ||
| }(); | ||
| var _default$2 = Base; | ||
| var lib = /*#__PURE__*/Object.defineProperty({ | ||
| default: _default$2 | ||
| }, '__esModule', { | ||
| value: true | ||
| });var component = { | ||
| html: "\n <body>\n <div class=\"select\">\n <div class=\"selectWrapper\" >\n <div class=\"selectCustom js-selectCustom\">\n <div id=\"interpretation-player-custom-value\" class=\"selectCustom-trigger\"> <img src=''/> <h3> </h3> </div>\n <div id=\"interpretation-player-options\" class=\"selectCustom-options\">\n </div>\n </div>\n </div>\n </body>\n ", | ||
| css: "\n\n #akkadu-interpretation-player {\n display: inline-table;\n position: relative;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n }\n #akkadu-interpretation-player .select {\n position: relative;\n }\n #akkadu-interpretation-player .selectLabel {\n display: block;\n margin-bottom: 10px;\n }\n #akkadu-interpretation-player .selectWrapper {\n position: relative;\n }\n #akkadu-interpretation-player .selectCustom {\n position: relative;\n height: 100%;\n }\n #akkadu-interpretation-player .selectCustom-trigger {\n display: flex;\n position: relative;\n min-width: 150px;\n background-color: white;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n cursor: pointer;\n padding: 10px 15px;\n width: 100%;\n height: 100%;\n }\n #akkadu-interpretation-player h3{\n margin:0px;\n padding:0px;\n }\n #akkadu-interpretation-player img{\n margin:0px;\n padding:0px;\n max-width: 20px;\n margin-right:10px;\n }\n #akkadu-interpretation-player h3, #akkadu-interpretation-player .selectCustom-trigger{\n font-size: 16px;\n font-weight: 400;\n text-transform: capitalize;\n }\n #akkadu-interpretation-player .selectCustom-trigger::after {\n content: \"\u25BE\";\n color:#908f8f;\n position: absolute;\n top: 7px;\n line-height: 20px;\n right: 10px;\n }\n \n #akkadu-interpretation-player .selectCustom-trigger:hover {\n box-shadow: 0 0 4px #e9e1f8;\n }\n #akkadu-interpretation-player .selectCustom-options {\n position: absolute;\n top: 45px;\n left: 0;\n width: 100%;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n background-color: #fff;\n box-shadow: 0 0 4px #e9e1f8;\n z-index: 1;\n padding:0px;\n display: none;\n cursor: pointer;\n box-shadow: 3px 6px 7px 4px #e3e3e3;\n }\n \n #akkadu-interpretation-player .selectCustom.isActive .selectCustom-options {\n display: block;\n min-width: 260px;\n }\n \n #akkadu-interpretation-player .selectCustom-option {\n position: relative;\n padding: 10px 15px;\n display: flex;\n }\n \n #akkadu-interpretation-player .selectCustom-option:hover {\n background-color: #F2F2F2;\n }\n \n #akkadu-interpretation-player .selectCustom-option:not(:last-of-type)::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 5px;\n width: 95%;\n border-bottom: 1px solid #e0e7ef;\n }\n \n\n \n " | ||
| default: _default$2 | ||
| }, '__esModule', {value: true});var component = { | ||
| html: "\n <body>\n <div class=\"select\">\n <div class=\"selectWrapper\" >\n <div class=\"selectCustom js-selectCustom\">\n <div id=\"interpretation-player-custom-value\" class=\"selectCustom-trigger\"> <img src=''/> <h3> </h3> </div>\n <div id=\"interpretation-player-options\" class=\"selectCustom-options\">\n </div>\n </div>\n </div>\n </body>\n ", | ||
| css: "\n\n #akkadu-interpretation-player {\n display: inline-table;\n position: relative;\n font-family: \"Helvetica Neue\", Arial, sans-serif;\n }\n #akkadu-interpretation-player .select {\n position: relative;\n }\n #akkadu-interpretation-player .selectLabel {\n display: block;\n margin-bottom: 10px;\n }\n #akkadu-interpretation-player .selectWrapper {\n position: relative;\n }\n #akkadu-interpretation-player .selectCustom {\n position: relative;\n height: 100%;\n }\n #akkadu-interpretation-player .selectCustom-trigger {\n display: flex;\n position: relative;\n min-width: 150px;\n background-color: white;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n cursor: pointer;\n padding: 10px 15px;\n width: 100%;\n height: 100%;\n }\n #akkadu-interpretation-player h3{\n margin:0px;\n padding:0px;\n }\n #akkadu-interpretation-player img{\n margin:0px;\n padding:0px;\n max-width: 20px;\n margin-right:10px;\n }\n #akkadu-interpretation-player h3, #akkadu-interpretation-player .selectCustom-trigger{\n font-size: 16px;\n font-weight: 400;\n text-transform: capitalize;\n }\n #akkadu-interpretation-player .selectCustom-trigger::after {\n content: \"\u25BE\";\n color:#908f8f;\n position: absolute;\n top: 7px;\n line-height: 20px;\n right: 10px;\n }\n \n #akkadu-interpretation-player .selectCustom-trigger:hover {\n box-shadow: 0 0 4px #e9e1f8;\n }\n #akkadu-interpretation-player .selectCustom-options {\n position: absolute;\n top: 45px;\n left: 0;\n width: 100%;\n border: 1px solid #dbdbdb;\n border-radius: 5px;\n background-color: #fff;\n box-shadow: 0 0 4px #e9e1f8;\n z-index: 1;\n padding:0px;\n display: none;\n cursor: pointer;\n box-shadow: 3px 6px 7px 4px #e3e3e3;\n }\n \n #akkadu-interpretation-player .selectCustom.isActive .selectCustom-options {\n display: block;\n min-width: 260px;\n }\n \n #akkadu-interpretation-player .selectCustom-option {\n position: relative;\n padding: 10px 15px;\n display: flex;\n }\n \n #akkadu-interpretation-player .selectCustom-option:hover {\n background-color: #F2F2F2;\n }\n \n #akkadu-interpretation-player .selectCustom-option:not(:last-of-type)::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 5px;\n width: 95%;\n border-bottom: 1px solid #e0e7ef;\n }\n \n\n \n " | ||
| }; | ||
| var _default$1 = component; | ||
| var widgetComponent = /*#__PURE__*/Object.defineProperty({ | ||
| default: _default$1 | ||
| }, '__esModule', { | ||
| value: true | ||
| });var __extends = commonjsGlobal && commonjsGlobal.__extends || function () { | ||
| var _extendStatics = function extendStatics(d, b) { | ||
| _extendStatics = Object.setPrototypeOf || { | ||
| __proto__: [] | ||
| } instanceof Array && function (d, b) { | ||
| d.__proto__ = b; | ||
| } || function (d, b) { | ||
| for (var p in b) { | ||
| if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; | ||
| } | ||
| default: _default$1 | ||
| }, '__esModule', {value: true});var __extends = (commonjsGlobal && commonjsGlobal.__extends) || (function () { | ||
| var extendStatics = function (d, b) { | ||
| extendStatics = Object.setPrototypeOf || | ||
| ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || | ||
| function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; | ||
| return extendStatics(d, b); | ||
| }; | ||
| return _extendStatics(d, b); | ||
| }; | ||
| return function (d, b) { | ||
| if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
| _extendStatics(d, b); | ||
| function __() { | ||
| this.constructor = d; | ||
| } | ||
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
| }; | ||
| }(); | ||
| var __awaiter = commonjsGlobal && commonjsGlobal.__awaiter || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { | ||
| return value instanceof P ? value : new P(function (resolve) { | ||
| resolve(value); | ||
| return function (d, b) { | ||
| if (typeof b !== "function" && b !== null) | ||
| throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); | ||
| extendStatics(d, b); | ||
| function __() { this.constructor = d; } | ||
| d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); | ||
| }; | ||
| })(); | ||
| var __awaiter = (commonjsGlobal && commonjsGlobal.__awaiter) || function (thisArg, _arguments, P, generator) { | ||
| function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } | ||
| function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } | ||
| function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| } | ||
| return new (P || (P = Promise))(function (resolve, reject) { | ||
| function fulfilled(value) { | ||
| try { | ||
| step(generator.next(value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| } | ||
| function rejected(value) { | ||
| try { | ||
| step(generator["throw"](value)); | ||
| } catch (e) { | ||
| reject(e); | ||
| } | ||
| } | ||
| function step(result) { | ||
| result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); | ||
| } | ||
| step((generator = generator.apply(thisArg, _arguments || [])).next()); | ||
| }); | ||
| }; | ||
| var __generator = commonjsGlobal && commonjsGlobal.__generator || function (thisArg, body) { | ||
| var _ = { | ||
| label: 0, | ||
| sent: function sent() { | ||
| if (t[0] & 1) throw t[1]; | ||
| return t[1]; | ||
| }, | ||
| trys: [], | ||
| ops: [] | ||
| }, | ||
| f, | ||
| y, | ||
| t, | ||
| g; | ||
| return g = { | ||
| next: verb(0), | ||
| "throw": verb(1), | ||
| "return": verb(2) | ||
| }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { | ||
| return this; | ||
| }), g; | ||
| function verb(n) { | ||
| return function (v) { | ||
| return step([n, v]); | ||
| }; | ||
| } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) { | ||
| try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: | ||
| case 1: | ||
| t = op; | ||
| break; | ||
| case 4: | ||
| _.label++; | ||
| return { | ||
| value: op[1], | ||
| done: false | ||
| }; | ||
| case 5: | ||
| _.label++; | ||
| y = op[1]; | ||
| op = [0]; | ||
| continue; | ||
| case 7: | ||
| op = _.ops.pop(); | ||
| _.trys.pop(); | ||
| continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { | ||
| _ = 0; | ||
| continue; | ||
| var __generator = (commonjsGlobal && commonjsGlobal.__generator) || function (thisArg, body) { | ||
| var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; | ||
| return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; | ||
| function verb(n) { return function (v) { return step([n, v]); }; } | ||
| function step(op) { | ||
| if (f) throw new TypeError("Generator is already executing."); | ||
| while (_) try { | ||
| if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; | ||
| if (y = 0, t) op = [op[0] & 2, t.value]; | ||
| switch (op[0]) { | ||
| case 0: case 1: t = op; break; | ||
| case 4: _.label++; return { value: op[1], done: false }; | ||
| case 5: _.label++; y = op[1]; op = [0]; continue; | ||
| case 7: op = _.ops.pop(); _.trys.pop(); continue; | ||
| default: | ||
| if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } | ||
| if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } | ||
| if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } | ||
| if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); continue; | ||
| } | ||
| if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) { | ||
| _.label = op[1]; | ||
| break; | ||
| } | ||
| if (op[0] === 6 && _.label < t[1]) { | ||
| _.label = t[1]; | ||
| t = op; | ||
| break; | ||
| } | ||
| if (t && _.label < t[2]) { | ||
| _.label = t[2]; | ||
| _.ops.push(op); | ||
| break; | ||
| } | ||
| if (t[2]) _.ops.pop(); | ||
| _.trys.pop(); | ||
| continue; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { | ||
| op = [6, e]; | ||
| y = 0; | ||
| } finally { | ||
| f = t = 0; | ||
| } | ||
| op = body.call(thisArg, _); | ||
| } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } | ||
| if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; | ||
| } | ||
| if (op[0] & 5) throw op[1]; | ||
| return { | ||
| value: op[0] ? op[1] : void 0, | ||
| done: true | ||
| }; | ||
| } | ||
| }; | ||
| var defaultConsumerConfig = { | ||
| languages: [], | ||
| container: null | ||
| languages: [], | ||
| container: null, | ||
| }; | ||
| var InterpretationPlayer = | ||
| /** @class */ | ||
| function (_super) { | ||
| __extends(InterpretationPlayer, _super); | ||
| function InterpretationPlayer(config) { | ||
| var _this = _super.call(this) || this; | ||
| var apiKey = config.apiKey, | ||
| roomName = config.roomName, | ||
| container = config.container, | ||
| positionMenu = config.positionMenu; | ||
| _this.apiKey = apiKey; | ||
| _this.roomName = roomName; | ||
| _this.positionMenu = positionMenu; | ||
| _this.consumerConfig = defaultConsumerConfig; | ||
| _this.consumerConfig.container = container; | ||
| _this.consumerConfig.domContainer = document.querySelector("#" + _this.consumerConfig.container); | ||
| if (!_this.apiKey) { | ||
| throw Error('InterpretationPlayer: apiKey is undefined'); | ||
| var InterpretationPlayer = /** @class */ (function (_super) { | ||
| __extends(InterpretationPlayer, _super); | ||
| function InterpretationPlayer(config) { | ||
| var _this = _super.call(this) || this; | ||
| var apiKey = config.apiKey, roomName = config.roomName, container = config.container, positionMenu = config.positionMenu; | ||
| _this.apiKey = apiKey; | ||
| _this.roomName = roomName; | ||
| _this.positionMenu = positionMenu; | ||
| _this.consumerConfig = defaultConsumerConfig; | ||
| _this.consumerConfig.container = container; | ||
| _this.consumerConfig.domContainer = document.querySelector("#" + _this.consumerConfig.container); | ||
| if (!_this.apiKey) { | ||
| throw Error('InterpretationPlayer: apiKey is undefined'); | ||
| } | ||
| if (!_this.roomName) { | ||
| throw Error('InterpretationPlayer: roomName is undefined'); | ||
| } | ||
| if (!_this.consumerConfig.domContainer) { | ||
| throw new Error("Unable to detect stream container " + _this.consumerConfig.container + " on the DOM"); | ||
| } | ||
| return _this; | ||
| } | ||
| if (!_this.roomName) { | ||
| throw Error('InterpretationPlayer: roomName is undefined'); | ||
| } | ||
| if (!_this.consumerConfig.domContainer) { | ||
| throw new Error("Unable to detect stream container " + _this.consumerConfig.container + " on the DOM"); | ||
| } | ||
| return _this; | ||
| } | ||
| InterpretationPlayer.prototype.init = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| this.gatewayRequest(this.apiKey, this.roomName); | ||
| this.initListeners(); | ||
| this.addInterpretationPlayer(); | ||
| return [2 | ||
| /*return*/ | ||
| ]; | ||
| }); | ||
| }); | ||
| }; | ||
| InterpretationPlayer.prototype.initListeners = function () {// | ||
| }; | ||
| /** | ||
| * @description add the interpretation player to the dom "#akkadu-interpretation-player" | ||
| * @private | ||
| */ | ||
| InterpretationPlayer.prototype.addInterpretationPlayer = function () { | ||
| this.emitter.emit('interpretation-player:on-ready', { | ||
| isReady: true | ||
| }); | ||
| /** * @description widget: {html:string, css:string} */ | ||
| var widget = widgetComponent.default; // Add Html to the DOM | ||
| this.consumerConfig.domContainer.insertAdjacentHTML('beforeend', widget.html); // Add Styles to the DOM | ||
| var style = document.createElement('style'); | ||
| style.textContent = widget.css; | ||
| document.head.appendChild(style); | ||
| var styleStr = this.updateStylesWithProps(); | ||
| if (styleStr) { | ||
| var styleProp = document.createElement('style'); | ||
| styleProp.textContent = styleStr; | ||
| document.head.appendChild(styleProp); | ||
| } // Add Script to the DOM | ||
| // to update with the list of languages | ||
| var languagesList = [{ | ||
| iso: 'us', | ||
| name: 'english' | ||
| }, { | ||
| iso: 'es', | ||
| name: 'spanish' | ||
| }, { | ||
| iso: 'cn', | ||
| name: 'chinese' | ||
| }]; | ||
| var languagesOptions = document.createDocumentFragment(); | ||
| for (var i = 0; i < languagesList.length; i++) { | ||
| var newOption = void 0; | ||
| var newImage = void 0; | ||
| var newText = void 0; | ||
| newOption = document.createElement('div'); | ||
| newOption.className = 'selectCustom-option'; | ||
| newOption.id = i; | ||
| newText = document.createElement('h3'); | ||
| newText.textContent = languagesList[i].name; | ||
| newImage = document.createElement('img'); | ||
| newImage.src = this.getFlagUrl(languagesList[i].iso); | ||
| newOption.appendChild(newImage); | ||
| newOption.appendChild(newText); | ||
| languagesOptions.appendChild(newOption); | ||
| } | ||
| document.getElementById('interpretation-player-options').appendChild(languagesOptions); | ||
| var script = document.createElement('script'); | ||
| script.textContent = widget.js; | ||
| document.body.appendChild(script); // interpretation-player-custom-value | ||
| var elSelectCustom = document.getElementsByClassName("js-selectCustom")[0]; | ||
| var elSelectCustomValue = document.getElementById('interpretation-player-custom-value'); | ||
| var elSelectCustomOptions = document.getElementById('interpretation-player-options'); | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languagesList[0].name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = this.getFlagUrl(languagesList[0].iso); // Listen for each custom language option selected | ||
| var that = this; | ||
| Array.from(elSelectCustomOptions.children).forEach(function (elOption) { | ||
| elOption.addEventListener("click", function (e) { | ||
| // Update custom select text | ||
| var languageSelected; | ||
| var idOption = e.target.id; | ||
| languageSelected = languagesList[idOption]; | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languageSelected.name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = that.getFlagUrl(languageSelected.iso); | ||
| that.emitter.emit('interpretation-player:on-language-selected', { | ||
| languageSelected: languageSelected | ||
| }); // Close select | ||
| elSelectCustom.classList.remove("isActive"); | ||
| }); | ||
| }); // Toggle select on label click | ||
| elSelectCustomValue.addEventListener("click", function (e) { | ||
| elSelectCustom.classList.toggle("isActive"); | ||
| }); // close the custom select when clicking outside. | ||
| document.addEventListener("click", function (e) { | ||
| var didClickedOutside = !elSelectCustom.contains(event.target); | ||
| if (didClickedOutside) { | ||
| elSelectCustom.classList.remove("isActive"); | ||
| } | ||
| }); // prop for position box - should do an auto one first ? | ||
| // 6px -1px 8px 1px #e3e3e3 !important | ||
| // bottom: 55px; top 0px for .selectCustom-options | ||
| }; | ||
| InterpretationPlayer.prototype.updateStylesWithProps = function () { | ||
| var propsDefault = { | ||
| 'positionMenu': 'bottom' | ||
| InterpretationPlayer.prototype.init = function () { | ||
| return __awaiter(this, void 0, void 0, function () { | ||
| return __generator(this, function (_a) { | ||
| this.gatewayRequest(this.apiKey, this.roomName); | ||
| this.initListeners(); | ||
| this.addInterpretationPlayer(); | ||
| return [2 /*return*/]; | ||
| }); | ||
| }); | ||
| }; | ||
| var stylesStr; | ||
| var styles = []; | ||
| if (this.positionMenu !== propsDefault['positionMenu']) { | ||
| var style = ".selectCustom-options{\n box-shadow:6px -1px 8px 1px #e3e3e3 !important;\n top: -130px !important;\n }"; | ||
| styles.push(style); | ||
| } | ||
| stylesStr = styles.join(' '); | ||
| return stylesStr; | ||
| }; // Api to get the flags icons: https://www.countryflags.io/ | ||
| InterpretationPlayer.prototype.getFlagUrl = function (iso) { | ||
| return "https://www.countryflags.io/" + iso + "/flat/64.png"; | ||
| }; | ||
| return InterpretationPlayer; | ||
| }(lib.default); | ||
| InterpretationPlayer.prototype.initListeners = function () { | ||
| // | ||
| }; | ||
| /** | ||
| * @description add the interpretation player to the dom "#akkadu-interpretation-player" | ||
| * @private | ||
| */ | ||
| InterpretationPlayer.prototype.addInterpretationPlayer = function () { | ||
| this.emitter.emit('interpretation-player:on-ready', { isReady: true }); | ||
| /** * @description widget: {html:string, css:string} */ | ||
| var widget = widgetComponent.default; | ||
| // Add Html to the DOM | ||
| this.consumerConfig.domContainer.insertAdjacentHTML('beforeend', widget.html); | ||
| // Add Styles to the DOM | ||
| var style = document.createElement('style'); | ||
| style.textContent = widget.css; | ||
| document.head.appendChild(style); | ||
| var styleStr = this.updateStylesWithProps(); | ||
| if (styleStr) { | ||
| var styleProp = document.createElement('style'); | ||
| styleProp.textContent = styleStr; | ||
| document.head.appendChild(styleProp); | ||
| } | ||
| // Add Script to the DOM | ||
| // to update with the list of languages | ||
| var languagesList = [{ iso: 'us', name: 'english' }, { iso: 'es', name: 'spanish' }, { iso: 'cn', name: 'chinese' },]; | ||
| var languagesOptions = document.createDocumentFragment(); | ||
| for (var i = 0; i < languagesList.length; i++) { | ||
| var newOption = void 0; | ||
| var newImage = void 0; | ||
| var newText = void 0; | ||
| newOption = document.createElement('div'); | ||
| newOption.className = 'selectCustom-option'; | ||
| newOption.id = i; | ||
| newText = document.createElement('h3'); | ||
| newText.textContent = languagesList[i].name; | ||
| newImage = document.createElement('img'); | ||
| newImage.src = this.getFlagUrl(languagesList[i].iso); | ||
| newOption.appendChild(newImage); | ||
| newOption.appendChild(newText); | ||
| languagesOptions.appendChild(newOption); | ||
| } | ||
| document.getElementById('interpretation-player-options').appendChild(languagesOptions); | ||
| var script = document.createElement('script'); | ||
| script.textContent = widget.js; | ||
| document.body.appendChild(script); | ||
| // interpretation-player-custom-value | ||
| var elSelectCustom = document.getElementsByClassName("js-selectCustom")[0]; | ||
| var elSelectCustomValue = document.getElementById('interpretation-player-custom-value'); | ||
| var elSelectCustomOptions = document.getElementById('interpretation-player-options'); | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languagesList[0].name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = this.getFlagUrl(languagesList[0].iso); | ||
| // Listen for each custom language option selected | ||
| var that = this; | ||
| Array.from(elSelectCustomOptions.children).forEach(function (elOption) { | ||
| elOption.addEventListener("click", function (e) { | ||
| // Update custom select text | ||
| var languageSelected; | ||
| var idOption = e.target.id; | ||
| languageSelected = languagesList[idOption]; | ||
| elSelectCustomValue.getElementsByTagName("h3")[0].textContent = languageSelected.name; | ||
| elSelectCustomValue.getElementsByTagName("img")[0].src = that.getFlagUrl(languageSelected.iso); | ||
| that.emitter.emit('interpretation-player:on-language-selected', { languageSelected: languageSelected }); | ||
| // Close select | ||
| elSelectCustom.classList.remove("isActive"); | ||
| }); | ||
| }); | ||
| // Toggle select on label click | ||
| elSelectCustomValue.addEventListener("click", function (e) { | ||
| elSelectCustom.classList.toggle("isActive"); | ||
| }); | ||
| // close the custom select when clicking outside. | ||
| document.addEventListener("click", function (e) { | ||
| var didClickedOutside = !elSelectCustom.contains(event.target); | ||
| if (didClickedOutside) { | ||
| elSelectCustom.classList.remove("isActive"); | ||
| } | ||
| }); | ||
| // prop for position box - should do an auto one first ? | ||
| // 6px -1px 8px 1px #e3e3e3 !important | ||
| // bottom: 55px; top 0px for .selectCustom-options | ||
| }; | ||
| InterpretationPlayer.prototype.updateStylesWithProps = function () { | ||
| var propsDefault = { | ||
| 'positionMenu': 'bottom' | ||
| }; | ||
| var stylesStr; | ||
| var styles = []; | ||
| if (this.positionMenu !== propsDefault['positionMenu']) { | ||
| var style = ".selectCustom-options{\n box-shadow:6px -1px 8px 1px #e3e3e3 !important;\n top: -130px !important;\n }"; | ||
| styles.push(style); | ||
| } | ||
| stylesStr = styles.join(' '); | ||
| return stylesStr; | ||
| }; | ||
| // Api to get the flags icons: https://www.countryflags.io/ | ||
| InterpretationPlayer.prototype.getFlagUrl = function (iso) { | ||
| return "https://www.countryflags.io/" + iso + "/flat/64.png"; | ||
| }; | ||
| return InterpretationPlayer; | ||
| }(lib.default)); | ||
| var _default = InterpretationPlayer;var script = { | ||
@@ -534,4 +365,3 @@ props: { | ||
| case 6: | ||
| /* const InterpretationPlayer = (await import('@/rsi-api-widget/modules/rsi-api-interpretation-player')).default */ | ||
| //const InterpretationPlayer = (await import('@akkadu/rsi-api-interpretation-player')).default // @akkadu/rsi-api-interpretation-player //to update to @akkadu/rsi-api-interpretation-player | ||
| //const InterpretationPlayer = (await import('@akkadu/rsi-api-interpretation-player')).default // @akkadu/rsi-api-interpretation-player | ||
| config = { | ||
@@ -558,3 +388,3 @@ apiKey: _this.apiKey, | ||
| getRoomname: function getRoomname() { | ||
| return 'test'; | ||
| return 'test'; // to update later with the gateway api | ||
| }, | ||
@@ -694,3 +524,3 @@ | ||
| var __vue_module_identifier__ = "data-v-f5e1196a"; | ||
| var __vue_module_identifier__ = "data-v-e1aef9a2"; | ||
| /* functional template */ | ||
@@ -697,0 +527,0 @@ |
| { | ||
| "name": "@akkadu/rsi-api-vue", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "dist/rsi-api-vue.ssr.js", |
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.49%
61059
- Lines of code
- decreased by-18.01%
933
No dependency changes