Video: new macro for showing video progress

Import video_progress_bar from '_macros/_asset_video_progress.html'
and pass it the video and current_user.

src/styles/_apps_base.sass

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

src/styles/_config.sass

@@ -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)

src/styles/components/_card.sass

@@ -81,10 +81,22 @@
 		background-position: center
 
 	.progress
-		height: 3px
+		height: 4px
 		position: absolute
-		top: -3px
+		top: -4px
 		width: 100%
 
-.progress-bar
+	&.group
-	background-color: $primary
+
+
+.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

src/templates/_macros/_asset_video_progress.pug

@@ -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 %}

src/templates/mixins/components.pug

@@ -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 + ")")

src/templates/nodes/custom/group/view_embed.pug

@@ -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,19 +89,13 @@ 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 }}")(
+				"{{ child._created | 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 %}",
+				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 %}
+				| {% if child.properties.content_type == 'video' %}
-				.progress.rounded-0
+				| {{ video_progress_bar(child, current_user) }}
-					.progress-bar(
-						role="progressbar",
-						style="width: {{ progress_in_percent }}%;",
-						aria-valuenow="{{ progress_in_percent }}",
-						aria-valuemin="0",
-						aria-valuemax="100")
 				| {% endif %}
 
 			| {% endfor %}