Add version history

app.html

@@ -80,11 +80,12 @@
     <div id="whats-new" class="section">
       <div class="header">
         <h2>What's New</h2>
-        <p id="version-date">Apr 10, 2023</p>
+        <!-- <p id="version-size">0 KB</p> -->
+        <a id="version-history" style="color: var(--app-tint-color);" href="http://">Version History</a>
       </div>
       <div class="header">
         <p id="version">Version 2.0</p>
-        <p id="version-size">0 KB</p>
+        <p id="version-date">Apr 10, 2023</p>
       </div>
       <p id="version-description">
         The quick brown fox jumps over the lazy dog.

css/app.css

@@ -126,12 +126,8 @@ a {
   padding: 0;
 }
 
-#whats-new .header>p:first-of-type {
-  opacity: 0.5;
-}
-
 #whats-new .header>p {
-  opacity: 0.35;
+  opacity: 0.5;
 }
 
 #whats-new #version-date {

css/style.css

@@ -220,7 +220,7 @@ body {
 .header {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
   padding: 0 1rem;
 }

css/version-history.css

@@ -0,0 +1,81 @@
+#main {
+  padding-top: 8rem;
+}
+
+a {
+  color: var(--app-tint-color);
+}
+
+#versions {
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  /* gap: 1em; */
+}
+
+.version {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 0.1px solid var(--color-separator);
+  padding: 1.25em 0;
+}
+
+.version:first-of-type {
+  padding-top: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .version {
+    border-color: var(--color-separator-dark) !important;
+  }
+}
+
+.version-header, .version-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 0.5em;
+}
+
+.version-options {
+  color: var(--app-tint-color);
+}
+
+.version-number {
+  font-weight: 600;
+}
+
+.version-date {
+  opacity: 0.5;
+}
+
+.version-description {
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+  word-wrap: break-word;
+  line-height: 1.5em;
+}
+
+#more button {
+  min-width: 0 !important;
+  margin-left: 2px !important;
+  padding: 0;
+  font-size: 15px;
+  font-weight: 500;
+  text-transform: none;
+  border-radius: 4px;
+  border: none;
+  background: unset;
+  color: var(--accent-color);
+  cursor: pointer;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding-left: 36px;
+  background: linear-gradient(to right, transparent, var(--color-bg) 35%);
+  line-height: 1.5em;
+}

js/app.js

@@ -7,7 +7,7 @@
 //
 
 import { urlSearchParams, sourceURL, legacyPermissions } from "./constants.js";
-import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString } from "./utilities.js";
+import { formatString, insertSpaceInCamelString, insertSpaceInSnakeString, exit, formatVersionDate } from "./utilities.js";
 import { main } from "./main.js";
 import { privacy, entitlements } from "./constants.js";
 import { AppPermissionItem } from "./components/AppPermissionItem.js";
@@ -129,19 +129,9 @@ main((json) => {
     const versionNumberElement = document.getElementById("version");
     const versionSizeElement = document.getElementById("version-size");
     const versionDescriptionElement = document.getElementById("version-description");
-    const versionDate = new Date(app.versionDate),
-        month = versionDate.toUTCString().split(" ")[2],
-        date = versionDate.getDate();
-    const today = new Date();
-    const msPerDay = 60 * 60 * 24 * 1000;
-    const msDifference = today.valueOf() - versionDate.valueOf();
 
     // Version date
-    versionDateElement.textContent = versionDate.valueOf() ? `${month} ${date}, ${versionDate.getFullYear()}` : app.versionDate.split("T")[0];
-    if (msDifference <= msPerDay && today.getDate() == versionDate.getDate())
-        versionDateElement.textContent = "Today";
-    else if (msDifference <= msPerDay * 2)
-        versionDateElement.textContent = "Yesterday";
+    versionDateElement.textContent = formatVersionDate(app.versionDate);
 
     // Version number
     versionNumberElement.textContent = `Version ${app.version}`;
@@ -153,13 +143,16 @@ main((json) => {
         i++;
         appSize = parseFloat(appSize / 1024).toFixed(1);
     }
-    versionSizeElement.textContent = `${appSize} ${units[i]}`;
+    // versionSizeElement.textContent = `${appSize} ${units[i]}`;
 
     // Version description
     versionDescriptionElement.innerHTML = formatString(app.versionDescription);
     if (versionDescriptionElement.scrollHeight > versionDescriptionElement.clientHeight)
         versionDescriptionElement.insertAdjacentHTML("beforeend", more);
 
+    // Version history
+    document.getElementById("version-history").href = `version-history.html?source=${sourceURL}&id=${app.bundleIdentifier}`;
+
     // 
     // Permissions
 
@@ -223,7 +216,3 @@ main((json) => {
     sourceContainer.href = `index.html?source=${sourceURL}`;
     sourceSubtitle.innerText = json.description ?? "Tap to get started";
 });
-
-function exit() {
-    window.location.replace(`index.html?source=${sourceURL}`);
-}

js/components/AppPermissionItem.js

@@ -6,10 +6,7 @@
 //
 
 export const AppPermissionItem = (name, icon, details) => `
-    <a class="permission-item"
-        onclick="alert('${details?.replace(/(['"])/g, "\\$1") ?? "altsource-viewer does not have detailed information about this entitlement."}');"
-    >
+<a class="permission-item" onclick="alert('${details?.replace(/(['"])/g, "\\$1") ?? "altsource-viewer does not have detailed information about this entitlement."}');">
     <p><i class="bi-${icon}"></i></p>
     <p class="title">${name}</p>
-    </a>
-`;
+</a>`;

js/components/MoreButton.js

@@ -0,0 +1,23 @@
+//
+//  MoreButton.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+export const MoreButton = tintColor => `
+<a id="more" onclick="revealTruncatedText(this);">
+    <button style="color: ${tintColor};">more</button>
+</a>`;
+
+window.revealTruncatedText = moreButton => {
+    console.log(moreButton);
+    const textId = moreButton.parentNode.id;
+    const text = document.getElementById(textId);
+    text.style.display = "block";
+    text.style.overflow = "auto";
+    text.style.webkitLineClamp = "none";
+    text.style.lineClamp = "none";
+    text.removeChild(moreButton)
+};

js/components/VersionHistoryItem.js

@@ -0,0 +1,20 @@
+//
+//  VersionHistoryItem.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+export const VersionHistoryItem = (number, date, description, url, i) => `
+<div class="version">
+    <div class="version-header">
+        <p class="version-number">${number}</p>
+        <p class="version-date">${date}</p>
+    </div>
+    <div class="version-options">
+        <a class="version-install" href="altstore://install?url=${url}">Install with AltStore</a>
+        <a class="version-download" href="${url}">Download IPA</a>
+    </div>
+    <p class="version-description" id="description${i}">${description}</p>
+</div>`;

js/utilities.js

@@ -10,6 +10,27 @@ import { AltStoreBanner } from "./components/AltStoreBanner.js";
 import { NavigationBar } from "./components/NavigationBar.js";
 import { urlRegex } from "./constants.js";
 
+export function formatVersionDate(arg) {
+    const versionDate = new Date(arg),
+        month = versionDate.toUTCString().split(" ")[2],
+        date = versionDate.getDate();
+    const today = new Date();
+    const msPerDay = 60 * 60 * 24 * 1000;
+    const msDifference = today.valueOf() - versionDate.valueOf();
+
+    let dateString = versionDate.valueOf() ? `${month} ${date}, ${versionDate.getFullYear()}` : app.versionDate.split("T")[0];
+    if (msDifference <= msPerDay && today.getDate() == versionDate.getDate())
+        dateString = "Today";
+    else if (msDifference <= msPerDay * 2)
+        dateString = "Yesterday";
+    
+    return dateString;
+}
+
+export function exit() {
+    window.location.replace(`index.html?source=${sourceURL}`);
+}
+
 export function insertSpaceInSnakeString(string) {
     return string.split(".").slice(-1)[0].split("-").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
@@ -67,7 +88,7 @@ export function setTintColor(color) {
 }
 
 export function setUpBackButton() {
-    document.getElementById("back")?.addEventListener("click", () => history.back(1));
+    document.getElementById("back")?.addEventListener("click", () => history.back());
 }
 
 export function search() {

js/versionHistory.js

@@ -0,0 +1,46 @@
+//
+//  versionHistory.js
+//  altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+//
+//  Copyright (c) 2023 Foxster.
+//  MIT License.
+//
+
+import { urlSearchParams } from "./constants.js";
+import { insertNavigationBar, exit, formatVersionDate, formatString } from "./utilities.js";
+import { main } from "./main.js";
+import { MoreButton } from "./components/MoreButton.js";
+import { VersionHistoryItem } from "./components/VersionHistoryItem.js";
+
+if (!urlSearchParams.has('id')) exit();
+const bundleId = urlSearchParams.get('id');
+
+insertNavigationBar("Version History");
+
+main((json) => {
+    const app = getAppWithBundleId(bundleId);
+    console.log(app.versions);
+
+    // Set tab title
+    document.title = `Version History - ${app.name}`;
+
+    // Set tint color
+    const tintColor = `#${app.tintColor?.replaceAll("#", "")}`;
+    if (tintColor) document.querySelector(':root').style.setProperty("--app-tint-color", `${tintColor}`);
+    document.getElementById("back").style.color = tintColor;
+
+    const versionsContainer = document.getElementById("versions");
+    if (app.versions) {
+        app.versions.forEach((version, i) => {
+            versionsContainer.insertAdjacentHTML("beforeend", VersionHistoryItem(version.version, formatVersionDate(version.date), formatString(version.localizedDescription), version.downloadURL, i))
+        });
+    } else {
+        versionsContainer.insertAdjacentHTML("beforeend", VersionHistoryItem(app.version, formatVersionDate(app.versionDate), formatString(app.versionDescription), app.downloadURL, 0))
+    }
+
+    document.querySelectorAll(".version-description").forEach(element => {
+        console.log(MoreButton(tintColor));
+        if (element.scrollHeight > element.clientHeight)
+            element.insertAdjacentHTML("beforeend", MoreButton(tintColor));
+    });
+});

version-history.html

@@ -0,0 +1,33 @@
+<!-- 
+    news.html
+    altsource-viewer (https://github.com/therealFoxster/altsource-viewer)
+
+    Copyright (c) 2023 Foxster.
+    MIT License.
+ -->
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/version-history.css">
+</head>
+
+<body class="loading">
+    <div id="loading">
+        <img src="img/loading.gif" alt="loading">
+        <p>Loading</p>
+    </div>
+    <!-- Add to AltStore banner & navigation bar -->
+    <div id="top"></div>
+    <div id="main">
+        <div id="versions"></div>
+    </div>
+    <script src="js/versionHistory.js" type="module"></script>
+</body>
+
+</html>