enactjs / enact Goto Github PK
View Code? Open in Web Editor NEWAn app development framework built atop React that’s easy to use, performant and customizable.
Home Page: http://enactjs.com
License: Apache License 2.0
An app development framework built atop React that’s easy to use, performant and customizable.
Home Page: http://enactjs.com
License: Apache License 2.0
By pass the vast url and based on that url google video ads need to play You can also refer this
I have try so many way but no use please help me out
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 ?
webOS5.0
Enact version:
3.2.5
<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>
);
}
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.
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.
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
@enact/ui
to provide generalized, unstyled base components on which we can build themed versions for difference experiences@enact/cli
@enact/i18n
with @enact/moonstone
by supporting asynchronous retrieval of internationalization resourceshow make a build that have filename with hash?
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
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
Add an image for each icon how it will look .
[ ] Rendering issue
[//]: # 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?
[//]: "@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
###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) | ^
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;
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 .
The example code snipped of QuickGuidePanels which provided in sandstone samples doesn't work and render and cause to error on terminal
"@enact/core": "^4.7.8",
"@enact/i18n": "^4.7.8",
"@enact/sandstone": "^2.7.12",
"@enact/spotlight": "^4.7.8",
"@enact/ui": "^4.7.8",
"@enact/webos": "^4.7.8",
import css from './Home.module.less'
import React from 'react'
import QuickGuidePanels from '@enact/sandstone/QuickGuidePanels/QuickGuidePanels';
import Slottable from '@enact/ui/Slottable';
export default function Home(props) {
return (
<div className={css.Home}>
<QuickGuidePanels
current={0}
nextButtonVisibility="auto"
onBack={function noRefCheck(){}}
onChange={function noRefCheck(){}}
onClose={function noRefCheck(){}}
onNextClick={function noRefCheck(){}}
onPrevClick={function noRefCheck(){}}
prevButtonVisibility="auto"
total={0}
>
<Slottable>
This is Panel 0
</Slottable>
<Slottable>
<div
style={{
backgroundColor: 'grey',
height: '100%',
width: '100%'
}}
>
This is Panel 1
</div>
</Slottable>
<Slottable aria-label="aria test">
This is Panel 2
</Slottable>
</QuickGuidePanels>
</div>
)
}
index.js:1
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
at HOC
at WizardPanelsProvider (http://localhost:8080/main.js:17828:27)
at I18nContextDecorator (http://localhost:8080/main.js:4471:58)
at SpotlightContainerDecorator (http://localhost:8080/main.js:22041:35)
at SpotlightContainerDecoratorAdapter (http://localhost:8080/main.js:22117:7)
at _class (http://localhost:8080/main.js:28394:7)
at _class (http://localhost:8080/main.js:28837:7)
at QuickGuidePanels
at div
at Home
at RenderedRoute (http://localhost:8080/main.js:106594:5)
at RenderErrorBoundary (http://localhost:8080/main.js:106541:5)
at DataRoutes (http://localhost:8080/main.js:105163:5)
at Router (http://localhost:8080/main.js:107218:15)
at RouterProvider (http://localhost:8080/main.js:104950:5)
at div
at div
at div
at Layout (http://localhost:8080/main.js:45483:3)
at div
at App (http://localhost:8080/main.js:45373:67)
at div
at FloatingLayerDecorator (http://localhost:8080/main.js:29788:27)
at _class (http://localhost:8080/main.js:43673:7)
at I18nDecorator (http://localhost:8080/main.js:14835:7)
at I18nDecorator (http://localhost:8080/main.js:4361:24)
at _class (http://localhost:8080/main.js:22527:7)
at Skinnable (http://localhost:8080/main.js:36792:26)
at _class (http://localhost:8080/main.js:14550:7)
at Decorator (http://localhost:8080/main.js:15337:7)
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?
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 (
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>
);
}
}
[ ] Rendering issue
[ ] Crash/Exception
[v] Console error or warning
[ ] CLI issue
[ ] Other
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'
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
just follow document with typescript : http://enactjs.com/docs/modules/moonstone/ToggleItem/
[ ] Rendering issue
[ ] Crash/Exception
[ ] Console error or warning
[x] CLI issue
[ ] Other
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`
Hi. I am looking to integrate subtitles (.srt) in this player. But unfortunately, there is no support available for this.
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.
Enact version:
"@enact/ui": "^3.2.5"
import css from "./App.module.less";
<ProgressBar
progress={0.5}
backgroundProgress={0.75}
css={{
progressBar: css.customProgressBar,
fill: css.customProgressBarFill
}}
/>
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>
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
node v14.15.0
npm v6.14.8
jest v26.6.3
Windows 10
browser chrome latest
Enact version:
enact 3.0.0
any of the samples here https://github.com/enactjs/samples
I used "pattern-routable-panels"
I'm wondering do you have a support or version atop of VUE / VUEX / VUE-Router ?
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
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 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
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
(Roughly the component hierarchy)
<Scroller
direction="vertical"
verticalScrollbar="hidden"
focusableScrollbar={false}
>
<!-- some divs and such -->
<VirtualList
direction="horizontal"
horizontalScrollbar="hidden"
...
/>
</Scroller>
See above for gifs.
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,
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?
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
Are there any efforts planned that would remediate this vulnerability or migrate recompose?
Thanks
; )
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.