Merge pull request #59 from chazlarson/new-image-picker

Add alphabet picker for all items in the library between library and items

Author: chazlarson

Plex Image Picker/app.py

@@ -37,7 +37,72 @@ def libraries():
     return render_template("libraries.html", sections=sections)
 
 
-# http://127.0.0.1:5000/browse/5?page=1&art_type=poster&art_page=1&season=3&episode=
+# new paginated item picker
+@app.route("/browse/<section_key>/items")
+def list_items(section_key):
+    plex = get_plex()
+    if not plex:
+        return redirect(url_for("connect"))
+
+    # find the right library section
+    section = next(
+        (s for s in plex.library.sections() if str(s.key) == section_key),
+        None,
+    )
+    if not section:
+        flash("Library not found.")
+        return redirect(url_for("libraries"))
+
+    # full list of items
+    all_items_full = list(section.all())
+
+    # give everything a global index
+    global_index = 1
+    for item in all_items_full:
+        item.global_index = global_index
+        global_index = global_index + 1
+
+    # optional letter filter (defaults to 'All')
+    letter = request.args.get("letter", "All")
+    if letter != "All":
+        if letter[:1].isdigit():
+            items_filtered = [
+                item
+                for item in all_items_full
+                if item.title and item.title[:1].isdigit()
+            ]
+        else:
+            items_filtered = [
+                item
+                for item in all_items_full
+                if item.title and item.title.upper().startswith(letter.upper())
+            ]
+    else:
+        items_filtered = all_items_full
+
+    # pagination params (based on filtered set)
+    total    = len(items_filtered)
+    per_page = 20
+    pages    = math.ceil(total / per_page)
+
+    # clamp page number
+    page = int(request.args.get("page", 1))
+    page = max(1, min(page, pages))
+
+    # slice out this page from filtered items
+    start      = (page - 1) * per_page
+    page_items = items_filtered[start : start + per_page]
+
+    return render_template(
+        "items.html",
+        section=section,
+        items=page_items,
+        page=page,
+        pages=pages,
+        per_page=per_page,
+        alphabet=ALPHABET,
+        letter=letter,
+    )
 
 
 @app.route("/browse/<section_key>")
@@ -54,6 +119,7 @@ def browse(section_key):
     items = list(section.all())
     pages = len(items)
     item_page = int(request.args.get("page", 1))
+    item_letter = request.args.get("letter", "All")
     item_page = max(1, min(item_page, pages))
     item = items[item_page - 1]
 
@@ -74,6 +140,7 @@ def browse(section_key):
         season_rating_key=season_rating_key,
         items=items,
         item_page=item_page,
+        item_letter=item_letter,
         pages=pages,
         art_type=art_type,
         season=season,

Plex Image Picker/templates/item.html

@@ -1,7 +1,12 @@
 <!-- templates/item.html -->
 {% extends 'base.html' %}
 {% block content %}
-<h2>{{ section.title }}: {{ item.title }}</h2>
+
+<!-- http://127.0.0.1:5000/browse/1/items?page=1&letter=O -->
+<!-- item_page -->
+<!-- item_letter -->
+
+<h2><a href="{{ url_for('list_items', section_key=section.key, page=item_page, letter=item_letter) }}">{{ section.title }}</a>: {{ item.title }}</h2>
 <div class="d-flex justify-content-between mb-3">
   <div>
     <a href="{{ url_for('browse', section_key=section.key, page=1) }}" class="btn btn-outline-secondary btn-sm">First Item</a>

Plex Image Picker/templates/items.html

@@ -0,0 +1,76 @@
+{% extends 'base.html' %}
+
+{% block content %}
+  <h2>{{ section.title }} – Pick an Item</h2>
+
+  {# ——— Alphabet picker with index‑based active highlighting ——— #}
+  {% set current_index = 0 %}
+  {% if letter != 'All' %}
+    {# Find the position of the selected letter in the alphabet list (0‑based). #}
+    {% set current_index = alphabet.index(letter) + 1 %}
+  {% endif %}
+
+  <div class="btn-group mb-3" role="group" aria-label="Alphabet filter">
+    {% for loop_letter in ['All'] + alphabet %}
+      {% set idx = loop.index0 %}
+      <a href="{{ url_for('list_items',
+                           section_key=section.key,
+                           page=1,
+                           letter=loop_letter) }}"
+         class="btn btn-sm btn-outline-secondary{% if idx == current_index %} active{% endif %}">
+        {{ loop_letter }}
+      </a>
+    {% endfor %}
+  </div>
+
+  <ul class="list-group mb-4">
+    {% for item in items %}
+      <li class="list-group-item">
+        {# calculate the global index for browse → item_page #}
+        {% set global_index = (page - 1) * per_page + loop.index %}
+        <a href="{{ url_for('browse',
+                             section_key=section.key,
+                             page=item.global_index,
+                             letter=letter) }}">
+          {{ item.title }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+
+  <nav aria-label="Page navigation">
+    <ul class="pagination">
+      <li class="page-item{% if page <= 1 %} disabled{% endif %}">
+        <a class="page-link"
+           href="{{ url_for('list_items',
+                            section_key=section.key,
+                            page=page-1,
+                            letter=letter) }}">
+          Previous
+        </a>
+      </li>
+
+      {% for p in range(1, pages+1) %}
+        <li class="page-item{% if p == page %} active{% endif %}">
+          <a class="page-link"
+             href="{{ url_for('list_items',
+                              section_key=section.key,
+                              page=p,
+                              letter=letter) }}">
+              {{ p }}
+          </a>
+        </li>
+      {% endfor %}
+
+      <li class="page-item{% if page >= pages %} disabled{% endif %}">
+        <a class="page-link"
+           href="{{ url_for('list_items',
+                            section_key=section.key,
+                            page=page+1,
+                            letter=letter) }}">
+          Next
+        </a>
+      </li>
+    </ul>
+  </nav>
+{% endblock %}