bitvid/torrent/views/full.html

<!-- MAIN CONTENT AREA -->
<div class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8 bv-stack">
  <!-- Input row for adding or opening torrents -->
  <section class="card p-6">
    <form
      class="bv-stack bv-stack--tight md:flex md:flex-row md:items-end md:gap-md"
      ng-submit="addMagnet()"
    >
      <div class="bv-stack bv-stack--tight flex-1">
        <label
          class="text-xs font-semibold uppercase tracking-wide text-muted-strong"
          for="torrentInput"
        >
          Magnet, hash, or HTTPS .torrent URL
        </label>
        <input
          id="torrentInput"
          class="input"
          type="text"
          placeholder="magnet:?xt=…"
          ng-model="torrentInput"
          ng-disabled="$root.disabled"
        />
      </div>

      <div class="flex flex-wrap items-center gap-3 md:justify-end">
        <button
          type="submit"
          class="btn inline-flex items-center gap-2"
          ng-disabled="!torrentInput.length || $root.disabled"
        >
          <svg
            class="h-4 w-4"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M12 3v14"></path>
            <path d="m6 11 6 6 6-6"></path>
            <path d="M19 21H5"></path>
          </svg>
          Download
        </button>

        <button
          type="button"
          class="btn-ghost inline-flex items-center gap-2"
          ngf-select="$root.seedFiles($files)"
          multiple="true"
          ng-disabled="$root.disabled"
        >
          <svg
            class="h-4 w-4"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M12 21V7"></path>
            <path d="m6 13 6-6 6 6"></path>
            <path d="M5 21h14"></path>
          </svg>
          Seed files
        </button>
      </div>
    </form>
  </section>

  <!-- ui-grid for active torrents (Name, Progress, Speeds, Peers, Ratio) -->
  <section
    class="card overflow-hidden"
    ui-grid="gridOptions"
    ui-grid-resize-columns="ui-grid-resize-columns"
    ui-grid-selection="ui-grid-selection"
    aria-label="Active torrents"
  ></section>

  <!-- Selected torrent details: Pause/Resume, Download, Remove -->
  <section class="card p-6" ng-if="selectedTorrent">
    <div class="grid gap-xl lg:grid-cols-2">
      <div class="bv-stack bv-stack--tight overflow-auto">
        <div class="bv-stack bv-stack--tight">
          <h2 class="text-lg font-semibold text-text">
            {{ selectedTorrent.name }}
          </h2>

          <div class="flex flex-wrap gap-2">
            <button
              type="button"
              class="btn-ghost inline-flex items-center gap-2"
              ng-if="!selectedTorrent.paused"
              ng-click="selectedTorrent.pause()"
            >
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
              </svg>
              Pause
            </button>

            <button
              type="button"
              class="btn-ghost inline-flex items-center gap-2"
              ng-if="selectedTorrent.paused"
              ng-click="selectedTorrent.resume()"
            >
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <polygon points="6 4 20 12 6 20 6 4"></polygon>
              </svg>
              Resume
            </button>

            <button
              type="button"
              class="btn inline-flex items-center gap-2"
              ng-click="$root.downloadAll(selectedTorrent)"
              ng-disabled="selectedTorrent.progress < 1"
            >
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path d="M12 3v14"></path>
                <path d="m6 11 6 6 6-6"></path>
              </svg>
              Download all
            </button>

            <button
              type="button"
              class="btn-ghost inline-flex items-center gap-2"
              data-variant="critical"
              ng-click="selectedTorrent.destroy($root.destroyedTorrent)"
            >
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path d="M18 6L6 18"></path>
                <path d="M6 6l12 12"></path>
              </svg>
              Remove
            </button>
          </div>
        </div>

        <div class="bv-stack bv-stack--tight">
          <h3 class="text-sm font-semibold uppercase tracking-wide text-muted">
            Share
          </h3>
          <ul class="bv-stack bv-stack--tight text-sm text-muted-strong">
            <li>
              <button
                type="button"
                class="btn-ghost inline-flex items-center gap-2 text-xs"
                ng-click="$root.copyMagnetURI(selectedTorrent)"
              >
                Copy magnet
              </button>
            </li>
            <li>
              <strong class="font-semibold text-text">Hash:</strong>
              {{ selectedTorrent.infoHash }}
            </li>
          </ul>
        </div>
      </div>

      <div class="bv-stack bv-stack--tight">
        <h3 class="text-sm font-semibold uppercase tracking-wide text-muted">
          Files
        </h3>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-border-translucent text-sm">
            <thead class="bg-surface-alt text-muted-strong">
              <tr>
                <th class="px-3 py-2 text-left font-medium">Name</th>
                <th class="px-3 py-2 text-left font-medium">Size</th>
                <th class="px-3 py-2 text-left font-medium">Priority</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-border-translucent bg-surface">
              <tr class="align-top" ng-repeat="file in selectedTorrent.files">
                <td class="px-3 py-2">
                  <span ng-hide="file.done">{{ file.name }}</span>
                  <a
                    class="text-info hover:text-info-strong"
                    ng-show="file.done"
                    ng-href="{{ file.url }}"
                    download="{{ file.name }}"
                  >
                    {{ file.name }}
                  </a>
                </td>
                <td class="px-3 py-2 text-muted-strong">
                  {{ file.length | pbytes }}
                </td>
                <td class="px-3 py-2">
                  <select
                    class="select"
                    name="{{ file.name }}Priority"
                    ng-model="file.priority"
                    ng-init="file.priority = '0'"
                    ng-change="$root.changePriority(file)"
                    aria-label="Set priority for {{ file.name }}"
                  >
                    <option value="1">High priority</option>
                    <option value="0" selected="">Low priority</option>
                    <option value="-1">Don't download</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <div class="text-center text-sm font-semibold text-muted">
    Client stats: ↓ {{ client.downloadSpeed | pbytes }}/s · ↑ {{
    client.uploadSpeed | pbytes }}/s · Ratio: {{ client.ratio | number:2 }}
  </div>
</div>

<!-- Processing Spinner -->
<div
  class="fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md"
  ng-show="client.processing"
>
  <svg
    class="h-12 w-12 animate-spin text-info-strong"
    viewBox="0 0 24 24"
    role="img"
    aria-hidden="true"
  >
    <circle
      class="stroke-border-translucent opacity-40"
      cx="12"
      cy="12"
      r="9"
      fill="none"
      stroke-width="2"
    ></circle>
    <path
      class="stroke-current"
      d="M21 12a9 9 0 0 0-9-9"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    ></path>
  </svg>
</div>