Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don't see onTimeUpdate event from VideoElement when using Polymer #12604

Closed
DartBot opened this issue Aug 21, 2013 · 15 comments
Closed

Don't see onTimeUpdate event from VideoElement when using Polymer #12604

DartBot opened this issue Aug 21, 2013 · 15 comments
Assignees
@jmesserly
Milestone
M8

Comments

@DartBot
Copy link

DartBot commented Aug 21, 2013

This issue was originally filed by MrDrM...@gmail.com

Q: What steps will reproduce the problem?

  1. Create a <video> tag in a file (either a Polymer Element or a normal html/dart file)
  2. Add an onTimeUpdate function to the dart file
  3. Set the video element (either in HTML or the dart file, it doesn't seem to work in either) call your function on time update

Q: What is the expected output? What do you see instead?

A: My time update function consisted of this:
void time_update(Event e, var detail, Node target){
  print("Time update function ");
}

So I expect to see "Time update function" print out in the console window, but it doesn't.

Q: What version of the product are you using? On what operating system?

A: Windows 7 32-bit, 64-bit, and 32-bit linux. Polymer package version 0.5.5, Dart Editor build 26297.

Please provide any additional information below.

I'm porting a project from web_ui to Polymer and noticed that I never see the onTimeUpdate event from the VideoElement in the Polymer code, whereas I do in web_ui.

I set up 2 test projects, 1 with web_ui and 1 with Polymer, using (I think) equivalent code between the 2. Both versions just have a video element with the following code:

Web_UI

<video id="vidya" width="768" height="432" controls
      on-time-update="time_update($event)"
      src="http://html5demos.com/assets/dizzy.webm">

void time_update(Event e){
  print("Time update function ");
}

Polymer

<video id="vidya" width="768" height="432" controls
      src="http://html5demos.com/assets/dizzy.webm"
      on-time-update="time_update">

void time_update(Event e, var detail, Node target){
  print("Time update function ");
}

I see "Time update function" print to the console in the Web_UI version, but not in Polymer.
@iposva-google
Copy link
Contributor

Added Area-Polymer, Triaged labels.

@jmesserly
Copy link

is your HTML inside a <polymer-element> ?

Polymer features only work inside a componen (a common pattern is to have one component for the app). See this for an example:
https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/handle_button_click/index.html

@jmesserly
Copy link

Added NeedsInfo label.

@DartBot
Copy link
Author

DartBot commented Aug 21, 2013

This comment was originally written by MrDrMuf...@gmail.com

It wasn't working in a <polymer-element> with Polymer 0.5.4, but I haven't tried with 0.5.5 yet. The sample code I copied was not in an element. I'll try it and report back.

@sigmundch
Copy link
Member

I see - yes, that would probably explain the difference. The "on-foo" event hooks used to be allowed anywhere in WebUI, that included any template inside or out of an element declaration. This changed with polymer. Now the "on-foo" has to be used inside a polymer-element declaration. The string you pass in the attribute is then resolved as a method in the class associated with your polymer-element.

@jmesserly
Copy link

thanks for giving it another try. yeah I can reproduce. Very strange bug. Looking at it now...

@jmesserly
Copy link

Set owner to @jmesserly.
Added Started label.

@DartBot
Copy link
Author

DartBot commented Aug 21, 2013

This comment was originally written by MrDrM...@gmail.com

Thanks for working to reproduce it. I just tried and was able to reproduce it as well in a Polymer Element using code similar to Seth's example you linked before:

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <script src='packages/polymer/boot.js'></script>
  </head>
 
  <body>
    
    <polymer-element name="my-element">
      <template>
        <video id="vidya" width="768" height="432" controls
          src="http://html5demos.com/assets/dizzy.webm"
          on-time-update="time_update">
        </video>
      </template>
      
      <script type="application/dart">
        import 'package:polymer/polymer.dart';
        import 'dart:html';
        
        @­CustomTag('my-element')
        class MyElement extends PolymerElement {
          
          void time_update(Event e, var detail, Node target) {
            print("Time update function ");
          }
        }
        
      </script>
    </polymer-element>
    
    <my-element></my-element>
    
    <script type="application/dart">main() {}</script>
  </body>
</html>

@jmesserly
Copy link

hmmm, I bet polymer.js has the same issue. It appears timeUpdate does not bubble: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/timeupdate, which means our listener doesn't catch it.

@jmesserly
Copy link

@mrdrmuffin -- Spooky, that is the exact code I'm debugging. Are you looking over my shoulder? ;-)

@jmesserly
Copy link

your probably found this already, but the workaround is:

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <script src="packages/polymer/boot.js"></script>
  </head>
  <body>
    <polymer-element name="my-element">
      <template>
        <video id="vidya" width="768" height="432" controls
              src="http://html5demos.com/assets/dizzy.webm">
      </template>
      <script type="application/dart">
        import 'package:polymer/polymer.dart';
        @­CustomTag('my-element')
        class MyElement extends PolymerElement with ObservableMixin {
          void created() {
            super.created();
            shadowRoot.query('#vidya').onTimeUpdate.listen(time_update);
          }

          void time_update(Event e) {
            print("Time update function ");
          }
        }
      </script>
    </polymer-element>

    <my-element></my-element>

    <script type="application/dart">main() {}</script>
  </body>
</html>

@jmesserly
Copy link

blocked on:
Polymer/polymer#208

Added Waiting label.

@DartBot
Copy link
Author

DartBot commented Aug 21, 2013

This comment was originally written by MrDrMu...@gmail.com

Thanks, I had tried that in my actual project that I'm porting and it didn't seem to work, but I was also using the Polymer style function call (Event e, var detail, Node target) rather than the simpler one so I'll try that when I get home. Thanks again!

@sigmundch
Copy link
Member

Added this to the M8 milestone.

@jmesserly
Copy link

(tracking this on the polymer.js side)

Added MovedToGithub label.

@DartBot DartBot added this to the M8 milestone Oct 8, 2013
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jmesserly jmesserly

Labels
None yet
Projects
None yet
Milestone
M8
Development

No branches or pull requests
5 participants
@kevmoo @jmesserly @sigmundch @iposva-google @DartBot