Hello,

I am trying to add the horizontalprogress widget for the video playback. I couldn't succeed yet. I have the following questions. I am relatively new to web development.

1. Do you have any sample code which demonstrate the usage of horizontalProgressbar?.
2. Do we need to add css styling for the xxx_left and xxx_inner elements of the horizontalprogress bar?. (I tried adding this) If yes, how?
3. The issue is I see the progress bar UI element only if I add the label to it. I don't see any movement of the progress bar inner element. I used setInterval to invoke function which updates the progress bar via setValue in every second. The value used for setValue is 0.05, 0.1, 0,15 etc.
4. The testing is done in PC using chrome and firefox with default configuration. Tried with styletopleft and css3 animations.

Any help is really appreciated.

HorizontalCarousel will add multiple view port padding elements to a carousel when using in a Component that will have other components pushed onto it, ComponentContainer.pushComponent(), and then removed, ComponentContainer.back(). Viewport padding elements are added when the the carousel becomes visible again by calling back.

The result will be the carousel output element contains multiple lines of

<div id="progListCarouselPaddingLeft" class="viewportPadding viewportPaddingLeft" style="width: 99999px;"></div>

<div id="progListCarouselPaddingRight" class="viewportPadding viewportPaddingRight" style="width: 99999px;"></div>

I suspect that there should only be a single element for left and right padding.

It looks like the elements are being added in HorizontalCarousel._onDataBound() without checking if the elements already exit.

Hello,

I have been using TAL for writing media play back applications for Smart TVs like Samsung and LG. The main aim of the applications was to play back adaptive streaming content like MPEG-DASH, HLS and Smooth streams with or with out Play ready DRMs.

As part of this activity, I have extended BBC TAL to support the play back of adaptive streams and Play Ready DRM. This was tested in LG and Samsung Smart TVs and found to be working fine.

Now I would like to contribute these changes back to BBC TAL frame work. I have completed the testing as mentioned here. http://fmtvp.github.io/tal/testing.html

Please let me know how to proceed.

JIRA 904

JIRA 902

The oipfApplicationManager object should have an inline style of display:none to avoid changing the page layout

In static/script/devices/browserdevice.js, onkeydown handler propagates the keydown event only the first time a certain key is pressed, then it propagates keypress events.
static/script/widgets/button.js does not register a listener for keypress events, resulting in the impossibility to navigate after the first movement.
I saw this problem using talexample.

A V2 carousel, when used with an opera based device in CSS3 mode, does not cancel alignments properly - they continue to the end, so several queue up.
I had a quick look at this, it may be to do with the fact that when you set the vendor prefixed -o-transitiondelay (or whatever), opera adds the generic non prefixed property to the style string in addition to the oTransitionDelay property on the style object.
When you clear the prefixed style, it removes oTransitionDelay but not the generic string. Not sure if this is relevent or not but it looked a bit odd when I was stepping through.
May be specifically to do with the chaining of alignments in the carousel instead, would need to test device.stopAnimation() independently on Opera first to see if it's a generic problem or not.
I remember the cancellation behaviour on Opera was different to Chrome when returning to the initial value (opera reversed the animation as per spec whereas chrome didn't) but I think that cancelling by setting the duration to 0 used to work on everything.

Hey,
I have a case where I need to deliver to one Device and keep Server requests low.
Tried to use r.js on appui/sampleapp.js, but it won't go through the other defined dependencies.

Do you have any experience with concating the required Modules into one File ?

Hello,

although there is a supportsCORS device configuration option, none of the actual configurations contain a cors-enable setting.

Have you some certified configuration with CORS enabled? Are you aware of any TV with CORS enabled?

Thanks :-)

• Trying to show the currently displayed component can results in a crash - this could be used as a useful way to reload the view itself
• Devs are likely to try and use this approach

Other info:-
Shouldn't crash
Consider rename
Should return silently

GIVEN a device uses the HbbTV Strategy
WHEN a TAL based App is launched over broadcast
THEN the Application Show HbbTV line should be executed

This should result in devices that follow the spec exactly launching correctly.
Q. What would happen to a device that doesn't follow spec exactly? Would it ignore it or would it break?

Hi!
Thanks for providing this great framework. I'm evaluating it for building a HBBTV Red Dot Application.

The Documentation says that device detection is out of the scope of the Framework. Do you have any recommendations for detection libraries ?

It enough to set the device to "default-hbbtv" to support (almost) all HBBTV-Capable devices ?

Do i need to perform device detection for a HBBTV Red Dot Application ?

Because there are a lot of devices out there and it is impossible to buy and test them all i was hoping this framework would help me to make sure the app is compatible to most/all of them.

Discussion/Investigation required to determine if there is a better approach

Hi,

I tried to use the talexample https://github.com/fmtvp/talexample on a Samsung SmartTV and LG, but can't interact with the buttons.

This layer only works on a TV App? Can't be used on the standard TV Browser?

Thanks.

When using the noanim modifier, If a moveElementTo is requested where no actual movement takes place (start = destination), the onComplete callback is not fired.
This is different behaviour to the other modifiers and its own scrollElementTo method.
The problem is at line 79 where the method returns without calling onComplete

Hello,

At France Televisions, we are benchmarking the BBC TAL Framework to see wether we can adopt this promising project for our HBBTV products or not.

I am in charge of this proof of concept.

The first step of my work is to get an application that could play a MP4 video on all the TVs we have in our showroom (almost every models, from year 2011 to 2014).

While I easily succeded to develop a simple app to play a video on all of our TVs, based on your SimpleVideoComponent.js demo, there still remains an issue on Samsung 2011, that all my investigations was unable to fix.

I tryed with another stream by changing the url at simplevideocomponent.js:94, but it doesn't work. I also tryed to simplify all the process of displaying the video in your framework to imitate the way we do it here at FTV, but it seems that there is a side effect somewhere in TAL.

Of course, I edited the device config file to set this modifier : "antie/devices/media/cehtml"

The stream this demo have to use is the following (official meteo TV) : http://we.tl/lWWVbMu7sX

Samsung 2011 keeps displaying "Unsupported Object".

The issue doesn't come from the TV because it is able to play MP4 videos on all of our normal HBBTV apps.

I would like to ask you how did you manage to make this TV work ?

Without this first step passed , FTV can not continue on benchmarking TAL. The FTV strategy is to support all the samsung TVs from 2011.

Thanks a lot.

Example of working script on this model of tv.
Please note that the stream url is only available for france.

<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>France TV Météo</title>
</head>
<body style="background: #000;">
    <object id="appmgr" type="application/oipfApplicationManager" style="width: 0px; height: 0px; display: none;"></object>
    <object id="broadcastVideoObject" type="video/broadcast" style="position: absolute; display: none;"></object>
<script type="text/javascript" language="javascript">
//<![CDATA[
window.onload = function () {
        oipfcfg = document.createElement("object");
        oipfcfg.style.display = 'none';
        oipfcfg.setAttribute('id', "oipfcfg");
        oipfcfg.setAttribute('type', "application/application/oipfConfiguration");
        window.document.body.appendChild(oipfcfg);
        var appMgr = document.getElementById('appmgr');
        if (appMgr && appMgr.getOwnerApplication) {
                var app = appMgr.getOwnerApplication(window.document);
                app.show();
                app.privateData.keyset.setValue(0x33F);
                app.privateData.keyset.value = 0x330;
            }
        var video = document.createElement("object");
        video.setAttribute('id', "video");
        video.setAttribute('type', "video/mp4");
        video.setAttribute('allowScriptAcess', "always");
        video.width = 480;
        video.height = 270;
        window.document.body.appendChild(video);
        video.data = 'http://medias2.francetv.fr/hbbtv/replay/streaming-adaptatif/2014/S14/J1/99507438-20140331-934k.mp4';
        if (typeof (video.play) == 'function') video.play(1);
    }
//]]>
</script>
</body>
</html>

• Should not be passing string parameters 'video' + 'audio' - (use of constants?)
• setsources should also have a setsource to just accept one videosource

JavaScript tests should be able to run on travis ci

getIndexOfChildWidget() should pass through to the widget strip but it currently acts on the carousel's outer container. This means you'll always get a -1 return unless you pass in the carousel's mask widget (all carousel items will return -1)

If the component container is asked to show the same module before the initial call has completed the module load then the loadModuleCallback can be called multiple times.

I run the Smart TV Alliance SDK (Emulator in a virtual machine), and ran into a problem: To activate remote debugging (via Opera firefly on the host), I have to press left CTRL+F1 in the emulator browser. In the TAL example, it doesn't trigger the remote debugging connection, so I assume somewhere the event propagation fails. Would be nice if this worked by default.

The loading of each stylesheet adds a minimum of 200ms to the page load time.

This is done in browserdevice.js loadStyleSheet (line 197):
...
var interval = window.setInterval(function() {
try {
style.sheet.cssRules;
window.clearInterval(interval);
} catch(ex) {
return;
}
callback(url);
}, 200);

This seems to be polling until an exception is not thrown when accessing style.sheet.cssRules - presumably this is an indicator that it's finished doing what it's doing.

However, as you can see from the code it waits 200ms before doing this check, so this code is potentially unnecessarily adding up to 200ms to the load time of the app per CSS file loaded. The code could be more efficiently rewritten as:
...
function checkIfLoaded() {
try {
style.sheet.cssRules;
// If the above line doesn't thrown an exception, then it's loaded, so do the callback
callback(url);
} catch(ex) {
// Looks like it hasn't loaded - check again in 20ms
window.setTimeout(checkIfLoaded, 20);
}
}

                checkIfLoaded();

However it would need some investigation to see if this is a viable approach or whether the was a good reason for it being done the way it's done.

• Override console.log() rather than developer needing to do this.getCurrentApplication().getDevice().getLogger().log()

Do this by Intercepting console.log calls and doing an ANTIE log as define in config

Tests should be able to run on Connected TV devices.
Tests run should be only those compatible with the test device.

Hello,

Thanks for making BBC Tal as open source!

I am in the process of developing media playback applications with DRM. As part of this activity, I am planning to add DRM and Mpeg Dash support as part of BBC TAL frame work because these are essential features that is needed for me. Please let me know how can I contribute this back. Also please let me know anyone else is working on these activities.

regards,
Sudheesh.

Hi,

Doesn't appear to be a specific Roku device JS file, is one available?

If an application is running over broadcast and a channel change is detected the application should exit

Using default-hbbtv-default.json the test application doesn't seem to create an applicationManager object before using it. Resulting in the following javascript error:

'undefined' is not a function (evaluating appMgr.getOwnerApplication(window.document)') on line:170

Hi Guys,

I've got a small question we have been debating internally in our company here. What was the reason for using the width of the second sort value for ad in getBestFitLayout in application.js? And is there a reason for not just using the calculated surface area?

_layouts.sort(function(a, b) {
    var ad = (a.width*a.width) + (a.height*b.height), // so the b.height here?
        bd = (b.width*b.width) + (b.height*b.height);
    if(ad == bd) return 0;
    else if(ad < bd) return 1;
    else return -1;
});

Thanks in advance!

When accessing http://fmtvp.github.io/tal/other/tal-projects.html this page the following links (in bold) are broken:

TAL Example section: This is our example application that you might want to use to get started quick with your application. There is more documentation on the tutorial pages.

• RequreJS is caching
• We should modify requireJS to bust the cache (append query string) in 'development mode'?
• When spiked, on sandbox it is working well

Hey,

I already have an app up and running with TAL and was wondering how would I go about disabling the TV-Programs-Sound in the background or if it is actually possible to mute the audio via an TAL-App running in the TVs Browser ?!

Any hints and suggestions would be much appreciated

The documentation is not very clear.

I have trouble to understand how the "TextPager" component works and how to get page changing to work. If the text is bigger than the app-Element it just overlaps it and there is no way to scroll the text

How to use a TextPager so the cursor keys can be used for scrolling ?

Pointing devices do not seem to be supported. When we test in Chrome with a regular mouse or on LG television (with Magic Motion) no hover states are shown or click actions are supported.

Also by browsing the source code, no support seems to be implemented (neither in the Javascript nor the CSS). Is this a design choice, as it's a very important (yet complicated for focus state management) feature?

Unfortunately Sony PS3 have stated that access to their APIs is only possible via agreement with their NDA. Whilst the config itself makes no reference to the API, there is no point us leaving the PS3 configs in this folder. Please remove both PS3 files.

When the componentcontainer fires the load event the component property of the event object is not set.

This means that when a component is listening on the load event it can not check if it is self that fired it. e.g.

(evt.component === self)

Which means it must rely on its child components to each listen on their own load event and stop propagation.

All keypresses handled by TAL is returning false.
If you press and hold button, keypress event will fire only once.

I've followed the instructions to get the talexample app working ;-
i.e

Change to the root directory of a web server set up to serve html, javascript and php5. Then, to check out the example:

git clone https://github.com/fmtvp/talexample.git talexample
cd talexample
git clone https://github.com/fmtvp/tal.git antie
Finally, browse to:

http://yourserver.com/talexample

And it does not work.

I know I've got php set up because I can get a valid response from a simple test file with "" in it. But when I navigate to http://localhost/talexample I get a blank page and the logs show a 500 error. How do I debug this?

Cheers

John Small

Is there any plan to support MPEG DASH Media Source Extensions as part of BBC TAL HTML5 Media Player?

See the link here - https://github.com/Dash-Industry-Forum/dash.js/wiki

I am currently using BBC TAL for developing Smart TV Media Playback applications. Hence curious to know whether this feature will be supported.

Testing this in Chrome version 39, using a hide animation, we had code to remove the target in the onComplete handler. However we see the item being immediately removed with no animation, suggesting that onComplete is not being called at the end of the hide animation.