ScreenCloud apps SDK

This npm module contain reusable scripts for apps.

DEPRECATED

• dateConvertor ― use instead special npm packages or new Date() constructor
• dateTimeHelper ― use instead special npm packages or new Date() constructor
• query.params ― use instead npm package
• geocodeHelper ― not any relations in current apps, so it deprecated
• promiseUtil ― not any relations in current apps, so it deprecated
• QRCode ― not any relations in current apps, so it deprecated.
• scLog ― it's bad practice and deprecated.
• localCache ― deprecated after refactoring ThemeManager.

Get started

1. npm install --save @screencloud/screencloud-apps-sdk
2. Import modules

• triggerEvents
• logger
• ThemeComponent
• dataFetcher
• dataLoader
• animationControlHelper
• checkScreenLayout
• deviceDetection
• colorHelper
• urlHelper
• youtubeHelper

triggerEvents

Main module with emitters to sending events to the parent frame from app.

import { triggerEvents } from "@screencloud/screencloud-apps-sdk"

// ... //
  componentDidMount() {
    triggerEvents.on("start", () => triggerEvents.sendAppStatusStarted());
  }

  ...

  onSubmit(login, password) {
    if (login && password) {
      const jwt = encrypt({
        login: login,
        password: password
      })
      triggerEvents.callbackSuccess(jwt);
    } else {
      triggerEvents.callbackError(new Error("Login failed"))
    }
  }
// ... //

List of methods:

• sendAppStatusPreloaded()
• sendAppStatusStarted()
• sendAppStatusFinished()
• sendAppError(data)
• callbackSuccess(data) // to send data to ScreenCloud (for example after login)
• callbackError(data) // to send error to ScreenCloud (for example after login)

logger (beta)

import { logger } from "@screencloud/screencloud-apps-sdk"

if (process.env.NODE_ENV === 'development') {
  logger.init();
}

List of methods:

• init() // initialize the rendering logs on window

ThemeComponent

import { ThemeComponent } from "@screencloud/screencloud-apps-sdk"
import queryString from 'query-string'

const parsedQuery = queryString.parse(window.location.search)

// ... //
constructor(props) {
    super(props);
    this.state = {
      theme: parsedQuery.theme
    }
}

getThemeData(data) {
  console.log(`Theme object: ${data}`)
}

render() {
  return (
    <ThemeComponent theme={this.state.theme} getThemeDataObject={this.getThemeData}>
      /* your application code */
    </ThemeComponent>
  )
}
// ... //

List of properties:

• theme // themeID string

List of methods:

• getThemeDataObject // return {"colorBgPrimary":"#feb62c","colorTextBody":"#1f1f1f","colorTextHeading":"#fb0004","colorTextLink":"#ff3a00","fontBody":"Oswald","fontHeading":"Fjalla One","fontUrlBody":"","fontUrlHeading":"","id":"...","name":"Kodak"} or {}

animationControlHelper (will be DEPRECATED)

On/off animation.css. Will be deprecated because current functuonality affect only to old apps in monorepo.

import { animationControlHelper } from "@screencloud/screencloud-apps-sdk"

// ... //
  componentDidMount() {
      animationControlHelper.enableAnimation();
      // animationControlHelper.disableAnimation();
  }
// ... //

List of methods:

• enableAnimation() // remove disable-animated class from body element
• disableAnimation() // add disable-animated class from body element

checkScreenLayout (will be DEPRECATED)

Functionality to get viewport layout type.

import { checkScreenLayout } from "@screencloud/screencloud-apps-sdk"

// ... //
  const layoutClass = checkScreenLayout();
// ... //

List of methods:

• getLayout(forcedLayoutClass?) // get layout type; set up layout name as class to body element (WILL BE DEPRECATED WITH MONOREPO)

List of properties:

• LAYOUT_CLASS_PORTRAIT // "portrait"
• LAYOUT_CLASS_LANDSCAPE // "landscape"
• LAYOUT_CLASS_TICKERTAPE // "tickertape"
• LAYOUT_CLASS_SUPERWIDE // "superwide"
• LAYOUT_CLASS_SQUARE // "square"

deviceDetection (will be DEPRECATED)

Functionality to detect the device type/model. Will be deprecated, please use device-detector npm package instead.

import { deviceDetection } from "@screencloud/screencloud-apps-sdk"

deviceDetection // 'iOS', 'Android', 'Windows Phone', or 'unknown'

colorHelper (will be DEPRECATED)

Module with methods for easy work with colors. (will be deprecated, use third party modules instead)

import { colorHelper } from "@screencloud/screencloud-apps-sdk"

const redHEX = "#ff0000"
const darkRedHEX = colorHelper.colorLuminance(redHEX, -0.2); // #cc0000
const darkOrLight = colorHelper.checkContrast(redHEX); // dark

List of methods:

• colorLuminance(hex, luminDiff)
• checkContrast(hex)

urlHelper (will be DEPRECATED)

Module with methods for easy work with colors. (will be deprecated)

import { urlHelper } from "@screencloud/screencloud-apps-sdk"

// ... //
  const url = urlHelper.cleanIframeUrl("<iframe src="https://google.com"></iframe>"); // "https://google.com"
// ... //

List of methods:

• cleanIframeUrl(iframeHTMLString)

youtubeHelper (will be DEPRECATED)

Module with methods for easy work with colors. (will be deprecated)

import { youtubeHelper } from "@screencloud/screencloud-apps-sdk"

// ... //
  youtubeHelper.extractYoutTubeIds(messageText)
// ... //

List of methods:

• extractYoutTubeIds(string)
• isContainYouTubeURL(string) // true|false
• isValidYouTubeURL(url) // true|false