bbc / talexample Goto Github PK

An example TV app written using TAL

JavaScript 72.92% CSS 23.60% Mustache 3.48%

talexample's Introduction

Example TAL Application

An example TV application using the TAL framework from the BBC.

TAL Replacement update 28/09/2023

We are working towards an approach of modular packages focused on specific features such as playback, navigation, and device abstraction. We do not intend to provide a UI framework, and these packages should work with a number of front-end frameworks. As part of this work, we are in the process of making internal TV packages open source. Some of these have been released already including:

Looking further to the future, we are developing an open source demo app, including associated documentation. This will enable the wider community to understand how these packages work together to build a TV application.

Contact us at BBC TV Open Source 20/03/2023

We have now created a mailbox where you can contact us with any questions related to TAL or the future of this project. We aim to respond to emails within a week. We hope to share some details of the replacement to TAL soon.

Deprecation Announcement 09/01/2023

On 12/12/2022 we announced the deprecation of TAL, on which this repository is based. This will allow us to concentrate on future work, which we hope to share details of soon.

We apologise that we were not active in keeping the TAL community up to date with the status of these projects. Going forward, we will provide regular updates on the future of TAL.

As part of the deprecation, pull requests will be disabled and outstanding issues will be closed. TAL and this example repository will not be actively maintained.

We will answer any questions found in the issues backlog as best we can. There will soon be a email address you can use to contact us. This readme will be updated when this becomes available.

Getting Started

git clone [email protected]:bbc/talexample.git
cd talexample
npm install
npm start

Visit http://localhost:1337 in your browser. Use the UP, DOWN, LEFT, RIGHT keys to navigate, use ENTER/RETURN to select.

More Information

See github.com/bbc/tal or bbc.github.io/tal for documentation.

talexample's People

Contributors

Stargazers

Watchers

talexample's Issues

Move this repo to bbc organisation

We should move this repository to the BBC organisation so it is in the same place as TAL proper.

Use New Media API

The example app uses this._player = new Media('testPlayer', 'video'); which is now deprecated. It should use this._player = this._device.getMediaPlayer().

How to add items to the grid widget

Raised new issue for question by @bxrmbl in #17:

@tsadler1988 Do you happen to know how to add items to the grid widget? Sorry to randoly ask you. I'm having difficulty with the lack of examples in the documentation. Thank you in advance. Cheers,

Playback Crashes Web App - Amazon Fire TV Stick

Hi,

I have checked out your example application and got it running on a amazon fire tv stick pointing to the correct configuration file.

When i go to play a video, the amazon web app crashes with no stack trace, have you guys experienced this, same app works on chrome perfectly.

Any help would be appreciated.

Cheers,
Sefton

Javascript index does not work

Running node index.js and hitting http://localhost:1337 results in an error:

Server running at http://127.0.0.1:1337/
No page strategy default value found for header

/Users/malkij01/develop/work/talexample/antie/node/antieframework.js:127
            throw message;
                  ^
No page strategy default value found for header

Carousel focus breaks when datasource is asychronous

I'm just getting to grips with the TAL framework, and as part of this I'm making modifications and additions to the TAL example. One change I made immediately was to update the simplefeed datasource into an ajax request for the same data (you can also mock this by wrapping the callbacks.onSuccess call in a setTimeout). Whilst the data came through and rendered in the carousel, it no longer gained focus. Focus was still on the previous component (simple.js).

Please can you tell me what needs doing to the example to handle asynchronous data, as I've tried lots of different things without any success. I'm not sure if this is a bug or an implementation oddity, but any help/advice would be much appreciated. Thanks.

Example simplefeed.js file here: https://gist.github.com/ryanbeard/8705597

Update: I have managed to force the focus to appear on the carousel item by binding to the databound event of the datasource and explicitly setting focus:

this._carousel.addEventListener("databound", function(evt) {
    self._carousel.getActiveChildWidget().focus();
});

...but when we click a fruit item and return back to the home screen, focus is again lost. This seems to be the only thing that nearly works. I have tried various ways of trying to force the focus, e.g.

self.setActiveChild(self._carousel);

self._carousel.setActiveChild(self._carousel.getActiveChild());

self._carousel.setActiveChild(self._carousel._childWidgetOrder[0]);

...etc without any luck.

simple video player example not working

Hello!
I have a TV modulator and I am trying to send my own TV streaming with HbbTV through it. I am using a 2014 Samsung TV and everything is working fine but the video player example. It does not play it through the TV although it does work on Firefox Fire TV Plugin. I have no clue where the problem should be, the only change I have made from this tal example is that I am using another video, but still with h.264 and 960x540px.
Thanks in advance for your help,

Dani

How to complie for LG WebOS TV?

Is there a way to compile this for LG WebOS TV Simulator? How do we compile for a tv device such as Samsung, tizen, lg, etc..?
Any advice or help with this?

carousel.js missing

submodule reference seems to be old

Use a submodule for antie dependency

Need to embed antie checkout within the talexample by using a git submodule.

How to Build/Deploy

As I didn't found in the documentation I will ask here.
How can this example be build (prepared for deployment) for use on the TV or some other device?

A Question

Hello,

I have been going through the TAL frame work to write a re-usable application for Smart TVs. I could write and test application in PC, but couldn't get enough information on how to port the application actually into a device say for example Samsung Start TV 2013 models.

I tried to contact Samsung ( as per the TAL FAQ ) to get more information about this. Couldn't succeed yet.

Can you please provide more information on this?. I couldn't find a better place/e-mail id to post this question.