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.

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

Fix: Handle start_time changes in st.video #7257

Merged
merged 7 commits into from Sep 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions e2e/scripts/st_video.py
Expand Up @@ -19,3 +19,7 @@
url = "https://www.w3schools.com/html/mov_bbb.mp4"
file = requests.get(url).content
st.video(file)

# Test start time with widget
timestamp = st.number_input("Start Time (in seconds)", min_value=0, value=6)
st.video(url, start_time=int(timestamp))
17 changes: 16 additions & 1 deletion e2e/specs/st_video.spec.js
Expand Up @@ -22,6 +22,21 @@ describe("st.video", () => {
});

it("displays a video player", () => {
cy.get(".element-container .stVideo").should("have.attr", "src");
cy.getIndexed(".element-container .stVideo", 0).should("have.attr", "src");
});

it("handles a start time", () => {
cy.getIndexed(".element-container .stVideo", 1).should("have.attr", "src");
});

it("handles changes in start time", () => {
// Change the start time from 6 to 5
cy.get(".element-container .stNumberInput .step-down").click();

// Wait for the video start time to update
cy.wait(3000);

// Confirm video updated
cy.getIndexed(".element-container .stVideo", 1).matchImageSnapshot("video-updated-start");
});
});
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion frontend/lib/src/components/elements/Video/Video.tsx
Expand Up @@ -35,7 +35,14 @@ export default function Video({

/* Element may contain "url" or "data" property. */

const { type, url } = element
const { type, url, startTime } = element

// Handle startTime changes
useEffect(() => {
if (videoRef.current) {
videoRef.current.currentTime = startTime
}
}, [startTime])

useEffect(() => {
const videoNode = videoRef.current
Expand Down