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.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
implement autoplay for Video and Audio #4453
Conversation
let el: HTMLAudioElement; | ||
|
||
let old_val: any; | ||
function value_has_changed(val: any) { | ||
if (val === old_val) return false; | ||
else { | ||
old_val = val; | ||
return true; | ||
} | ||
} | ||
|
||
$: autoplay && el && value_has_changed(value) && el.play(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't love the duplication but its ok for now, we should create a static AudioPlayer
like we have withe Video to abstract this at some point.
let show_controls = true; | ||
let show_controls_timeout: NodeJS.Timeout; | ||
|
||
function video_move() { | ||
clearTimeout(show_controls_timeout); | ||
show_controls_timeout = setTimeout(() => (show_controls = false), 500); | ||
show_controls = true; | ||
} | ||
|
||
function handleMove(e: TouchEvent | MouseEvent) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is all just unused code from a previous change.
All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4453-all-demos |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
Description
Closes #1349.
Implements
autoplay
kwarg for Audio and Video.Can test with this:
This will work in most cases but it won't work on page load because browsers disallow it. There are workaround (although they are pretty messy) but it is obnoxious anyway, so i think it is fine that it doesn't work.
Please include:
Closes: # (issue)
Checklist:
A note about the CHANGELOG
Hello 馃憢 and thank you for contributing to Gradio!
All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.
Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by
[@myusername](link-to-your-github-profile)
in[PR 11111](https://github.com/gradio-app/gradio/pull/11111)
".If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the
GitHub web UI since that lets you upload files directly via drag-and-drop.