I'm wondering do you have a support or version atop of VUE / VUEX / VUE-Router ?

Category

[ ] Rendering issue
[ ] Crash/Exception
[ ] Console error or warning
[x] CLI issue
[ ] Other

Description

I am getting Unknown browser query dead when i am doing enact pack-p

$ enact pack -p
Creating an optimized production build...

Failed to compile.

Unknown browser query `dead`

Category

• Rendering issue

Description

When the standalone unstyled ui Library is added to the non-enact external project, the components do not work as expected.
I'm trying to use the ProgressBar component of uiLibrary inside my project. Upon rendering, the component does not inject custom classes to the component.

Environment

Enact version:
"@enact/ui": "^3.2.5"

Reproduction Code

import css from "./App.module.less";
<ProgressBar
progress={0.5}
backgroundProgress={0.75}
css={{
progressBar: css.customProgressBar,
fill: css.customProgressBarFill
}}
/>

Comments and Screen Shots

It renders as below.

<div role="progressbar" class="progressBar horizontal" style="--ui-progressbar-proportion-start-background:0; --ui-progressbar-proportion-end-background:0.75; --ui-progressbar-proportion-start:0; --ui-progressbar-proportion-end:0.5;"><div><div></div><div></div></div></div>

The focus of the 2.0 release is a generalization of the components built within 1.x to enable us to create new experiences for other platforms beyond the 10 foot experience. We also want to improve the overall developer experience of using Enact

Features

• Expanding @enact/ui to provide generalized, unstyled base components on which we can build themed versions for difference experiences
• Expand and improve our developer tooling provided by @enact/cli
• Add touch and gesture support
• Add multi-platform support beyond webOS
• Add components to support webOS digital signage products
• Add support for voice control of components

Quality

• Improve the integration of @enact/i18n with @enact/moonstone by supporting asynchronous retrieval of internationalization resources
• Improve component-level render and update performance across the framework
• Revisit our unit test architecture to provide better coverage and faster run times

how make a build that have filename with hash?

Hi,
I need to add a video player to my application.I integrated moonstone player for the same.But video is not getting played when I tested on Tizen Tv.But I got it working on emulator though.How can I fix this?

 <VideoPlayer ref={this.setVideoRef} spotlightDisabled={false} className={css.player + ' enact-fit'} style ={{width:'auto'}}>
  <Video autoPlay>
   <source src={source} type="video/mp4" style ={{width:'auto'}} />
   </Video>
  </VideoPlayer>

Category

• New component
• New feature for existing component
• Modification of existing component or feature
• Other

Description

For the Icon documentation there is a list of Icons , however it is hard to find what we are looking for if there is no actually drawing of the icons

Alternative Approaches

Add an image for each icon how it will look .

Comments

Category

[ ] Rendering issue

Description

[//]: # Application works fine and smooth in web browser but when build is deployed to TV, focus to a component and performance of application is very slow as compared to web browser.
Is there any version dependency for the above mentioned issue?

Environment

[//]: "@enact/core": "^2.5.1",
"@enact/i18n": "^2.5.1",
"@enact/moonstone": "^2.5.1",
"@enact/spotlight": "^2.0.0",
"@enact/ui": "^2.5.1"

Enact version: 1.2.0
NPM version: 6.4.1
Node version: 10.15.3

Hi, a vulnerability CVE-2020-15168 is introduced in @enact/core via:
● @enact/[email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected]

recompose is a legacy package. It has not been maintained for about 3 years, and is not likely to be updated.
Is it possible to migrate recompose to other package to remediate this vulnerability?

I noticed several migration records for recompose in other js repos, such as

1. in react-dnd, version 7.4.1 ➔ 7.4.2, remove recompose via commit
2. in @nivo/legends, version 0.67.0 ➔ 0.68.0, remove recompose via commit

Are there any efforts planned that would remediate this vulnerability or migrate recompose?

Thanks
; )

Category

• CLI issue
• Other

Description

Cloning any of the projects from enactjs samples https://github.com/enactjs/samples and running script
"test", "test-json", "test-watch" we get an error in console

● Unrecognized CLI Parameters:

  Following options were not recognized:
  ["single-run", "browsers"]

  CLI Options Documentation:
  https://jestjs.io/docs/en/cli.html

Environment

node v14.15.0
npm v6.14.8
jest v26.6.3
Windows 10
browser chrome latest

Enact version:
enact 3.0.0

Reproduction Code

any of the samples here https://github.com/enactjs/samples
I used "pattern-routable-panels"

Rendering issue and Console error

my lg webos device version was 5.30.4 so I have installed enact js libraries with the 3.2.5 version according to the official documentation enact 3.2.5 version is compatible with webOS 5

while integrating video player with enact framework, after launching the app on the LG WebOS device of version 5 with enactjs framework of 3.2.5 version it is giving me this error Uncaught TypeError: (0 , r.forwardCustom) is not a function and while launching the app on tv, it is splashing the screen and it goes in blank and throwing this error

Environment

Chromium Version 68.0.3440.0 (Developer Build) (32-bit)
npm version: v10.1.0
node version: v20.7.0

Enact version:
LG WebOS Device version: 05.30.40
Enact cli version: 6.0.2
SDK version: "4.9.0"
"@enact/core": "^3.2.5",
"@enact/i18n": "^3.2.5",
"@enact/spotlight": "^3.2.5",
"@enact/ui": "^3.2.5",
"@enact/webos": "^3.2.5",
"ilib": "npm:ilib-webos@^14.18.0-webos1,
"@enact/sandstone": "^2.7.10",

Error:
Uncaught TypeError: (0 , r.forwardCustom) is not a function

I'm working with WebOS and want to apply resolve alias into project but I don't saw anything about it. I checked Enact Build Options but dont see it

I have one issues about apply component of Moonstone into project.
I created my Item and just want to using Item behavior and not apply default css of Item of MoonStone. But I can't,

1. Read in doccument: https://enactjs.com/docs/modules/moonstone/Item
   you said about ItemDecorator but in souce code I can't see it, instead ItemOverlay
2. I'm using "export default ItemOverlay(�MyMenuItem);" but which is still map css and not show with my css.

Category

• Rendering issue
• Crash/Exception
• Console error or warning
• CLI issue
• Other

Description

I have multiple horizontal VirtualList components within a Moonstone Scroller component. Using keyboard navigation, the expected behavior is to change focus to the adjacent VirtualList (when the down key is pressed, the focus changes to the VirtualList below the current focused item). Whenever setting the viewport to 1920 x 1080 using Chrome's dev tools, this works. However, using my native browser resolution (2560 x 1334), different behavior occurs. Rather than changing focus to the next VirtualList, it attempts to scroll the page. The page has been refreshed between these tries and it makes no difference.

Below are screen recordings:
1920 x 1080 (expected behavior):

Glitched behavior/ native browser resolution (2560 x 1334):
https://user-images.githubusercontent.com/5975311/148848547-3c6567ab-9704-4d61-8b3b-1248c59a3bc7.mp4

Environment

Arch Linux (reproduced on macOS too)
Chrome Version: 97.0.4692.71 (Official Build) (64-bit)
Node: v14.17.6

Enact version:
v4.1.2

Reproduction Code

(Roughly the component hierarchy)

<Scroller
        direction="vertical"
        verticalScrollbar="hidden"
        focusableScrollbar={false}
>
  <!-- some divs and such -->
  <VirtualList
        direction="horizontal"
        horizontalScrollbar="hidden"
        ...
  />
</Scroller>

Comments and Screen Shots

See above for gifs.

I'm using enact to build TV Application, I'm trying to apply react-router-dom into our project, but it just ok when running the project with the browser. When building to ipk for Smart TV, maybe it can't understand something like "router" or "browser router".
Could you tell me what package should I use to navigate screen page at here?

Im using @enact/cli to create new project. But i see in dependencies it still version 1.*

                "@enact/core": "^1.15.0",
		"@enact/i18n": "^1.15.0",
		"@enact/moonstone": "^1.15.0",
		"@enact/spotlight": "^1.15.0",
		"@enact/ui": "^1.15.0",
		"@enact/webos": "^1.15.0",

How to update it to version 2.x?

Hi,
I want to add an external library to my enact application.How can i do that.
AFAIK there's no way to include external scripts in enact. Ex:

<script type="text/javascript" src="/app/script.js"></script>

How can i do that using enact js.

I have a issue when use enact combine with styled-component. Some CSS properties like padding, margin,... is warned in console.
Example:
Styled-components:

import styled, { css } from 'styled-components';

export const Button = styled.button.attrs({
  padding: props => props.padding || '22px',
  margin: props => props.margin || 0,
  height: props => props.height || '80px',
  fontSize: props => props.fontSize || '32px'
})`
  height: ${props => props.height};
  line-height: 36px;
  padding: ${props => `0 ${props.padding}`};
  margin: ${props => props.margin};
`;

and import it to other component

import { Button } from 'components/shared/Buttons/Buttons';
class Home extends Component {
  render() {
    return (
      <div>
        <Button>Button</Button>
      </div>
    );
  }
}

when view in console browser, i received this warning

Hi, I have a problem with static file.

I want to create a placeholder image.
But i have some question about it.
Where do I put it?
and how to use it with <img /> tag?

Hi. I am looking to integrate subtitles (.srt) in this player. But unfortunately, there is no support available for this.

Console error or warning

When using VideoJS Player, I get an error connecting the heart rate module specified in the documentation. import videojs from "video.js"; import "video.js/dist/video-js.css";

###Error:

ERROR in ./node_modules/video.js/dist/video-js.css (C:\Users\SomeUser\AppData\Roaming\npm\node_modules@enact\cli\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[1].oneOf[2].use[1]!C:\Users\SomeUser\AppData\Roaming\npm\node_modules@enact\cli\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[1].oneOf[2].use[2]!C:\Users\SomeUser\AppData\Roaming\npm\node_modules@enact\cli\node_modules\source-map-loader\dist\cjs.js!./node_modules/video.js/dist/video-js.css)

Module build failed (from C:\Users\SomeUser\AppData\Roaming\npm\node_modules@enact\cli\node_modules\postcss-loader\dist\cjs.js):
SyntaxError

(1:27) postcss-resolution-independence: Unknown word

1 | data:application/font-woff;charset=utf-8;base64,(many characters) | ^

npm: '9.3.1', node: '19.5.0', enact '4.8.0'

Code

import React, { useEffect, useState } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

export const VideoJS = (props) => {
  const videoRef = React.useRef(null);
  const playerRef = React.useRef(null);
  const { options, onReady } = props;

  React.useEffect(() => {
    // Make sure Video.js player is only initialized once
    if (!playerRef.current) {
      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
      const videoElement = document.createElement("video-js");

      videoElement.classList.add("vjs-big-play-centered");
      videoRef.current.appendChild(videoElement);

      const player = (playerRef.current = videojs(videoElement, options, () => {
        videojs.log("player is ready");
        onReady && onReady(player);
        // setTimeout(() => {
        //     player.play();
        //     console.log("play");
        //   }, 10000);
      }));

      // You could update an existing player in the `else` block here
      // on prop change, for example:
    } else {
      const player = playerRef.current;

      player.autoplay(options.autoplay);
      player.src(options.sources);
    }
  }, [options, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  React.useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

  return (
    <div data-vjs-player>
      <div ref={videoRef} />
    </div>
  );
};

export default VideoJS;

Hi everyone,
I might know if the libraries in this mention are compatible with libraries like expressJS, ReactJS and ReactNative, so as to develop the same app for iOS, Android and webOS.
Thanks for any reply.

Category

• Rendering issue
• Crash/Exception
• Console error or warning
• CLI issue
• [O] Other

Description

There are two buttons in virtuallist, and I set data-index of each button (ex. data-index={index})
And set focusableScrollbar to true.
In previous version (Enact 2.x version, webOS4.5), both buttons' data-index work properly.
I could move scroll by both buttons. but this version (Enact 3.x, webOS5.0) I can only set one item to data-index.
One button can move navigations, but the other button can't move navigation.
Why only I can set one data-index ?

Environment

webOS5.0

Enact version:
3.2.5

Reproduction Code

<VirtualList {...this.createIPChannelList()}/>

createIPChannelList = () => {
const dataSize = this.props.ipChannelList ? this.props.ipChannelList.length : 0;

	return {
        focusableScrollbar: true,
        cbScrollTo: this.scrollToCallBack,
		itemSize: ri.scale(100),
		dataSize: dataSize,
        itemRenderer: this.ipChannelRenderer,
        className: css.virtualList
	};
}

ipChannelRenderer = ({index}) => {
const {supportSystem} = this.props;
const item = this.props.ipChannelList[index];
const str = $L('Channel Number') + item.channelNum + (supportSystem === 'DVB' ? $L('Service ID') : $L('Program Number')) + item.programNum
+ $L('IP Address') + item.ipAddress + $L('IP Port') + item.ipPort + $L('IP Type') + $L(item.protocolType)
+ $L('Channel Label') + item.channelLabel;

    return (
        <div key={item.channelNum} className={css.tableValue}>
            <span>{item.channelNum}</span>
            <span>{item.programNum}</span>
            <span>{item.ipAddress}</span>
            <span>{item.ipPort}</span>
            <span>{item.protocolType === 'udp' ? 'UDP' : 'RTP'}</span>
            <span>
                <MarqueeText marqueeOn={'render'}>{item.channelLabel}</MarqueeText>
            </span>
            <span>
                <IconButton css={css} data-index={index} aria-label={str + $L('Edit')} onClick={this.editBtnClicked(index)}>{editBtn}</IconButton>
                <IconButton css={css} aria-label={str + $L('Delete')} onClick={this.deleteBtnClicked(index)}>{deleteBtn}</IconButton>
            </span>
        </div>
    );
}

Comments and Screen Shots

Category

[ ] Rendering issue
[ ] Crash/Exception
[v] Console error or warning
[ ] CLI issue
[ ] Other

Description

I'm try use '@enact/moonstone/CheckboxItem' at developing a Enact Typescript applications.

Document's suggestions use the 'onToogle'.

But, 'onToggle' is not defined in CheckboxItem.
(check https://github.com/enactjs/enact/blob/master/packages/moonstone/CheckboxItem/CheckboxItem.js. line: 61)

please, add type 'onToggle'

Environment

os : macOS Mojave ( 10.14.5 )
node : 8.16.0
npm : 6.10.3
enact : 2.5.3
test browser : chrome 76.0.3809.100, webos emulator v4.0.0

Reproduction Code

just follow document with typescript : http://enactjs.com/docs/modules/moonstone/ToggleItem/

Comments and Screen Shots

Category

• New component
• New feature for existing component
• Modification of existing component or feature
• Other

Description

The animation for the scroller is smooth and nice. However it comes with some costs like CPU consumption , hard to depend on OnScrollStop to track the last position of the scroller as the use might do any activity while the scroll is scrolling .

So i would suggest to add a property can be called isAnimated which set by default to true, so if it set to false the OnScroll wont be active and only OnScrollStop would work and of course the scroller would jump to the position with no animation .

here are the errors I am getting in the console:

Uncaught TypeError: Cannot read property 'supportedLocalesOf' of undefined
main.js:1286 The above error occurred in the component:

while running this app with this code, I am getting the error

import React from 'react';
import VideoPlayer from '@enact/sandstone/VideoPlayer';

const App = function () {
return (

  </VideoPlayer>
</div>

Video Player

• m3u3 HLS videos not support
• Add video quality control and speed control

Description

• the HLS video format is used by many of the Top apps now a days so keep update on this things.
• Video quality control is used to control the quality of video and also it is give good video for the users.
• Speed Control is also good to some users like that options.