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

Set thumb image as the attribute poster of video automatically #3429

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

Conversation

dallaslu
Copy link

ref #3428

@rhukster
Copy link
Member

Can you please provide a use case for this PR in this "conversation" section of the PR itself. I read your issue, but it's not clear which use case/example this PR is addressing.

@dallaslu
Copy link
Author

Example:

Auto poster

Both 1280x720_1mb.mp4 and 1280x720_1mb.mp4.thumb.jpg was uploaded to /user/pages/02.typography/.

/user/pages/02.typography/default.md:

![Video Sample](1280x720_1mb.mp4)

/user/themes/{theme}/templates/default.html.twig:

{{ page.media['1280x720_1mb.mp4'].html()|raw }}

Both will get the same HTML:

<video poster="/user/pages/02.typography/1280x720_1mb.mp4.thumb.jpg" alt="">
	<source src="/user/pages/02.typography/1280x720_1mb.mp4">
	Your browser does not support the video tag.
</video>

Disable poster

When 1280x720_1mb.mp4.thumb.jpg is missing, the poster attribute is not output by default.

Or manually set it to not output poster.

/user/pages/02.typography/default.md:

![Video Sample](1280x720_1mb.mp4?poster=0)

/user/themes/{theme}/templates/default.html.twig:

{{ page.media['1280x720_1mb.mp4'].poster(0).html()|raw }}

HTML Result:

<video alt="">
	<source src="/user/pages/02.typography/1280x720_1mb.mp4">
	Your browser does not support the video tag.
</video>

Manual

The manual assignment of the poster function is not affected.

* @return array
*/
protected function sourceParsedownElement(array $attributes, $reset = true)
{
$location = $this->url($reset);

if (!isset($attributes['poster']) || ($attributes['poster'] !== 0 && $attributes['poster'] !== '0')) {
Copy link

Choose a reason for hiding this comment

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

It might be simplified in this way:

Suggested change
if (!isset($attributes['poster']) || ($attributes['poster'] !== 0 && $attributes['poster'] !== '0')) {
$this->setPoster($attributes);
$this->removePoster($attributes);

To make it work, you need to create the following methods in the VideoMediaTrait trait:

    private function isPosterUnknown(array $attributes): bool
    {
        return !isset($attributes['poster']) || (int) $attributes['poster'] !== 0;
    }

    private function removePoster(array $attributes): void
    {
        if ($this->isPosterUnknown($attributes)) {
            return;
        }

        unset($attributes['poster']);
    }

    private function setPoster(array $attributes): void
    {
        if ($this->isPosterUnknown($attributes) && $this->thumbnailExists('page')) {
            $thumb = $this->get('thumbnails.page', false);

            if ($thumb) {
                $thumb = $thumb instanceof ThumbnailImageMedium
                    ? $thumb
                    : MediumFactory::fromFile($thumb, ['type' => 'thumbnail']);

                $attributes['poster'] = $thumb->url();
            }
        }
    }

The names of new methods may be different. I want to show you the idea. Of course, you'll need to double-check that and ensure it works as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants