borismus / keysocket

http://smus.com/chrome-media-keys-revisited
Apache License 2.0
383 stars 165 forks source link

[Feature Request] Support for YouTube TV (formerly Leanback) #307

Open AmandaBeuno opened 5 years ago

AmandaBeuno commented 5 years ago

Good day,

Thank you for the great addon. Totally a must-have.

I tried KeySocket on www.youtube.com/tv but it did not work. I also tried to make a new service but unfortunately. It seems that I lack the needed expertise as the elements in there when playing a video does not contain any buttons whatsoever.

Thank you again for the great addon. I would appreciate any pointers to how to get it done and I will try to work through it.

Thanks,

AmandaBeuno commented 5 years ago

I have tried to look into it.

The difference between YouTube TV and YouTube is that there are no buttons per se.

YouTube TV uses "#buttons-list" instead of "#movie-player".

Also, instead of defined buttons class. It has divs that has role="button".

The part I am stuck in is how to identify the play button when it is a div not a button. Any pointers would be appreciated.

Here is the buttons-list class to shed some light on what I meant.

<div id="buttons-list" class="focused new-list limited-list transport-list" data-enable-sounds="false" tabindex="-1" style="position: relative; overflow: visible; width: 73.8em; height: 100%;"><div class="new-list-container horizontal" style="margin-left: 0px;"><div class="button disabled material-icon-info ad-info transport-controls-button" tabindex="-1" role="button" style=""> <div class="background"></div> <span class="label">Why this ad?</span></div><div class="transport-controls-button transport-channel-button" tabindex="-1" role="button" style=""> <div class="background"></div> <div class="channel-avatar no-model image" data-image-url="{{model.channelAvatarUrl}}" tabindex="-1" style="background-image: url(&quot;https://yt3.ggpht.com/a-/AAuE7mB6cG4vf1XBxwmqlZqBWbrQC67p1g-MbBR_ow=s88-mo-c-c0xffffffff-rj-k-no&quot;);"></div> <span class="label">Channel</span></div><div class="toggle-button disabled material-icon-closed-caption transport-controls-toggle-button" tabindex="-1" role="button" style=""> <div class="background"></div> <span class="label">Captions</span></div><div class="button disabled material-icon-skip-previous transport-controls-button" tabindex="-1" role="button" style="" aria-describedby="previous-preview-button"> <div class="background"></div> <span class="label">Previous video</span></div><div class="toggle-button focused selected material-icon-play-arrow toggle-selected transport-controls-toggle-button" tabindex="-1" role="button" style="" aria-live="polite"> <div class="background"></div> <span class="label">Pause</span></div><div class=" skip-forward-button" tabindex="-1" role="button" style="" aria-describedby="next-preview-button"> <div class="skip-forward-button-details"> <div class="skip-forward-button-label">Next</div> <div class="skip-forward-button-title">Michael Jackson - You Are Not Alone (HIStory Tour In Munich) (Remastered)</div> <div class="skip-forward-button-by">New Michael Jackson</div> </div> <div class="skip-forward-button-preview tiltable" data-model="{{model}}" tabindex="-1"> <div class="skip-forward-button-preview-container"> <div class="skip-forward-button-image no-model image" data-image-url="{{model.previewButton.imageUrl}}" tabindex="-1" style="background-image: url(&quot;https://i.ytimg.com/vi/fhs0X7EZT1U/mqdefault.jpg&quot;);"></div> <div class="material-icon-skip-next skip-forward-button-overlay"></div> </div> </div></div></div></div>

feedbee commented 5 years ago

Hi @AmandaBeuno. Could you try to fix it by yourself?