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

fix image loading conflict with video #48

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix image loading conflict with video #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions concerns/supports-images.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,12 @@ export default

# Determines whether the image should be shown via v-show
showImage: -> switch
# Image has finished loading
when @imageLoaded then return true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this mean that we'd always be showing the image? Like, the when @videoLoaded then false would never be met with this change.

Why does this fix the issue with the trapezoid shadow? Is it because we never transition out this image, so you can never see through it to the shadow? Maybe another way to solve would be to change the transition so that the "leave" portion of the transition has a transition-delay that is equal to the enter portion. And then no transition-duration. So the leaving image never fades out, it just disappears once the video finishes transitioning in.


# Switch to video instance
when @videoLoaded then false

# Render immediately if no transition and no video. If there is a video,
# the video should be the one to be immediately rendered.
when !@transition and !@video then true

# Image has finished loading
when @imageLoaded then true

when !@transition and !@video then return true
8 changes: 4 additions & 4 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,16 +632,16 @@ Logic related rendering images
// Determines whether the image should be shown via v-show
showImage: function showImage() {
switch (false) {
// Image has finished loading
case !this.imageLoaded:
return true;
// Switch to video instance

case !this.videoLoaded:
return false;

case !(!this.transition && !this.video):
return true;
// Image has finished loading

case !this.imageLoaded:
return true;
}
}
}
Expand Down