archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Video: new macro for showing video progress

Browse Source 
Import video_progress_bar from '_macros/_asset_video_progress.html'
and pass it the video and current_user.
This commit is contained in:
Pablo Vazquez 2018-09-11 16:11:05 +02:00
parent 48df0583ab
commit c546dd2881
6 changed files with 53 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/styles/_apps_base.sass
View File

@ -450,3 +450,6 @@ $loader-bar-height: 2px
to
left: 100%
.progress-bar
background-color: $primary

4
src/styles/_config.sass
View File

@ -12,9 +12,10 @@ $color-background-active-dark: hsl(hue($color-background-active), 50%, 50%) !def
$font-body: 'Roboto' !default
$font-headings: 'Lato' !default
$font-size: 14px !default
$font-size-xs: .75rem
$font-size-xxs: .65rem
$color-text: #4d4e53 !default
$color-text-dark: $color-text !default
$color-text-dark-primary: #646469 !default
$color-text-dark-secondary: #9E9FA2 !default
@ -139,7 +140,6 @@ $link-color: $primary
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
$font-size-base: .9rem
$font-size-xs: .75rem
$dropdown-border-width: 0
$dropdown-box-shadow: 0 10px 25px rgba($black, .1)

20
src/styles/components/_card.sass
View File

@ -81,10 +81,22 @@
background-position: center
.progress
height: 3px
height: 4px
position: absolute
top: -3px
top: -4px
width: 100%
.progress-bar
background-color: $primary
&.group
.card-label
background-color: rgba($black, .5)
border-radius: 3px
color: $white
display: block
font-size: $font-size-xxs
left: 5px
top: -25px
position: absolute
padding: 1px 5px
z-index: 1

24
src/templates/_macros/_asset_video_progress.pug Normal file
View File

@ -0,0 +1,24 @@
| {% macro video_progress_bar(video, current_user) %}
| {% set view_progress = current_user.nodes.view_progress %}
| {% if video._id in view_progress %}
| {% set progress = current_user.nodes.view_progress[video._id] %}
| {% set progress_in_percent = progress.progress_in_percent %}
| {% set progress_done = progress.done %}
| {% endif %}
| {% if progress %}
.progress.rounded-0
.progress-bar(
role="progressbar",
style="width: {{ progress_in_percent }}%;",
aria-valuenow="{{ progress_in_percent }}",
aria-valuemin="0",
aria-valuemax="100")
| {% if progress.done %}
.card-label WATCHED
| {% endif %}
| {% endif %}
| {% endmacro %}

2
src/templates/mixins/components.pug
View File

@ -69,7 +69,7 @@ mixin card()
p No card content defined.
mixin list-asset(name, url, image, type, date)
a(href=url, class=type).card.asset.card-stretch.card-image-fade&attributes(attributes)
a(href=url).card.asset.card-stretch.card-image-fade&attributes(attributes)
if image
.embed-responsive.embed-responsive-16by9
.card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")

18
src/templates/nodes/custom/group/view_embed.pug
View File

@ -1,3 +1,4 @@
| {% from '_macros/_asset_video_progress.html' import video_progress_bar %}
include ../../../mixins/components
| {% block body %}
@ -75,6 +76,7 @@ include ../../../mixins/components
| {% set node_type = child.properties.content_type if child.properties.content_type else child.node_type %}
| {% if child.properties.content_type == 'video' %}
| {% set view_progress = current_user.nodes.view_progress %}
| {% if child._id in view_progress %}
| {% set progress = current_user.nodes.view_progress[child._id] %}
| {% set progress_in_percent = progress.progress_in_percent %}
@ -87,22 +89,16 @@ include ../../../mixins/components
'{{ url_for_node(node=child) }}',
"{% if child.picture %}{{ child.picture.thumbnail('m', api=api) }}{% endif %}",
"{{ node_type | undertitle }}",
"{{ child._updated | pretty_date }}")(
class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %} {% if progress and progress.done %}done{% endif %}",
"{{ child._created | pretty_date }}")(
class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %}",
data-node_id="{{ child._id }}",
title="{{ child.name }}")
| {% if progress %}
.progress.rounded-0
.progress-bar(
role="progressbar",
style="width: {{ progress_in_percent }}%;",
aria-valuenow="{{ progress_in_percent }}",
aria-valuemin="0",
aria-valuemax="100")
| {% if child.properties.content_type == 'video' %}
| {{ video_progress_bar(child, current_user) }}
| {% endif %}
| {% endfor %}
| {% endfor %}
| {% else %}
.list-node-children-container
.list-node-children-empty No items... yet!