Significantly improve the media player UX
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
@@ -1,85 +1,81 @@
|
||||
{% assign file_info = site.static_files | where: "path", include.url %}
|
||||
{% capture content %}
|
||||
{% if include.player %}
|
||||
<div class="top">
|
||||
<select class="variant"></select>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="play"></span>
|
||||
<div class="playback">
|
||||
{% if include.player %}
|
||||
<div class="top">
|
||||
<select class="variant"></select>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="play"></span>
|
||||
<span class="time">0:00 / 0:00</span>
|
||||
<input type="range" class="progress">
|
||||
</div>
|
||||
<div class="audio">
|
||||
<span class="mute"></span>
|
||||
<input type="range" class="volume">
|
||||
<span class="fullscreen"></span>
|
||||
</div>
|
||||
<span class="fullscreen"></span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.link %}<a href="{% if include.link == true %}{{ include.url }}{% else %}{{ include.link }}{% endif %}" {% if include.caption %}alt="{{ include.caption }}"{% endif %} target="_blank">{% endif %}
|
||||
{% assign file_info = site.static_files | where: "path", include.url %}
|
||||
{% if include.type == "image" %}
|
||||
<picture
|
||||
class="content"
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
{% comment %}
|
||||
src="{{ include.url | absolute_url }}"
|
||||
{% endcomment %}
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
<img src="{{ include.url | absolute_url }}"
|
||||
{% if include.alt %}alt="{{ include.alt }}"{% endif %}
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}>
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
</picture>
|
||||
{% elsif include.type == "video" %}
|
||||
<video {% if include.player %}{% else %}controls{% endif %}
|
||||
class="content"
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
|
||||
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
||||
{% comment %}
|
||||
src="{{ include.url | absolute_url }}"
|
||||
{% endcomment %}
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}
|
||||
{% if include.autoplay %}autoplay="true"{% endif %}
|
||||
{% if include.muted %}muted="true"{% endif %}
|
||||
{% if include.loop %}loop="true"{% endif %}>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
<source src="{{ include.url | absolute_url }}">
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
</video>
|
||||
{% elsif include.type == "audio" %}
|
||||
<audio controls
|
||||
class="content"
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
||||
{% comment %}
|
||||
src="{{ include.url | absolute_url }}"
|
||||
{% endcomment %}
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}
|
||||
{% if include.autoplay %}autoplay="true"{% endif %}
|
||||
{% if include.muted %}muted="true"{% endif %}
|
||||
{% if include.loop %}loop="true"{% endif %}>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
<source src="{{ include.url | absolute_url }}">
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
</audio>
|
||||
{% endif %}
|
||||
{% if include.link %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if include.caption %}
|
||||
<figcaption>{{ include.caption }}</figcaption>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if include.link %}<a href="{% if include.link == true %}{{ include.url }}{% else %}{{ include.link }}{% endif %}" {% if include.caption %}alt="{{ include.caption }}"{% endif %} target="_blank">{% endif %}
|
||||
{% if include.type == "image" %}
|
||||
<picture
|
||||
class="content"
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
<img src="{{ include.url | absolute_url }}"
|
||||
{% if include.alt %}alt="{{ include.alt }}"{% endif %}
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}>
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
|
||||
{% if include.content %}{{include.content}}{% endif %}
|
||||
</picture>
|
||||
{% elsif include.type == "video" %}
|
||||
<video
|
||||
{% if include.player %}{% else %}controls{% endif %}
|
||||
class="content"
|
||||
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}
|
||||
|
||||
{% if include.autoplay %}autoplay="true"{% endif %}
|
||||
{% if include.muted %}muted="true"{% endif %}
|
||||
{% if include.loop %}loop="true"{% endif %}
|
||||
{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
|
||||
|
||||
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
{% if include.url %}<source src="{{ include.url | absolute_url }}">{% endif %}
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
|
||||
{% if include.content %}{{include.content}}{% endif %}
|
||||
</video>
|
||||
{% elsif include.type == "audio" %}
|
||||
<audio
|
||||
{% if include.player %}{% else %}controls{% endif %}
|
||||
class="content"
|
||||
|
||||
{% if include.width %}width="{{ include.width }}"{% endif %}
|
||||
{% if include.height %}height="{{ include.height }}"{% endif %}
|
||||
|
||||
{% if include.autoplay %}autoplay="true"{% endif %}
|
||||
{% if include.muted %}muted="true"{% endif %}
|
||||
{% if include.loop %}loop="true"{% endif %}
|
||||
|
||||
{% if include.preload %}preload="{{ include.preload }}"{% endif %}
|
||||
{% if include.lazyload %}data-lazyload=""{% endif %}
|
||||
>
|
||||
{% if include.lazyload %}<noscript>{% endif %}
|
||||
{% if include.url %}<source src="{{ include.url | absolute_url }}">{% endif %}
|
||||
{% if include.lazyload %}</noscript>{% endif %}
|
||||
|
||||
{% if include.content %}{{include.content}}{% endif %}
|
||||
</audio>
|
||||
{% endif %}
|
||||
{% if include.link %}</a>{% endif %}
|
||||
{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
|
||||
{% endcapture %}
|
||||
{% if include.player %}
|
||||
{% assign class = include.type | append: " player" %}
|
||||
{% else %}
|
||||
{% assign class = include.type %}
|
||||
{% endif %}
|
||||
{% if include.player %}{% assign class = include.type | append: " player" %}{% else %}{% assign class = include.type %}{% endif %}
|
||||
{% include blocks/_base.liquid type="media" class=class content=content float=include.float align=include.align id=include.id %}
|
||||
Reference in New Issue
Block a user