a-ignatov-parc / tvdml Goto Github PK
View Code? Open in Web Editor NEWSmall library for creating tvOS apps with React.js and TVML
License: MIT License
Small library for creating tvOS apps with React.js and TVML
License: MIT License
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.
error [email protected]: The engine "node" is incompatible with this module. Expected version "^8.9.0".
Any reason allowing 10 shouldn'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
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.
*** 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)
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
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.
Flow of actions:
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?
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.
Fix here.
Based on facebook/react#11771.
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.
Line 121 in 27daa2a
This is hidden inside the source. Any particular reason to write this to sessionStorage? IMO this should be left to the client
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));
}
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(); ```
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.
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?
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.
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.
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.
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.
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?
Hello @a-ignatov-parc
Just checking if this project is still active and would welcome contributions, like upgrading dependencies or using TypeScript.
Cheers,
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.