video player error enact.js
BhanuMathurthi opened this issue · 6 comments
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>
);
};
export default App;
export { App };
<VideoPlayer title="Hilarious Cat Video" poster="https://wallpapercave.com/wp/wp4288169.jpg">
<source src="https://action-ott-live.s3.ap-south-1.amazonaws.com/MMM_Telugu/mmm_telugu_1080p.mp4" type="video/mp4" />
</VideoPlayer>
Hello, we created a simple app with your code snippet and found out that it worked properly without any errors. From what we've checked supportedLocalesOf is not used directly in our code. Could you please give us additional information or the code of your case? Thanks
Hello mam @juwonjeong thanks for responding, my enact.js code is running well on lg tv until I add the video player component I don't what causes this error, I have installed all the packages and imported all of the necessary modules, still after running it it is throwing the same error, can you please help me in this? Thanks
here is my code madam, can you please look into it
import React from 'react';
import BodyText from '@enact/moonstone/BodyText';
import Button from '@enact/moonstone/Button';
import VideoPlayer from '@enact/moonstone/VideoPlayer';
import {VideoPlayerBase} from '@enact/moonstone/VideoPlayer';
import { MediaControls } from '@enact/moonstone/VideoPlayer';
import IconButton from '@enact/moonstone/IconButton';
import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
const App = () => {
return (
<div
style={{
height: '70vh',
outline: 'teal dashed 1px',
transform: 'scale(1)',
transformOrigin: 'top'
}}
>
<label
style={{
backgroundColor: 'rgba(0, 128, 128, 0.5)',
borderBottomWidth: 0,
color: '#0bb',
fontSize: '32px',
fontStyle: 'italic',
fontWeight: 100,
outline: 'teal dashed 1px',
padding: '0.1em 1em',
position: 'absolute',
transform: 'translateY(-100%)'
}}
>
VideoPlayer
</label>
<BodyText style={{ color: "#fff" }}>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel excepturi nihil laborum aliquam laudantium ut consequatur officiis numquam eaque deleniti?
</BodyText>
<Button
style={{ backgroundColor: "#ff0" }}
backgroundOpacity="translucent"
color="blue"
>
Click me!
</Button>
<VideoPlayer
style={{
width: '640px',
height: '360px',
}}
title="Hilarious Cat Video"
poster="https://wallpapercave.com/wp/wp4288169.jpg"
>
<source src="https://action-ott-live.s3.ap-south-1.amazonaws.com/MMM_Telugu/mmm_telugu_1080p.mp4" type="video/mp4" />
</VideoPlayer>
</div>
);
};
const MyMoonstoneApp = MoonstoneDecorator(App);
export default MyMoonstoneApp;
export { App };
and i have attacched my error image below
Hello, we created a simple app with your code snippet and found out that it worked properly without any errors. From what we've checked
supportedLocalesOfis not used directly in our code. Could you please give us additional information or the code of your case? Thanks
or if you won't mind, can you please share the simple app repository which you have tested with my code mam? thanks
here is the index.js code mam:
/* global ENACT_PACK_ISOMORPHIC */
import {createRoot, hydrateRoot} from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const appElement = (<App />);
// In a browser environment, render instead of exporting
if (typeof window !== 'undefined') {
if (ENACT_PACK_ISOMORPHIC) {
hydrateRoot(document.getElementById('root'), appElement);
} else {
createRoot(document.getElementById('root')).render(appElement);
}
}
export default appElement;
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
// Learn more: https://github.com/enactjs/cli/blob/master/docs/measuring-performance.md
reportWebVitals();
hai mam @juwonjeong these are the steps i have followed throughout to create, install and run the app on lgwebos device
enact template install @enact/template-webostv
enact create -t webostv testapp
cd testapp
npm install
enact pack
ares-package dist
and copy the all the app.json and other necessary files in dist folder and pasted it in webos-meta folder
and then ares-package webos-meta
ares-install --device tv3 ""
ares-launch --device tv tvapp
and here is my package.json file code mam:
{
"name": "testapp",
"version": "1.0.0",
"description": "A general template for an Enact Sandstone application for webOS TVs",
"author": "",
"main": "src/index.js",
"scripts": {
"serve": "enact serve",
"pack": "enact pack",
"pack-p": "enact pack -p",
"watch": "enact pack --watch",
"clean": "enact clean",
"lint": "enact lint .",
"license": "enact license",
"test": "enact test",
"test-watch": "enact test --watch"
},
"license": "UNLICENSED",
"private": true,
"repository": "",
"engines": {
"npm": ">=6.9.0"
},
"enact": {
"theme": "sandstone"
},
"eslintConfig": {
"extends": "enact-proxy"
},
"eslintIgnore": [
"node_modules/*",
"build/*",
"dist/*"
],
"dependencies": {
"@enact/core": "^4.7.1",
"@enact/i18n": "^4.7.1",
"@enact/moonstone": "^4.5.4",
"@enact/sandstone": "^2.7.1",
"@enact/spotlight": "^4.7.1",
"@enact/ui": "^4.7.1",
"@enact/webos": "^4.7.1",
"ilib": "npm:ilib-webos@^14.17.0-webos1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web-vitals": "^3.3.2"
},
"devDependencies": {
"eslint-config-enact-proxy": "^1.0.5"
}
}