https://github.com/WebPlatformForEmbedded/Lightning-SDK/blob/bdd0cc540f43289323ed17b19788fe9d9bd4650c/src/MediaPlayer/index.js#L336

I had to follow the "Lightning-SDK-blueprint" approach and it worked for me -
https://github.com/WebPlatformForEmbedded/Lightning-SDK-blueprint

Anyone know the difference between -
Lightning-SDK-blueprint
Lightning-SDK

It seems like lightning is caching the resized image texture and not the original so if the same image is loaded again the resizeMode calculation is off. You can recreate the issue here:
https://webplatformforembedded.github.io/Lightning/docs/renderEngine/textures/clipping

class TextureDemo extends lng.Application {
    static _template() {
        return {
            MyTexture: {
                x: 200,
                y: 250,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
                transitions: {
                    'texture.x': {duration: 4}
                }
            },
            Wrapper: {
                rect: true, w: 200, h: 200, color: 0xFFAAAAAA,
                Contain: {
                    x: w=>w/2, y: h=>h/2, mount: 0.5,
                    texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'contain', w: 200, h: 200}}
                }
            },
            Cover: {
                x: 200, y: 0,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
            }
        }
    };
    
    _init() {
        const myTexture = this.tag("MyTexture");
        myTexture.transition('texture.x').on('finish', () => {
            const current = myTexture.getSmooth('texture.x');
            myTexture.setSmooth('texture.x', current ? 0 : 50);
        })
        myTexture.setSmooth('texture.x', 50); 
        
        // This keeps the image the same as the template
        this.patch({
            Cover: {
                x: 200, y: 0,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
            }    
        });        
        
        // This does not appear as the same even though the following patch shouldn't change the image's appearance 
        setTimeout(() => {
            this.patch({
                Cover: {
                    x: 200, y: 0,
                    texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
                }    
            }); 
        }, 1000);
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new TextureDemo(options);
document.body.appendChild(app.stage.getCanvas());

From console

http://192.168.1.139:8081/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Hello,

there is some open source working example of this:
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/mediaplayer
?

Best regards
Mattia

In MediaPlayer, expose a mapping with consistent names (with $mediaPlayer prefix) of the HTMLMediaElement events.

My workaround

  addEventListeners() {
    this.tag('MediaPlayer').videoEl.addEventListener('abort', this.abort)
    this.tag('MediaPlayer').videoEl.addEventListener('canplaythrough', this.canplaythrough)
    this.tag('MediaPlayer').videoEl.addEventListener('error', this.error)
    this.tag('MediaPlayer').videoEl.addEventListener('loadeddata', this.loadeddata)
    this.tag('MediaPlayer').videoEl.addEventListener('loadstart', this.loadstart)
    this.tag('MediaPlayer').videoEl.addEventListener('play', this.play)
    this.tag('MediaPlayer').videoEl.addEventListener('playing', this.playing)
    this.tag('MediaPlayer').videoEl.addEventListener('progress', this.progress)
    this.tag('MediaPlayer').videoEl.addEventListener('timeupdate', this.timeupdate)
    this.tag('MediaPlayer').videoEl.addEventListener('volumechange', this.volumechange)
    this.tag('MediaPlayer').videoEl.addEventListener('waiting', this.waiting)
  }
  abort() {}
  canplaythrough() {}
  error() {}
  loadeddata() {}
  loadstart() {}
  play() {}
  playing() {}
  progress() {}
  timeupdate() {}
  volumechange() {}
  waiting() {}

REF: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

Can You please check and align the Events documented and effectivly fired by the MediaPlayer?
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/mediaplayer?id=events
For example I've used $mediaplayerProgress but seems that is documented ad $mediaplayerTimeupdate.
Can I suppose to use all the $mediaplayer{Event} that I find in the class in master?

It looks like Lightning-SDK is using a local lightning-web.js file instead of using the most updated version of lightning, is it correct?

Can we have lightning as a dependency instead so it would always have the latest version?

Thanks!

How To integrate Ads in Lightning is there any reference to integrate pre,mid,post roll ads

App created via CLI util with the lng create command will contain the statApp function building a launch sequence. There are two steps, getAppMetadata and getSettings that will not work without HTTP server(i.e. when launched as Tizen app up to my understanding) since those methods using the fetch API trying to read a file from local file system, which is not supported by this API: https://github.com/WebPlatformForEmbedded/Lightning-SDK/blob/15a54a612df9b7c21aa8f77ad114462d29761f54/src/startApp.js#L41-L50

Hello,
after reading the metrological documentation
 I saw that it is possible to create a remote tv controller with a smartphone, is it possible to recreate a demo with l
Lightning-SDK? if yes, how? can you suggest me where to start.

I guess is a feature but I don't see it on the documentation or it's a bug.

After creating a new application by lng create or (on the old one) removing the node_modules/wpe-lightning*, package-lock.json and doing a npm i (so the versions and modules are the latest), if you do an application with routes (and on the routes file you create put them in some order) when you do the lng dev and the application shows on the browser, you can move show a page by pressing 1, 2, 3, 4... etc (depending of the number of pages you have an the order they are on the routes file).

Is there any way to disabling this on dev? (something to put on the settings.json file).

I have take a look in the SDK at the src/Router/utils.js to see the properties that are used on the routes but I don't see anything related.

Referring to this:
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/mediaplayer?id=update-settings
which is the method where to place:
this.tag('MediaPlayer').updateSettings({consumer: this})
?
Is a https://webplatformforembedded.github.io/Lightning/docs/components/overview#component-events ?

I'm looking for a Player implementation with progressbar and media buttons, that can be manipulated from the remote. I think that Player example is insufficient. It will be great if there is working Player implementation in one of the Github projects.

• https://www.npmjs.com/package/wpe-lightning ✔️
• https://www.npmjs.com/package/wpe-lightning-sdk ❌
• https://www.npmjs.com/package/wpe-lightning-cli ❌

Some OTT apps has previews over thumbnail: when user moves focus to a tile, it's possible to see a sneak peek of a video. Seems like it's not possible to implement this feature with Lightning SDK since MediaPlayer is not able to render over UI. Here is a code example showing this issue:

import { Lightning, Utils, MediaPlayer } from 'wpe-lightning-sdk'

export default class App extends Lightning.Component {
  static _template() {
    return {
      Background: {
        rect: true,
        w: 1920,
        h: 1080,
        colorTop: 0xff0f2212,
        colorBottom: 0xff000000
      },
      MediaPlayer: {
        type: MediaPlayer
      }
    }
  }

  _init() {
    const video = this.tag('MediaPlayer')
    video.loop = true
    video.muted = true
    video.open(Utils.asset('background-loop-1080p.mp4'))
  }
}

In this example video should be rendered above the Background node however it's rendered on a very bottom of render tree.

Hi,
I tried to use the Player component from Lightning-SDK.But I got the following error on running the same.

Player.js:168 Uncaught (in promise) TypeError:
Cannot read property 'link' of undefined
at StateMachineRouter.getMediaplayerSettings (Player.js:168)
at StateMachineRouter.updateSettings (Mediaplayer.js:156)
at StateMachineRouter._handleFocusSettings (Ui.js:139)
at StateMachineRouter.updateFocusSettings (lightning-web.js:16617)
at StateMachineRouter.__updateFocus (lightning-web.js:16534)
at StateMachineRouter.updateFocusPath (lightning-web.js:16527)
at StateMachineRouter.__onStateChange (lightning-web.js:10660)
at StateMachineRouter._setState (lightning-web.js:10074)
at StateMachineRouter._focus (PlayerButton.js:42)
at StateMachineRouter.__updateFocusRec (lightning-web.js:16584)

Can you help me with this.

In Edge, not in Chrome, I get this error in console:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number
appBundle.js (332,23)

The code:

const errorMetric = (type, message, code, visible, params = {}) => {
	  params = { params, ...{ message, code, visible } }; // This line
	  sendMetric(type, 'error', params);
	};

So the app currently not working in Edge.

SDK docs linked in this repo's README points now leads to a Github Pages 404 error -- documentation is currently inaccessible: https://webplatformforembedded.github.io/Lightning-SDK/

Running lng docs from any SDK-generated projects also return a page not found error at the local address.

Following README.md and running npm run release-web I get this error:

Error: Metadata.json file can't be read: run this from a directory containing a metadata file.
    at ReadFileContext.callback (C:\Users\matti\OneDrive\Documenti\projects\Lightning-Gennaio\Lightning-SDK\node_modules\wpe-lightning-sdk\scripts\release-web.js:34:31)
    at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:239:13)
npm ERR! code ELIFECYCLE
npm ERR! errno 4294967295
npm ERR! [email protected] release-web: `node ./node_modules/wpe-lightning-sdk/scripts/release-web.js`
npm ERR! Exit status 4294967295
npm ERR!
npm ERR! Failed at the [email protected] release-web script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\matti\AppData\Roaming\npm-cache\_logs\2020-01-08T13_44_01_689Z-debug.log

Here's my package.json:

{
    "author": "Metrological",
    "name": "your-app",
    "version": "1.0.0",
    "dependencies": {
        "wpe-lightning-sdk": "git+https://github.com/WebPlatformForEmbedded/Lightning-SDK.git"
    },
    "scripts": {
        "release-web": "node ./node_modules/wpe-lightning-sdk/scripts/release-web.js",
        "release-mpkg": "node ./node_modules/wpe-lightning-sdk/scripts/release-mpkg.js",
        "upload-app": "node ./node_modules/wpe-lightning-sdk/scripts/upload-app-metrological.js"
    }
}

Is possible to have control over dimensions and positioning of the video element?

Locale usage has the following
Locale.load('static/locale/locale.json');
Locale.setLanguage('en');

Though Locale.load wont do anything until the language is set. Can you remove the need to set the locale before loading the JSON? Doesn't seem like order should matter.

Received : Uncaught (in promise) DOMException in line no: 332
canplay(args) {
this.videoEl.play();
this._fireConsumer('$mediaplayerStart', args);
}

As same as platformSettings.textureMode but for all options.
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/settings
Useful for rapid tries in development.
Regards

Hello,
in this page:
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/settings
this link is broken
https://webplatformforembedded.github.io/Lightning/docs/gettingStarted/configuration#stage-configuration-options
Lightning doc is changed from someday starting from now.
Can You please extend the DOC including the scope of the stage object?
Regards
Mattia

Can You please provide an example of installing without the use of Lightning-CLI?
For example, this should be "safe"?

"dependencies": {
        "wpe-lightning-sdk": "git+https://github.com/WebPlatformForEmbedded/Lightning-SDK.git#2.2.0"
 }

I'm unable to set the textureMode via settings.json file.It works when passed as a queryparam
{ "appSettings": { "stage": { "clearColor": "0x00000000", "useImageWorker": true }, "debug": false }, "platformSettings": { "inspector": true, "textureMode": true, "path": "./static" } }

can we play ads in media player.. if yes can u send any reference

Hi,

I'm using Cypress.io to run my end-to-end tests and would like to be able to specify a custom value for the id attribute when the inspector is enabled. Currently this is a number generated by Lightning.

Possible solution...

// support/lib/lightning-inspect.js
// add this to the Element prototype

Element.prototype.$customId = Element.prototype._customId;
  Object.defineProperty(Element.prototype, '_customId', {
    get: function () {
      return this.$customId;
    },
    set: function (v) {
      if (this.$customId !== v) {
        val(this, 'id', v, 0);
        this.$customId = v;
      }
    }
  });

// CustomComponent.js
// create a custom component with a setter for 'customId'

export default class Component extends lng.Component {
  static _template() {
    return {
      Background: {
        w: 1920, h: 1080,
        rect: true,
        color: 0xffCCFFFF,
      },
    };
  }
  set customId(v) {
    this._customId = v;
  }
}

// usage in app
// insert the custom component into the template with a custom id

import { Lightning } from 'wpe-lightning-sdk'
import CustomComponent from './CustomComponent'

export default class App extends Lightning.Component {
  static _template() {
    return {
      Foo: {
        customId: 'MY_CUSTOM_ID',
        type: CustomComponent,
      },
    }
  }
}

EDIT What would be even better is to have the custom id value integrated into lng.Component

Example issue:
https://stackoverflow.com/questions/17607612/equivalent-of-rm-and-mv-in-windows-cmd

Two different GitHub Tic-Tac-Toe examples both have the same issues.

When I issue the lng serve command, I get the following messages (see below) and the Browser simply opens an "Index of" page.

Do these two apps need updating? Or is something wrong with my installation?

The Apps:
https://github.com/mlapps/lightning-getting-started-docs
https://github.com/KadeejaBai/Lightning-Tic-Tac-Toe-MinionGame

=====================

⚠️ You are using an older version of the Lightning SDK. Please consider upgrading to the latest version. ⚠️

cp: no such file or directory: ./node_modules/wpe-lightning/dist/lightning.js
cp: no such file or directory: ./node_modules/wpe-lightning/devtools/lightning-inspect.js
cp: no such file or directory: ./node_modules/wpe-lightning-sdk/support/*

Thank you,
Howard

As a consumer of Utils.asset, I expect the function to return the absolute path to an asset no matter which route of my application I'm on.

It works if I load the application from the root, like http://example.com/ then navigate around.

But when I navigate to a route within the app, like http://example.com/settings/some-setting and refresh the page, the Util stops working as desired and all of the images error because now the asset path is https://example.com/settings/static/icons/image.png

I understand that refreshing the app like this on hardware is unlikely, but it's very important to be able to do for developer speed.

I think the culprit is this line in initUtils
https://github.com/WebPlatformForEmbedded/Lightning-SDK/blob/2e2559c79fd3672db1399d9ec9b3857bbecccde8/src/Utils/index.js#L6

It's taking the pathname /settings/some-setting, appending the config path, generating the basePath https://example.com/settings/static

One expects it to be an absolute https://example.com/static no matter which route of the application I load.

Here:
https://webplatformforembedded.github.io/Lightning-SDK/#/
GitHub link on top-right is broken.
Kind regards

I have some query params that I save in localStorage required to start the app. I can't Launch the app without them, and I can't use Storage without first calling Launch. These need to be decoupled.

From console:

In my src I've implemented the mthod playPause() only in one method, something like this:

import { Lightning, MediaPlayer } from 'wpe-lightning-sdk'
import PlayerControls from './PlayerControls'
import PlayerProgress from './PlayerProgress'
export default class Player extends Lightning.Component {
  static _template() {
    return {
      Controls: {
        x: 99,
        y: 0,
        type: PlayerControls // some custom class for Player Controls
      },
      Progress: {
        x: 99,
        y: 970,
        type: PlayerProgress // some custom class for Player Progress bar
      },
      MediaPlayer: {
        type: MediaPlayer
      }
    }
  }
  _firstActive() {
    this.tag('MediaPlayer').updateSettings({
      consumer: this
    })
    this.tag('MediaPlayer').open('http://techslides.com/demos/sample-videos/small.mp4')
    this._setState('Controls')
  }
  $playPause() {
    this.tag('MediaPlayer').playPause()
  }
  $reload() {
    this.tag('MediaPlayer').reload()
    this.tag('MediaPlayer').open('http://techslides.com/demos/sample-videos/small.mp4')
  }
  static _states() {
    return [
      class Controls extends this {
        _getFocused() {
          return this.tag('Controls')
        }
      }
    ]
  }
}

Fired by an Enter handler so I suppose that the user had interact with the document.

import PlayerControl from './PlayerControl'
export default class PlayPause extends PlayerControl {
  static _template() {
    return {
      text: {
        text: 'Play Pause'
      }
    }
  }
  _handleEnter() {
    this.fireAncestors('$playPause')
  }
}

So seems that the error comes from the library. Is any way to solve it in my code with some practies?

Additional info

• The error is present ONLY if I refresh the browser.
• The error is not present if the browser is launched by the automatic launch by VS code using lng dev by Lightning CLI
• If of course I use lng dev, the video Plays 1 time at the beginning and I do not need this behavioru, I need to play just with my controls from the user

Hi,

I was wondering if there was any plans to implement support for HTTP Live Streams for the Media Player? Normally this has to be done using an external library for something like Chrome (HLS.js for example), if the above isn't the case is there a recommended way to access the Video tag itself and call functions on it bypassing Lightning's abstraction behind the MediaPlayer type, in order to use something like HLS.js?

Cheers

Can I add my custom settings like colors, contants, etc?

Referring this:
https://webplatformforembedded.github.io/Lightning-SDK/#/plugins/mediaplayer?id=open
there are some specifics for videoUrl?
Does it have to serve a file? What extensions? What kind of resource?

The html body element style not able to update through lighting framework.
we need to make html body colour transparent but after build the body color is black in startApp.js.
is there any solution for this issue?

I'm trying to apply a rounded rectangle shader to a container but it seems to be recursively passing the shader to its children giving everything rounded corners rather than just the container.

I can see the benefit of this approach in some use cases (like grayscale, blur etc) but sometimes this is undesirable behaviour, for example;

import { Lightning } from 'wpe-lightning-sdk'

export default class App extends Lightning.Component {
  static _template() {
    return {
      Boxes: {
        x: 760, y: 340,
        w: 400, h: 400,
        shader: {
          type: Lightning.shaders.RoundedRectangle,
          radius: 20,
        },
      },
    }
  }

  _init() {
    this._boxes = this.tag('Boxes')
    this._boxes.children = [
      { w: 200, h: 200, rect: true, color: 0xffFF0000 },
      { x: 200, w: 200, h: 200, rect: true, color: 0xff00FF00 },
      { y: 200, w: 200, h: 200, rect: true, color: 0xff0000FF },
      { x: 200, y: 200, w: 200, h: 200, rect: true, color: 0xffFFFF00 },
    ]
  }
}

I've tried to use shader: null on child components but this prevents any shader being applied (even to the parent). Is there a way to achieve the expected resulted above or is this not currently supported?

EDIT I'm using Lightning-CLI 1.5.0

Thanks

I got this error using --experimental-modules flag.

$ node -v
v12.14.1

Example:

$ npm test

> [email protected] test C:\Users\matti\OneDrive\Documenti\projects\GitLab\tic-tac-toe-client
> mocha --experimental-modules

(node:12496) ExperimentalWarning: The ESM module loader is experimental.

file:///C:/Users/matti/OneDrive/Documenti/projects/GitLab/tic-tac-toe-client/test/test.mjs:2
import { Lightning } from 'wpe-lightning-sdk';
         ^^^^^^^^^
SyntaxError: The requested module 'wpe-lightning-sdk' does not provide an export named 'Lightning'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:91:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:106:20)
    at async Loader.import (internal/modules/esm/loader.js:132:24)
    at async Object.exports.loadFilesAsync (C:\Users\matti\OneDrive\Documenti\projects\GitLab\tic-tac-toe-client\node_modules\mocha\lib\esm-utils.js:28:20)
    at async singleRun (C:\Users\matti\OneDrive\Documenti\projects\GitLab\tic-tac-toe-client\node_modules\mocha\lib\cli\run-helpers.js:107:3)
    at async exports.runMocha (C:\Users\matti\OneDrive\Documenti\projects\GitLab\tic-tac-toe-client\node_modules\mocha\lib\cli\run-helpers.js:144:5)
    at async Object.exports.handler (C:\Users\matti\OneDrive\Documenti\projects\GitLab\tic-tac-toe-client\node_modules\mocha\lib\cli\run.js:306:5)
npm ERR! Test failed.  See above for more details.

This causes issues when I'm trying to import my modules in mocha test like https://github.com/WebPlatformForEmbedded/Lightning do.

I'm looking for dash support for mediaplayer. Is it possible to use dash.js with a mediaplayer?

index.js

import "core-js/stable";
import "regenerator-runtime/runtime";
import DevLauncher from "./node_modules/wpe-lightning-sdk/DevLauncher.js";
import App from "./src/App.js";
const launcher = new DevLauncher();
launcher.launch(App, {
    canvas2d: true
}, {useInspector: false})

console error

Uncaught (in promise) Error: This browser does not support webGL.
    at WebPlatform.createWebGLContext (index.es5.js:27056)
    at new Stage (index.es5.js:30166)
    at Ui.Application (index.es5.js:30603)
    at new Ui (index.es5.js:36431)
    at DevLauncher.<anonymous> (index.es5.js:39733)

Are options passed right?
There are others configurations about this context to solve the issue?
Regards

Hi guys,
I'm looking for a way to reuse our Lightening app in a browser, making it mouse accessible. Can you give me a hint. Is it possible to add on click event handlers to the UI elements and if so, how to achieve it?

Following the readme and Try to lunch a Hello Word App it shows well in Chrome but white screen in Edge, without errors in console.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <script type="module">
        import DevLauncher from "./node_modules/wpe-lightning-sdk/DevLauncher.js";
        import App from "./src/App.js";
    
        const launcher = new DevLauncher();
        launcher.launch(App, {debug: true}, {useInspector: false})
    </script>
</body>
</html>

App.js

export default class MyApp extends ux.App {
    static _template() {
        return {
            Text: {text: {text: "hello world"}}
        }
    }
}

Screenshot from Chrome

Screenshot from Edge 44.18362.1.0

One of the set-top-boxes we have does not support WebGL. The Wuf.js library however forces this, and does not do anything with the canvas2d feature toggle as defined in the Lightning documentation (https://webplatformforembedded.github.io/Lightning/docs/gettingStarted/configuration). Are there plans to also support non-WebGL rendering, or will this SDK always require WebGL?

is there any option like forward and backward for video.

Error:

0: Object doesn't support property or method 'APP_com_kineton_app_lightning_cli'
startApp.js (26,6)

Code:

const app = window[appMetadata.id](
        settings.appSettings,
        settings.platformSettings,
        settings.appData
      )

Browser: Microsoft Edge 44.18362.1.0
Working in Chrome.
After a check, I've found that my appMetadata.id that is APP_com_kineton_app_lightning_cli is not defined in window in Edge but it is in Chrome.

https://github.com/WebPlatformForEmbedded/Lightning-SDK/blob/bdd0cc540f43289323ed17b19788fe9d9bd4650c/src/Lightning/index.js#L1

In VS Code with CTRL + click You can navigate through classes and imports.
This code prevents to inspect Lightning.Component that can be useful for understanding what methods are available.
Where is lng? Who puts it in windows?