a-ignatov-parc/tvdml

Small library for creating tvOS apps with React.js and TVML

tvdml's Issues

Fix crash on closing modal document on tvOS 11.3

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[__NSPlaceholderArray initWithObjects:count:]: attempt to insert nil object from objects[0]'
*** First throw call stack:
(
	0   CoreFoundation                      0x000000011293fa56 __exceptionPreprocess + 294
	1   libobjc.A.dylib                     0x000000010ee0e031 objc_exception_throw + 48
	2   CoreFoundation                      0x000000011297f54c _CFThrowFormattedException + 194
	3   CoreFoundation                      0x000000011284cccd -[__NSPlaceholderArray initWithObjects:count:] + 237
	4   CoreFoundation                      0x0000000112853694 +[NSArray arrayWithObjects:count:] + 52
	5   ITMLKit                             0x000000011651e4a8 +[IKDOMDocument _resetUpdatesForNode:] + 300
	6   ITMLKit                             0x0000000116537ac0 -[IKAppContext _evaluate:] + 479
	7   ITMLKit                             0x0000000116533af4 __41-[IKAppContext evaluate:completionBlock:]_block_invoke + 42
	8   ITMLKit                             0x0000000116537654 -[IKAppContext _sourcePerform] + 261
	9   ITMLKit                             0x0000000116537514 IKRunLoopSourcePerformCallBack + 34
	10  CoreFoundation                      0x00000001128e2421 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
	11  CoreFoundation                      0x00000001128c6d1f __CFRunLoopDoSources0 + 271
	12  CoreFoundation                      0x00000001128c62df __CFRunLoopRun + 1263
	13  CoreFoundation                      0x00000001128c5b7b CFRunLoopRunSpecific + 635
	14  ITMLKit                             0x0000000116537373 -[IKAppContext _jsThreadMain] + 376
	15  Foundation                          0x000000010e81e283 __NSThread__start__ + 1221
	16  libsystem_pthread.dylib             0x0000000113fb16c1 _pthread_body + 340
	17  libsystem_pthread.dylib             0x0000000113fb156d _pthread_body + 0
	18  libsystem_pthread.dylib             0x0000000113fb0c5d thread_start + 13
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb) 

lifecycle methods not called in right order

support for versions higher than node 8

error [email protected]: The engine "node" is incompatible with this module. Expected version "^8.9.0".

Any reason allowing 10 shouldn't work?

Video player close event

Is there any way in which I can detect that the player has been closed? I'm creating a player object on button select event and the video starts without any issues.

If I'm pressing the menu button, the player gets close but I'm not getting the event on menu button select event. I'm registering the menu select event in the component which extends react pure component and has a button which starts the video on click/select.

I checked the official documentation but couldn't find any which can help me with this.

redirect feature doesn't work

hello @a-ignatov-parc, thank so much for great work on this 🙏

I've been using TVDML in my tvOS app since v2.0.4 and finally I had a chance to upgrade the dependencies but seems like TVDML.redirect method is not working as expected on the latest version. 🤔

you can reproduce the issue by applying those changes to the boilerplate app: https://github.com/altayaydemir/tvdml-app-boilerplate/commit/5246ac92d32806ae288384711475fd460011db86

createPlayer requires uidResolver

createPlayer requires uidResolver.

The documentation says that the url is used by default.

example not working

import * as TVDML from 'tvdml';

export default function HandlePlay(playObject){
  let urls = playObject.playList.slice(playObject.playItemIndex).map( singleItem => {
    return {
      url: singleItem.hdUri,
      title: singleItem.name
    }
    });
  console.log("Creating Player");
  console.log(urls);
  TVDML.createPlayer({
    items: urls
  })
  .then(player => player.play())
  .catch(err => console.log(err));
}

render() is called before componentDidMount()

When debugging my components, I'm finding that render() is being called before componentDidMount() which seems counter to the component lifecycle documented here: https://reactjs.org/docs/react-component.html

Since render() is getting called before componentDidMount() things like props and state, etc. are still null or undefined.

I have things setup like this:

index.js

TVDML
  .subscribe(TVDML.event.LAUNCH)
  .pipe(TVDML.render(() => (
    <document>
      <menuBarTemplate>
        <menuBar>
          <menuItem route='journal'>
            <title>Journal</title>
          </menuItem>
          <menuItem route='settings'>
            <title>Settings</title>
          </menuItem>
        </menuBar>
      </menuBarTemplate>
    </document>
  )));

TVDML
  .handleRoute('journal')
  .pipe(TVDML.render(() => (
    <RuntimeWrapper>
      <Journal/>
    </RuntimeWrapper>
  )));

Journal.js

export class Journal extends Component {
  constructor(props) {
    super(props);
    console.log("Journal.constructor");
    this.state = {
      counter: 0
    };

    // So `this` works in callbacks
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  componentDidMount() {
    console.log("Journal.componentDidMount");
  }
  
  render() {
    console.log("Journal.render");
    console.log(this.state);
    console.log(this.props);

    return(
      <document>
        <alertTemplate>
          <title>Journal</title>
          <description>{this.state.counter}</description>
          <button onSelect={this.onButtonClick}><text>Click Me</text></button>
          <text>{this.state.counter}</text>
        </alertTemplate>
      </document>
    );
}

  onButtonClick() {
    console.log("Click");
    const newCounter = this.state.counter + 1;
    this.setState({ counter:  newCounter });
  }
}

Here is my console output:

[Log] Journal.constructor
[Log] Journal.render
[Log] {counter: 0}   <-- state
[Log] {}             <-- props
[Log] Journal.componentDidMount

This is a simplification of my component that is using redux/thunk, but this highlights that Journal.render is called before Journal.componentDidMount. In my real component if I am trying to render a template that uses data that is setup in props, my template errors out because the data loaded via calls in componentDidMount() has not been loaded yet.

Navigating to a document that is not in the Menu Bar loses access to Menu Bar

Hello,

I have a section of my application called "Account" that displays user information, or a choice of a few actions if the user is not authenticated. One of those actions is "Login". When I TVDML.navigate('login') to the screens for login, I lose the menu bar at the top of the screen. (Login is not IN the Menu Bar, but Account is). Once I'm done logging in, even if I redirect or navigate to "Account" the user still does not have access to the menu bar.

I'm not sure why menu bar access disappears or how to get it back without going back through the document stack by clicking on the menu button. I feel like I'm missing something around the understanding of how navigation works. Thanks for any information.

Is TVDML still active?

Hello @a-ignatov-parc

Just checking if this project is still active and would welcome contributions, like upgrading dependencies or using TypeScript.

Cheers,

Memory leak

I profiled https://github.com/a-ignatov-parc/tvos-soap4.me and another app I'm working on for memory leaks. The memory usage in both cases increases with time and there are leaks detected 30-40s into runtime. Have you seen anything like this before? I don't have a real device to verify this

Overlay Document on Video

Hi,

I was trying to show an overlay document over the video player and did it successfully. However, the newly added document is blocking the video player.

Please check the below image for reference.

When I press the back button from the remote, it removes that document and adds a new document which is transparent and perfectly align on the video player.

Please check the below image for reference. (Please ignore the glowing background it is from the video)

I again have to press the back button to remove this document. If I press the pause button it will pause the video and from that point, I can't able to do anything except exit from the video.

Below is the code I used to add the document over the player.

const document = TVDML.createEmptyDocument();

const pipeline = TVDML.render(() => (


<overlay style={{ tvAlign: 'center', tvPosition: 'center' }}>
<organizer
style={{
tvAlign: 'center',
tvPosition: 'center',
marginBottom: '150',
marginRight: '50',
}}
>

<text
style={{
fontSize: '30px',
fontWeight: 'semiBold',
color: 'red',
marginTop: '20px',
}}
>
Video Title





));

pipeline.sink({ document }).then(() => {
player.interactiveOverlayDocument = document;
});

I also tried Player.overlayDocument but it doesn't add anything to the player.

I know the library is not being maintained anymore and is quite old but it works like a charm for me as I can able to create a new app without any issue which doesn't require customised UI.

Thanks.

tvOS 12 and Xcode 10 errors and crashes

Have you experienced any issues running a TVMLKit (and specifically TVDML) on tvOS 12 and xcode 10? Since upgrading I'm getting quite a few Styles errors as well as application crashes these happen in both the simulator and on an actual device.

The style errors look like (there are 100s of these errors)

[Styles] Registering a style (color) that already has an existing type (0) that doesn't match the new type (4)
and
[Styles] Unexpected declartion type for style "text-shadow"

and the app crashes after navigating around a few page with the following errors

AppName(5399,0x700001de8000) malloc: *** error for object 0x600003bc79c0: pointer being freed was not allocated
AppName(5399,0x700001de8000) malloc: *** set a breakpoint in malloc_error_break to debug
(lldb) 

libsystem_kernel.dylib`__pthread_kill:
    0x10a5a8b7c <+0>:  movl   $0x2000148, %eax          ; imm = 0x2000148 
    0x10a5a8b81 <+5>:  movq   %rcx, %r10
    0x10a5a8b84 <+8>:  syscall 
->  0x10a5a8b86 <+10>: jae    0x10a5a8b90               ; <+20>
    0x10a5a8b88 <+12>: movq   %rax, %rdi
    0x10a5a8b8b <+15>: jmp    0x10a5a2e67               ; cerror_nocancel
    0x10a5a8b90 <+20>: retq   

I don't see any mention of these kind of errors with tvOS/TVMLKit anywhere else so I was wondering if others using TVDML were experiencing the same thing.

DataItem() vs. Virtual DOM

Love this library, thanks for all the work on it.

I was wondering if you have ever done a performance test of Reacts Virtual DOM vs the TVML DataItem() rendering? I'm asking because I need an infinite scroll component, and the DataItem approach seems very un-React. I have about 2000 total items that would be paged 50 or so at a time. I'm about to implement infinite paginations/scrolling in a more pure React way (rerender on each page and have the Virtual DOM determine what to insert or not) and possibly via DataItem and compare the performance, but was wondering if you had done anything like this before.

Using npm and traditional node, cannot use because of it forcing es6.

Just a heads up. I don't think there is an es5 version being built for npm. So by doing:

npm install --save tvdml

and having a file of:

var TVDML = require('tvdml');

console.log(TVDML);

I get this error:

/Users/firl/Desktop/scratch/testtvdml/node_modules/tvdml/src/index.js:1
(function (exports, require, module, __filename, __dirname) { import * as hooks from './navigation/hooks';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/firl/Desktop/scratch/testtvdml/test.js:1:75)
    at Module._compile (module.js:556:32)

This is just a heads up since the README mentions that I should be able to do that. Just started using the library, quite enjoying it.

hidden write to sessionStorage

tvdml/src/navigation.js

Line 121 in 27daa2a

sessionStorage.setItem('startParams', JSON.stringify(options));

This is hidden inside the source. Any particular reason to write this to sessionStorage? IMO this should be left to the client

Testing with Jest

Do you have any guidance on how to test a TVDML application and components with Jest?

I am trying to "render" some of my components so that I can test that things like redux dispatches happen on componentDidMount() etc.

Currently, I have the following:

test('Test pulling data from API', () => {
  const catalog = TVDML.render(() => (
    <RuntimeWrapper>
      <Catalog />
    </RuntimeWrapper>
  ));
  catalog.sink();
});

The error I get here is:

ReferenceError: DOMImplementationRegistry is not defined
        at DOMImplementationRegistry (/Users/frank/Projects/crossfit-tv/web/node_modules/tvdml/dist/webpack:/src/render.js:19:10)
        at route (/Users/frank/Projects/crossfit-tv/web/node_modules/tvdml/dist/webpack:/src/render.js:103:18)
        at t (/Users/frank/Projects/crossfit-tv/web/node_modules/tvdml/dist/webpack:/src/pipelines.js:18:45)
        at process._tickCallback (internal/process/next_tick.js:68:7)

Any guidance on how to get some of this rendering so I can test these components?

What happened to the TVDML.createPlayer?

    let urls = [ { url, title: playObject.name }];
    TVDML.createPlayer({
      items: urls,
      uidResolver(item){
        return item.url;
      }
    })
    .then(player => player.play())
    .catch(err => console.log(err));```

I am going through the upgrade to the latest, and I don't see this method anymore. 
Is this just in preference of doing it like this?

const player = new Player();
const playlist = new Playlist();
const mediaItem = new MediaItem("video", playObject.hd);
console.log("playing");
console.log(playObject.hd);

player.playlist = playlist;
player.playlist.push(mediaItem);
player.play(); ```

When pushing menu button between routes I get a blank screen

Flow of actions:

• Page 1 -> Page 2
• Press Menu button
• Data gets queried, render function gets called, but blank screen is there. It patches the dom but doesn't render.

If I hit the menu button again, it goes back to the previous page.

It seems like it could be trying to patch the DOM but for some reason isn't updating. Any ideas what might be going on?

Remove useSyncScheduling flag after new react-reconciler release

Fix here.

Based on facebook/react#11771.

How to set multiple attributes in data binding?

In the documentation it states we can add @src attribute binding to the DataItems object

<img binding="@src:{url};" width="300" height="300" />

How to do the same with another attribute, like class together with src on the same element?

Menubar highlight event & Component reload

Hey @a-ignatov-parc

First of all a big thanks for the awesome library. It just saved our time in an ongoing project which had a limited timeline.

Everything is working fine and smoothly but having an issue regarding data refresh. Like, we have currently 5 menu tabs and each tab shows data based on API. But we couldn't able to find the event which will tell us that the new menu tab is selected.

Each tab has its own route and API call is done in the componentDidMount function. As the component is not getting destroyed while the user navigating through menu tabs, the request will be sent only once.

How we can reload or refresh the component when the user selects it?

Thank you.

Issue with react rendering when data changes

Here is a simple view:

const MainView = (data: AboutApple) => (
  <document>
    <alertTemplate>
      <title>{data.appleTv && data.appleTv.aboutDescription}</title>
    </alertTemplate>
  </document>
);

I have a polling component that grabs data and changes the properties of the data.appleTv.aboutDescription

The screen doesn't re-render the component until I navigate left then right.

As you can see in the screen shot the polling grabbed new data but is showing the old data.

If I hit "left", it will re render, the proper data, then go to the home view.

componentDidMount not called when menu bar highlighted

From what I can see componentDidMount does not get triggered when the menu bar is up for non highlighted items.

I assume this is what is happening based upon my breakpoints not being hit until I switch.

I could be wrong though.