search

flexn-io / renative

🚀🚀🚀 Unified Development Platform for iOS, tvOS, Android, Android TV, Android Wear, Web, Tizen TV, Tizen Watch, Tizen Mobile, LG webOS, macOS/OSX, Windows, KaiOS, FirefoxOS Firefox TV platforms
https://renative.org
MIT License
1.82k stars 180 forks source link

During Development Tizen object isn't available on Tv #1719

Open youssefali424 opened 2 months ago

youssefali424 commented 2 months ago

Describe the bug The tizen object was always undefined during development, After researching why this happens it appear that the tizen object is only provided to index.html in the tizen project, during development public/index.html is used to allow refreshing when files are updated, but this leads to tizen object being undefined in public/index.html and only available in index.html

To Reproduce Steps to reproduce the behavior:

  1. Create a tizen using latest version (prerelease or latest)
  2. Add the use of tizen object through javascript
  3. run npx rnv run -p tizen
  4. tizen object isn't defined

Expected behavior Through development we can access tizen object

Desktop (please complete the following information):

pauliusguzas commented 2 months ago

@youssefali424 thanks for reporting, this is planned to be looked at in the next 2 weeks

Marius456 commented 1 month ago

Hello @youssefali424, After looking around I found that tizen API is not accessible in hosted app mode due to tizen security policies. If you want to use the tizen API, you can rnv build package version of the app and install it directly on the tv. If you need any help, feel free to reach out.

youssefali424 commented 1 month ago

@Marius456 yes that is the issue here, i was trying to figure a way to use a single html file in development using iframe instead of redirecting to new html, as Tizen API is only available in index.html for security reasons If you have any hints in this part it will be appreciated

Marius456 commented 1 month ago

Hello @youssefali424, Like you said you can use iframe to pass tizen object data in index.html:

<html>
    <head>
        <!-- <meta http-equiv="refresh" content="0;url={{DEV_SERVER}}" /> -->
    </head>
    <body>
            <iframe
                id="frameTizen"
                src="{{DEV_SERVER}}?somedata=tizenMemory"
            ></iframe>
            <script>
                var zxc = document.getElementById('frameTizen');
                zxc.src = '{{DEV_SERVER}}?somedata=' + tizen.systeminfo.getTotalMemory();
            </script>
    </body>
</html>

And use it src/app/index.tsx:

    const [tizenMemory, setTizenMemoryState] = useState('');
const params = location.href.split('?')[1].split('&');
        const data = {};
        let tizenTotalMemory = '';
        for (const x in params) {
            data[params[x].split('=')[0]] = params[x].split('=')[1];
            tizenTotalMemory = params[x].split('=')[0];
        }
        setTizenMemoryState(data[tizenTotalMemory]);
youssefali424 commented 1 month ago

I do understand that, but this will affect production code, i mean you cant do that with the production code as it wont be in iframe The ideal way is to provide tizen object to the iframe currently this is blocked by cors I am trying to find a way as this should be safe as long it is used only during development, so that there is no difference between development and production