evmux-app-framework 0.0.13 → 0.0.15

package/package.json

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

package/src/AppsObserver/AppsObserver.js

@@ -6,6 +6,7 @@ import PostMessageManager from '../PostMessageManager/PostMessageManager';
 import appsDataManager from '../AppsDataManager/AppsDataManager';
 import AppsObserverCommentsHandler from './AppsObserverCommentsHandler'
 import AppsObserverSceneHandler from './AppsObserverSceneHandler'
+import AppsObserverAppsHandler from './AppsObserverAppsHandler'
 
 import { availableEvents } from '../EvmuxAppsApi/EvmuxAppsApi'
 
@@ -18,6 +19,7 @@ export const availableRequests = {
     unregisterEvent: "unregisterEvent",
     EvEvent: "EvEvent",
     raiseAppMessagingEvent: "raiseAppMessagingEvent",
+    raiseExternalAppMessagingEvent: "raiseExternalAppMessagingEvent",    
   }
 
 
@@ -41,6 +43,9 @@ let createEventResultObject = (requestName, eventName, result) => {
         this._messagesEventHandlers = new pubSub()
         this._eventHandler = new pubSub()
         this._requestHandlers = []
+
+        // add requestHandler which are the same on editorVue
+        this._requestHandlers.push(new AppsObserverAppsHandler(app))
     }
      
     init(app) {

package/src/AppsObserver/AppsObserverAppsHandler.js

@@ -0,0 +1,26 @@
+import AppsObserverRequestHandlerBase from './AppsObserverRequestHandlerBase'
+
+import AppsObserver, { availableRequests }  from './AppsObserver'
+   export default class AppsObserverAppsHandler extends AppsObserverRequestHandlerBase  {
+    constructor(){
+        super()
+    }
+  
+    canHandleRequest(requestObj)
+    {
+        const supportedRequests = [availableRequests.raiseExternalAppMessagingEvent];
+        return supportedRequests.includes(requestObj.request);
+    }
+     
+    async raiseAppMessagingEvent(requestObj) {
+        AppsObserver._sendPostMessageToUsrAppInstancesComponents(requestObj.data.targetUserAppInstanceId, requestObj.data.data);
+        return null;
+    }
+     
+    async handleRequest(requestObj)
+    {
+        return this[requestObj.request](requestObj);
+    }
+      
+      
+ }

package/src/EvmuxAppsApi/EvmuxAppsApi.js

@@ -10,7 +10,12 @@ export const availableEvents = {
   viewerCountChanged: "viewerCountChanged",
   keystroke: "keystroke",
   comments: "comments",
-  appMessaging: "appMessaging"
+  appMessaging: "appMessaging",
+  externalAppMessaging: "externalAppMessaging"
+}
+
+export const layerTypes = {
+    userApp: "userApp"
 }
 
 export default class EvmuxAppsApi {

package/src/EvmuxAppsApi/EvmuxAppsApiApps.js

@@ -0,0 +1,22 @@
+import { availableRequests } from '../AppsObserver/AppsObserver.js'
+export default class EvmuxAppsApiApps {
+  
+  constructor(evmuxAppsApi) {
+    this.evmuxAppsApi = evmuxAppsApi;
+  }
+
+  sendMessageToApp(userAppInstanceId, dataObject= {}) {
+        let requestObj = {
+          request: availableRequests.raiseExternalAppMessagingEvent,
+          userAppInstanceId: this.evmuxAppsApi._userAppInstanceId,
+          componentId: this.evmuxAppsApi._componentId,
+          data: {
+            targetUserAppInstanceId: userAppInstanceId,
+            data: dataObject
+          }
+        } 
+
+        return this._postMessageManager.sendRequest(requestObj);
+  }
+
+}

package/src/style/evmuxUiStyles.css

@@ -0,0 +1,450 @@
+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

@@ -0,0 +1,44 @@
+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'})],
+};