Fix edit page media previews: add presigned URL generation, type-aware embeds, mock S3 in test

This commit is contained in:
russell@unturf.com 2026-02-15 11:47:27 -05:00
parent 6a536f18c9
commit 9310360903
3 changed files with 75 additions and 4 deletions

View file

@ -8,6 +8,10 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
{% block content -%}
{% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
{% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
{% set image_extensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"] %}
<div class="edit-page">
<section class="upload-product-and-preview well2">
@ -86,6 +90,20 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
<p class="bold-text">Current File: {{ product.originals["product"] }}</p>
<p>File Type: {{ product.extensions.get("product", "unknown") }}</p>
<p>File Size: {{ product.human_file_bytes("product") }}</p>
{% set ext = product.extensions.get("product", "") %}
{% if signed_product_url %}
{% if ext in video_extensions %}
<video src="{{ signed_product_url }}" controls playsinline class="edit-media-preview"></video>
{% elif ext in audio_extensions %}
<audio src="{{ signed_product_url }}" controls></audio>
{% elif ext == "pdf" %}
<iframe src="{{ signed_product_url }}" class="edit-pdf-preview"></iframe>
{% elif ext in image_extensions %}
<img src="{{ signed_product_url }}" class="edit-media-preview" />
{% endif %}
{% endif %}
{% endif %}
{% set signed_post = signed_posts["product"] %}
@ -113,6 +131,19 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
<p class="bold-text">Current File: {{ product.originals["preview"] }}</p>
<p>File Type: {{ product.extensions.get("preview", "unknown") }}</p>
<p>File Size: {{ product.human_file_bytes("preview") }}</p>
{% set preview_ext = product.extensions.get("preview", "") %}
{% set preview_url = request.app["bucket.secure_uploads.get_endpoint"] ~ "/" ~ product.s3_path ~ "/preview?ts=" ~ product.updated_timestamp %}
{% if preview_ext in video_extensions %}
<video src="{{ preview_url }}" controls playsinline class="edit-media-preview"></video>
{% elif preview_ext in audio_extensions %}
<audio src="{{ preview_url }}" controls></audio>
{% elif preview_ext == "pdf" %}
<iframe src="{{ preview_url }}" class="edit-pdf-preview"></iframe>
{% elif preview_ext in image_extensions %}
<img src="{{ preview_url }}" class="edit-media-preview" />
{% endif %}
{% endif %}
{% set signed_post = signed_posts["preview"] %}
@ -145,9 +176,20 @@ Your cover (<code>thumbnail1</code>) will show up on search pages.
<div class="upload-thumbnail-item">
{% if thumbnail_key in s3_key_thumbnails %}
{% set get_endpoint = request.app["bucket.secure_uploads.get_endpoint"] + "/" + s3_key_thumbnails[thumbnail_key] %}
<a href="{{ get_endpoint }}?ts={{ product.updated_timestamp }}"><img src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" width="120px" /></a>
{% if thumbnail_key in s3_key_thumbnails %}
{% set get_endpoint = request.app["bucket.secure_uploads.get_endpoint"] ~ "/" ~ s3_key_thumbnails[thumbnail_key] %}
{% set thumb_ext = product.extensions.get(thumbnail_key, "") %}
{% if thumb_ext in video_extensions %}
<video src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" controls playsinline class="edit-media-preview"></video>
{% elif thumb_ext in audio_extensions %}
<audio src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" controls></audio>
{% elif thumb_ext == "pdf" %}
<iframe src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" class="edit-pdf-preview"></iframe>
{% else %}
<a href="{{ get_endpoint }}?ts={{ product.updated_timestamp }}">
<img src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" class="edit-media-preview" />
</a>
{% endif %}
{% endif %}
{% if thumbnail_key in product.originals %}

View file

@ -3684,9 +3684,18 @@ class TestAnalytics(AuthenticatedFunctionalTests):
res = self.testapp.get(f"/s/{shop.id}/{shop.slug}", status=200)
self.assertNotIn('data-color-filter', res.text)
@patch("boto3.session.Session")
@patch("smtplib.SMTP")
def test_edit_page_shows_media_preview_for_product_file(self, mock_smtp):
def test_edit_page_shows_media_preview_for_product_file(self, mock_smtp, mock_session_cls):
"""Edit page renders inline media preview when product has an uploaded file."""
# Mock the S3 client so generate_presigned_url returns a fake URL
mock_client = mock_session_cls.return_value.client.return_value
mock_client.generate_presigned_url.return_value = "https://fake-cdn.example.com/signed-video"
mock_client.generate_presigned_post.return_value = {
"url": "https://fake-cdn.example.com/upload",
"fields": {},
}
shop = self._create_shop_helper()
# Create a product

View file

@ -430,6 +430,25 @@ def product_edit(request):
"is_current": i == 0,
})
signed_product_url = None
if product.has_product_file:
try:
params = {
"Bucket": request.app["bucket.secure_uploads"],
"Key": product.s3_key,
"ResponseContentDisposition": f"inline; filename={product.slug}.{product.extensions.get('product', '')}",
}
content_type = product.get_content_type("product")
if content_type:
params["ResponseContentType"] = content_type
signed_product_url = request.secure_uploads_client.generate_presigned_url(
ClientMethod="get_object",
Params=params,
ExpiresIn=900,
)
except Exception:
pass
return {
"product": product,
"title": title,
@ -437,6 +456,7 @@ def product_edit(request):
"price": price,
"visibility": visibility,
"signed_posts": signed_posts,
"signed_product_url": signed_product_url,
"locations": locations,
"inventories": inventories if product.is_physical else {},
"price_history": price_history,