Add play button overlay on video thumbnails for unlocked content

Display a centered play button overlay on hero thumbnail images when
the product/content is a video file and the user has access to it.
Clicking opens the video in a new tab.

- Add CSS for .video-thumbnail-container and .video-play-overlay
- Support dark theme with appropriate contrast
- Show overlay on content.j2 for free video content
- Show overlay on product.j2 only when user has unlocked the product

make_post_sell/static/css/common.css

@@ -418,6 +418,58 @@ div.product-images img.product-main {
     height: auto;
 }
 
+/* Video play button overlay for hero thumbnails */
+.video-thumbnail-container {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.video-thumbnail-container img.product-main {
+    display: block;
+}
+
+.video-play-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.video-play-overlay::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 15px 0 15px 25px;
+    border-color: transparent transparent transparent #ffffff;
+    margin-left: 5px;
+}
+
+.video-thumbnail-container:hover .video-play-overlay {
+    background-color: rgba(0, 0, 0, 0.8);
+    transform: translate(-50%, -50%) scale(1.1);
+}
+
+[data-theme="dark"] .video-play-overlay {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] .video-play-overlay::after {
+    border-color: transparent transparent transparent #ffffff;
+}
+
+[data-theme="dark"] .video-thumbnail-container:hover .video-play-overlay {
+    background-color: rgba(255, 255, 255, 0.35);
+}
+
 /* Prevent content sections from overflowing */
 .product-description,
 .content,

make_post_sell/templates/content.j2

@@ -34,14 +34,12 @@
 
   <div class="product-images">
     {% if "thumbnail1" in product.extensions %}
-    {% if product.extensions["product"] in ["mp3", "mp4", "wav", "flac", "aac", "ogg", "wma", "m4a", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
-    <div>
-    <a target="_blank" href="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/product?ts={{ product.updated_timestamp }}">
-    <br>
-    <img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
-    <div class="play-button">click &#9654; to play!</div>
+    {% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
+    {% if product.extensions.get("product") in video_extensions %}
+    <a target="_blank" href="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/product?ts={{ product.updated_timestamp }}" class="video-thumbnail-container">
+      <img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
+      <div class="video-play-overlay"></div>
     </a>
-    </div>
     {% else %}
     <img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
     {% endif %}

make_post_sell/templates/product.j2

@@ -34,7 +34,15 @@
     <h1>{{ product.title }} <span class="subtitle-text">sold by <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
 
     {% if "thumbnail1" in product.extensions %}
+    {% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
+    {% if signed_get_object_url and product.extensions.get("product") in video_extensions %}
+    <a href="{{ signed_get_object_url }}" target="_blank" class="video-thumbnail-container">
+      <img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
+      <div class="video-play-overlay"></div>
+    </a>
+    {% else %}
     <img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
+    {% endif %}
     <br/>
     {% endif %}