evmux-app-framework 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evmux-app-framework",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/AppsObserver/AppsObserver.js

@@ -24,7 +24,8 @@ export const availableRequests = {
     raiseFastAccessButtonEvent: "raiseFastAccessButtonEvent",
     setFastActionButtons: "setFastActionButtons",
     createNewLayer: "createNewLayer",
-    removeSizeCatcher: "removeSizeCatcher"
+    removeSizeCatcher: "removeSizeCatcher",
+    openSideBarSettings: "openSideBarSettings"
 
   }
 

package/src/AppsObserver/AppsObserverAppsHandler.js

@@ -10,7 +10,7 @@ import { availableEvents } from '../EvmuxAppsApi/EvmuxAppsApi'
   
     canHandleRequest(requestObj)
     {
-        const supportedRequests = [availableRequests.raiseExternalAppMessagingEvent, availableRequests.setFastActionButtons];
+        const supportedRequests = [availableRequests.raiseExternalAppMessagingEvent, availableRequests.setFastActionButtons, availableRequests.openSideBarSettings];
         return supportedRequests.includes(requestObj.request);
     }
      
@@ -22,6 +22,10 @@ import { availableEvents } from '../EvmuxAppsApi/EvmuxAppsApi'
     async setFastActionButtons() {
         return true;
     }
+       
+    async openSideBarSettings() {
+        return true;
+    }
      
     async handleRequest(requestObj)
     {

package/src/AppsObserver/AppsObserverCommentsHandler.js

@@ -12,7 +12,7 @@ import AppsObserverRequestHandlerBase from './AppsObserverRequestHandlerBase'
      
     async handleRequest(requestObj)
     {
-        return [{
+        return window.mockComments || [{
             id: '1fsdf',
             title: 'Sample comment',
             text: 'Comments will appear here once the broadcast starts.',

package/src/EvmuxAppsApi/EvmuxAppsApiApps.js

@@ -20,12 +20,26 @@ export default class EvmuxAppsApiApps {
   }
 
 
-  async setFastActionButtons(buttonsArray = []) {
+  async setFastActionButtons(buttonsArray = [], parameters = { groupName: "", groupIcon: null }) {
     let requestObj = {
       request: availableRequests.setFastActionButtons,
       userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
       componentId: this.evmuxAppsApi._componentId,
-      data: buttonsArray
+      data: {
+        buttonsArray,
+        parameters
+      }
+    }
+
+    return this.evmuxAppsApi._postMessageManager.sendRequestAsync(requestObj);
+  }
+
+  async openSideBarSettings() {
+    let requestObj = {
+      request: availableRequests.openSideBarSettings,
+      userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
+      componentId: this.evmuxAppsApi._componentId,
+      data: {}
     } 
     return this.evmuxAppsApi._postMessageManager.sendRequestAsync(requestObj);
   }

package/src/style/evmuxUiStyles.css

@@ -1,450 +0,0 @@
-body.light {background-color: #fff;}
-body.dark {background-color: #2f353f;}
-
-.app_settings_title {
-    font-weight: 500;
-    font-size: 14px;
-    margin-bottom: 15px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-.light .app_settings_title {color: #676778;}
-.dark .app_settings_title {color: #fff;}
-.app_settings_item + .app_settings_title {margin-top: 15px;}
-
-
-
-
-.app_settings_item {
-    display: flex;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-.app_settings_item + .app_settings_item {
-    border-top-width: 1px;
-    border-top-style: solid;
-    margin-top: 6px;
-    padding-top: 6px;
-}
-.light .app_settings_item + .app_settings_item {border-top-color: #efeff7;}
-.dark .app_settings_item + .app_settings_item {border-top-color: #383e4c;}
-
-.app_settings_item_head {
-    display: flex;
-    align-items: center;
-    /*overflow: hidden;*/
-    flex: 0 0 120px;
-    padding-right: 4px;
-}
-.app_settings_item_title {
-    word-break: break-word;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 16px;
-    flex: 1;
-    overflow: hidden;
-}
-.light .app_settings_item_title {color: #676778;}
-.dark .app_settings_item_title {color: #fff;}
-
-.question_mark {width: 16px; flex: 0 0 16px; margin-right: 4px; position: relative;}
-.question_mark svg {width: 16px; display: block; cursor: pointer;}
-.question_mark .tool_tip {
-    display: none;
-    position: absolute;
-    bottom: calc(100% + 10px);
-    left: 0;
-    min-width: 40px;
-    max-width: 200px;
-    padding: 12px;
-    border-radius: 10px;
-    font-weight: 500;
-    font-size: 13px;
-    line-height: 18px;
-    text-align: center;
-    z-index: 16;
-    pointer-events: none;
-    border-width: 1px;
-    border-style: solid;
-    word-break: break-word;
-    width: max-content;
-}
-.question_mark:hover .tool_tip.bottom {
-    bottom: auto;
-    top: calc(100% + 10px);
-}
-.question_mark:hover .tool_tip {
-    display: block;
-}
-.light .question_mark path {fill: #676778;}
-.dark .question_mark path {fill: #fff;}
-.light .question_mark .tool_tip {
-    border-color: #d5d5e5;
-    background-color: #fff;
-    color: #676778;
-    box-shadow: 10px 4px 6px 0 rgba(0, 0, 0, 0.06);
-}
-.dark .question_mark .tool_tip {
-    background-color: #1E222B;
-    border-color: #383e4c;
-    box-shadow: 0 0 11px 4px rgba(0, 0, 0, 0.15);
-    color: #fff;
-}
-
-.app_settings_item_body {
-    flex: 1;
-    overflow: hidden;
-}
-
-.app_settings_item_text_input {
-    display: block;
-    width: 100%;
-    font-weight: 500;
-    font-size: 13px;
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 10px;
-    height: 36px;
-    padding: 0 10px;
-    outline: none;
-    box-shadow: none;
-    overflow: hidden;
-    background: transparent;
-}
-.light .app_settings_item_text_input {color: #676778; border-color: #dcdce8;}
-.dark .app_settings_item_text_input {color: #fff; border-color: #505a68;}
-.light .app_settings_item_text_input:active,
-.light .app_settings_item_text_input:focus,
-.light .app_settings_item_text_input:active:focus,
-.dark .app_settings_item_text_input:active,
-.dark .app_settings_item_text_input:focus,
-.dark .app_settings_item_text_input:active:focus {border-color: #0096ff;}
-@media (max-width: 1400px), (max-height: 780px) {
-    .app_settings_item_text_input {
-        height: 30px;
-        font-size: 11px;
-    }
-}
-
-
-.app_settings_item_select {
-    cursor: pointer;
-    border-width: 1px;
-    border-style: solid;
-    height: 40px;
-    border-radius: 10px;
-    font-weight: 400;
-    font-size: 14px;
-    padding: 0 12px;
-    width: 100%;
-}
-.light .app_settings_item_select {
-    border-color: #e3e3ec;
-    color: #676778;
-}
-.dark .app_settings_item_select {
-    border-color: #2f353f;
-    color: #fff;
-    background-color: #383e4c;
-}
-@media (max-width: 1400px), (max-height: 780px) {
-    .app_settings_item_select {
-        height: 30px;
-        font-size: 11px;
-    }
-}
-
-
-
-.app_settings_item_file_chooser {
-    display: flex;
-    align-items: center;
-}
-.app_settings_item_file_chooser_input_block {
-    width: 94px;
-    height: 52px;
-    border-radius: 8px;
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    position: relative;
-}
-.light .app_settings_item_file_chooser_input_block {border-color: #efeff7;}
-.dark .app_settings_item_file_chooser_input_block {border-color: #383e4c;}
-
-.app_settings_item_file_chooser_input_block img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 94/52;
-    object-fit: contain;
-}
-.app_settings_item_file_chooser_input_block input {
-    position: absolute;
-    z-index: 2;
-    display: block;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-    opacity: 0;
-}
-.app_settings_item_file_chooser_input_block input::file-selector-button {
-    display: none;
-}
-
-.app_settings_item_file_chooser_no_image {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: calc(100% - 2px);
-    height: calc(100% - 2px);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.app_settings_item_file_chooser_no_image svg {
-    width: 20px;
-}
-.light .app_settings_item_file_chooser_no_image svg path {
-    fill: #676778;
-}
-.dark .app_settings_item_file_chooser_no_image svg path {
-    fill: #fff;
-}
-
-.light .app_settings_item_file_chooser_no_image {background-color: #efeff7;}
-.dark .app_settings_item_file_chooser_no_image {background-color: #383e4c;}
-
-
-
-.app_settings_item_color {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-}
-.app_settings_item_color svg {
-    width: 20px;
-    margin-right: 8px;
-}
-.light .app_settings_item_color_preview_border {fill: #e3e3ec;}
-.dark .app_settings_item_color_preview_border {fill: #505a68;}
-
-.app_settings_item_color_code {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    overflow: hidden;
-    width: 110px;
-    border-radius: 4px;
-}
-.light .app_settings_item_color_code {color: #676778; background-color: #f0f0f7;}
-.dark .app_settings_item_color_code {color: #fff; background-color: #383e4c;}
-.app_settings_item_color_code:before {
-    content: '#';
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    width: 24px;
-    height: 100%;
-    margin-right: 8px;
-    flex: 0 0 24px;
-}
-.light .app_settings_item_color_code:before {background-color: #d6d6e5;}
-.dark .app_settings_item_color_code:before {background-color: #505a68;}
-
-.app_settings_item_color_code_text {
-    font-size: 14px;
-    line-height: 16px;
-    font-weight: 400;
-}
-.color_picker_holder {
-    flex: 0 0 100%;
-    padding-top: 10px;
-}
-.color_picker_holder .alwan {
-    border-radius: 12px;
-    overflow: hidden;
-}
-.light .color_picker_holder .alwan {
-    background-color: #fff;
-    border-color: #D6D6E5;
-}
-.dark .color_picker_holder .alwan {
-    background-color: #2f353f;
-    border-color: #383e4c;
-}
-
-.color_picker_holder .alwan .alwan__slider::-webkit-slider-runnable-track {
-    height: 10px;
-    border-radius: 5px;
-}
-.color_picker_holder .alwan .alwan__slider::-webkit-slider-thumb {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    border: none;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-    transform: translateY(2px);
-}
-.color_picker_holder .alwan .alwan__slider--alpha {
-    margin-top: 8px;
-}
-.color_picker_holder .alwan .alwan__preview {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-}
-
-.light .alwan__container {border-top-color: #D6D6E5;}
-.dark .alwan__container {border-top-color: #383e4c;}
-
-.light .color_picker_holder .alwan .alwan__inputs label {color: #676778;}
-.dark .color_picker_holder .alwan .alwan__inputs label {color: #fff;}
-
-.color_picker_holder .alwan .alwan__input {
-    padding: 0;
-    height: 24px;
-    border-radius: 8px;
-    font-size: 12px;
-    font-weight: 500;
-    background: transparent;
-}
-.light .color_picker_holder .alwan .alwan__input {border-color: #D6D6E5; color: #676778;}
-.dark .color_picker_holder .alwan .alwan__input {border-color: #383e4c; color: #fff;}
-
-
-
-
-
-
-
-
-
-.btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px;
-    height: 40px;
-    font-weight: 500;
-    font-size: 14px;
-    cursor: pointer;
-    border: none;
-    box-shadow: none;
-    text-align: center;
-    background: transparent;
-}
-.btn:not(.btn_icon) {
-    min-width: 94px;
-    padding: 0 20px;
-}
-.btn_icon {
-    width: 40px;
-}
-.btn_icon svg {
-    width: 20px;
-}
-.btn_icon svg path {}
-
-.light .btn.primary,
-.dark .btn.primary {
-    color: #fff;
-    background-color: #0096ff;
-}
-
-.light .btn.delete svg path,
-.dark .btn.delete svg path {fill: #676778;}
-.light .btn.primary svg path,
-.dark .btn.primary svg path {fill: #fff;}
-
-.light .btn.delete:hover {background-color: #efced2;}
-.dark .btn.delete:hover {background-color: #342832;}
-.light .btn.delete:hover svg path,
-.dark .btn.delete:hover svg path {fill: #ff616d;}
-
-@media (max-width: 1400px), (max-height: 780px) {
-    body:not(.mobile) .btn:not(.btn_icon) {
-        height: 30px;
-        padding: 0 15px;
-        font-size: 11px;
-    }
-}
-
-
-
-
-
-
-
-
-
-
-.scroll_bar_style::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-}
-.scroll_bar_style::-webkit-scrollbar-thumb {
-    border-radius: 1.5px;
-    border: none;
-}
-.scroll_bar_style::-webkit-scrollbar-track {
-    background-color: rgba(255, 255, 255, 0.015);
-}
-.scroll_bar_style::-webkit-scrollbar {
-    background-color: rgba(255, 255, 255, 0.015);
-}
-.scroll_bar_style::-webkit-scrollbar-thumb {
-    background-color: rgba(204, 204, 204, 0.9);
-}
-.scroll_bar_style.hidden_scroll {
-    padding-right: 4px;
-    pointer-events: none;
-}
-.scroll_bar_style.hidden_scroll::-webkit-scrollbar {
-    width: 0px;
-    height: 0px;
-}
-.scroll_bar_style.hidden_scroll::-webkit-scrollbar-thumb {
-    border-radius: 0px;
-    border: none;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

package/webpack.config.js

@@ -1,44 +0,0 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const path = require("path");
-
-
-module.exports = {
-
-  entry: {
-    'evmuxUiStylesCss': './src/style/evmuxUiStyles.css',
-    
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-   
-    publicPath: "",
-    // the output bundle
-    //filename: '[name].[hash].js',
-    // filename: '[name].js',
-    // chunkFilename: "[name].[hash].bundle.js",
-    // saves the files into the dist/static folder
-    // path: path.resolve(__dirname, '/home/ubuntu/CONSOLE/www/editorevmux/public/producerApp'),
-    // path: path.resolve(__dirname, 'dist'),
-    // set static as src="static/main.js as relative path
-
-    // publicPath: '', // ROMA!!! - if need to run broadcast local
-  },
-  module: {
-
-
-    rules: [
-
-      {
-        test: /\.(scss|css)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-        ],
-      },
-
-
-    ],
-  },
-
-  plugins: [new MiniCssExtractPlugin({  filename: '[name].css'})],
-};