From 7f8a5e631a4ea22ed4959a076b036ae436bb4699 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Mon, 9 Feb 2026 11:02:16 -0500 Subject: [PATCH] Show 3 previous + current (highlighted) + 21 next items in ring sidebar Ring sidebar now displays a window around the current position: 3 items behind (dimmed), the current item highlighted in blue with a play marker, and 21 items ahead. Each item shows its signed ring offset (-3 to +21). get_ring_related_products returns dicts with product and offset. Views pass offset through to JS. Server-rendered template handles both formats. --- make_post_sell/models/product.py | 36 +++++++++++-------- make_post_sell/static/css/common.css | 15 ++++++++ make_post_sell/static/js/watch.js | 23 +++++++++--- .../templates/snippets/related_content.j2 | 22 ++++++++++-- make_post_sell/views/watch.py | 9 ++++- 5 files changed, 82 insertions(+), 23 deletions(-) diff --git a/make_post_sell/models/product.py b/make_post_sell/models/product.py index 10d290d..dcf0823 100644 --- a/make_post_sell/models/product.py +++ b/make_post_sell/models/product.py @@ -697,38 +697,44 @@ def tokenize_and_stem(text): return {stem_word(w) for w in words} -def get_ring_related_products(product, ring, limit=8): - """Get related products by walking forward from current position in the ring. +def get_ring_related_products(product, ring, forward=21, backward=3): + """Get products from the ring: backward items, then forward items. - Returns a list of Product objects in ring order starting after the current product. + Returns a list of dicts: {"product": Product, "offset": int} + where offset is negative for previous, positive for next. Falls back to get_related_products if product not in ring. """ product_id_str = str(product.id) if product_id_str not in ring: - return get_related_products(product, limit=limit) + fallback = get_related_products(product, limit=forward) + return [{"product": p, "offset": i + 1} for i, p in enumerate(fallback)] idx = ring.index(product_id_str) ring_len = len(ring) - # Walk forward from current position, wrapping around - related_ids = [] - for i in range(1, ring_len): + # Collect IDs with their offsets: negative=previous, positive=next + items = [] + for i in range(backward, 0, -1): + prev_idx = (idx - i + ring_len) % ring_len + items.append((ring[prev_idx], -i)) + for i in range(1, min(forward + 1, ring_len)): next_idx = (idx + i) % ring_len - related_ids.append(ring[next_idx]) - if len(related_ids) >= limit: - break + items.append((ring[next_idx], i)) - if not related_ids: + if not items: return [] - # Fetch products and preserve ring order - products = get_products_by_ids(product.dbsession, related_ids) + all_ids = [pid for pid, _ in items] + products = get_products_by_ids(product.dbsession, all_ids) if not products: return [] - # Build lookup by ID string for ordering product_map = {str(p.id): p for p in products} - return [product_map[pid] for pid in related_ids if pid in product_map] + return [ + {"product": product_map[pid], "offset": offset} + for pid, offset in items + if pid in product_map + ] def get_related_products(product, limit=8): diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index a85a222..c9eaa6b 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -2761,6 +2761,21 @@ textarea { .related-content-row-watched { opacity: 0.45; } +.related-content-row-current { + background-color: var(--blue-color, #5871ad); + color: white; + border-radius: 4px; + padding: 4px 0; +} +.related-content-row-current .related-content-index { + color: white; +} +.related-content-now-playing { + font-weight: bold; +} +.related-content-row-prev { + opacity: 0.55; +} .ring-progress { font-size: 0.8em; diff --git a/make_post_sell/static/js/watch.js b/make_post_sell/static/js/watch.js index 9f341cf..9ef8bf6 100644 --- a/make_post_sell/static/js/watch.js +++ b/make_post_sell/static/js/watch.js @@ -561,13 +561,28 @@ } var html = headerHtml; - var visibleIndex = 0; + var currentTitle = document.title; + var insertedCurrent = false; + related.forEach(function(item) { - visibleIndex++; + var offset = item.offset || 1; var watched = isWatched(item.id); var dimClass = watched ? ' related-content-row-watched' : ''; - html += '
'; - html += '' + visibleIndex + ''; + var prevClass = offset < 0 ? ' related-content-row-prev' : ''; + + // Insert "now playing" row before the first forward item + if (offset > 0 && !insertedCurrent) { + insertedCurrent = true; + html += '
'; + html += '▶'; + html += ''; + html += '' + escapeHtml(currentTitle) + ''; + html += ''; + html += '
'; + } + + html += '
'; + html += '' + offset + ''; html += ''; if (item.thumbnail_url) { html += ''; diff --git a/make_post_sell/templates/snippets/related_content.j2 b/make_post_sell/templates/snippets/related_content.j2 index a1312a0..8d426c3 100644 --- a/make_post_sell/templates/snippets/related_content.j2 +++ b/make_post_sell/templates/snippets/related_content.j2 @@ -3,6 +3,7 @@

Up Next

{% if request.shop.watch_mode_enabled %} + {% endif %}
- {% for related in related_products %} -
- {{ loop.index }} + {% for item in related_products %} + {% if item is mapping %} + {% set related = item.product %} + {% set offset = item.offset %} + {% else %} + {% set related = item %} + {% set offset = loop.index %} + {% endif %} + {% if offset == 1 %} +
+ ▶ + + {{ product.title }} + +
+ {% endif %} +
+ {{ offset }} {% if "thumbnail1" in related.extensions %} diff --git a/make_post_sell/views/watch.py b/make_post_sell/views/watch.py index efd2632..8461646 100644 --- a/make_post_sell/views/watch.py +++ b/make_post_sell/views/watch.py @@ -90,7 +90,13 @@ def watch_json(request): related = get_related_products(product) related_data = [] - for r in related: + for item in related: + if isinstance(item, dict): + r = item["product"] + offset = item["offset"] + else: + r = item + offset = 1 r_ext = r.extensions.get("product", "") r_media = get_media_type(r_ext) r_thumb = None @@ -107,6 +113,7 @@ def watch_json(request): "thumbnail_url": r_thumb, "url": f"/{r_p_or_c}/{r.id}/{r.slug}", "media_type": r_media, + "offset": offset, }) # Check if current user is a shop editor (mod)