feat: ✨ Skip back or forward (fix #159)

Reviewed-on: #194

.dockerignore

@@ -9,5 +9,6 @@
 
 /node_modules/
 /js/
+/css/
 
 /build/

.eslintrc.cjs

@@ -1,9 +1,11 @@
 module.exports = {
 	extends: [
 		'@nextcloud',
+		'@vue/eslint-config-typescript/recommended',
 		'plugin:pinia/recommended',
 		'plugin:prettier/recommended',
 	],
+	parser: 'vue-eslint-parser',
 	rules: {
 		'jsdoc/require-jsdoc': 'off',
 		'vue/first-attribute-linebreak': 'off',

.gitea/workflows/repod.yml

@@ -14,7 +14,7 @@ jobs:
 
   php:
     runs-on: ubuntu-latest
-    container: nextcloud:29
+    container: nextcloud:30
     steps:
       - run: apt-get update
       - run: apt-get install -y git nodejs
@@ -30,15 +30,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: skjnldsv/read-package-engines-version-actions@v3
-        id: versions
-        with:
-          fallbackNode: '^20'
-          fallbackNpm: '^10'
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ steps.versions.outputs.nodeVersion }}
+          node-version: "^20"
-      - run: npm i -g npm@${{ steps.versions.outputs.npmVersion }}
       - run: npm ci
       - run: npm run lint
       - run: npm run stylelint
@@ -47,22 +41,16 @@ jobs:
   release:
     if: gitea.ref_type == 'tag'
     runs-on: ubuntu-latest
-    container: nextcloud:29
+    container: nextcloud:30
     steps:
       - run: apt-get update
       - run: apt-get install -y git nodejs
       - uses: actions/checkout@v4
       - run: curl -sSLo /usr/local/bin/composer https://getcomposer.org/download/latest-stable/composer.phar
       - run: chmod +x /usr/local/bin/composer
-      - uses: skjnldsv/read-package-engines-version-actions@v3
-        id: versions
-        with:
-          fallbackNode: '^20'
-          fallbackNpm: '^10'
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ steps.versions.outputs.nodeVersion }}
+          node-version: "^20"
-      - run: npm i -g npm@${{ steps.versions.outputs.npmVersion }}
       - run: make dist
       - uses: akkuman/gitea-release-action@v1
         with:

.gitignore

@@ -9,5 +9,6 @@
 
 /node_modules/
 /js/
+/css/
 
 /build/

.l10nignore

@@ -9,5 +9,6 @@ tests/.phpunit.cache
 
 node_modules/
 js/
+css/
 
 build/

.php-cs-fixer.dist.php

@@ -15,7 +15,6 @@ class MyConfig extends Config
 		$rules['curly_braces_position']['classes_opening_brace'] = 'next_line_unless_newline_at_signature_end';
 		$rules['phpdoc_separation'] = false;
 		$rules['phpdoc_to_comment'] = false;
-		$rules['single_line_comment_style'] = false;
 		return $rules;
 	}
 }

CHANGELOG.md

@@ -1,4 +1,63 @@
-## 3.0.0 - 2024-08-17
+## 3.3.2 - What a Nightmare - 2024-10-24
+
+### Fixed
+- 🚑 Revert [#178](https://git.crystalyx.net/Xefir/repod/issues/178) not working on big subscriptions lists
+[#182](https://git.crystalyx.net/Xefir/repod/issues/182) reported by @SteveDinn
+
+## 3.3.1 - Breaking the Loop - 2024-10-24
+
+### Changed
+- ⚡ Speed up the loading time of subscriptions
+[#178](https://git.crystalyx.net/Xefir/repod/issues/178) reported by @MikeAndrews
+
+### Fixed
+- 🐛 Prevent Firefox for going nuts when having Plasma Integration addon installed
+[#164](https://git.crystalyx.net/Xefir/repod/issues/164) reported by @cichy1173, @Share1440 and @mark.collins
+
+## 3.3.0 - Into The Jet Lag - 2024-10-18
+
+### Changed
+- 🧑‍💻 CSS isn't mixed in the main JS file anymore
+
+### Fixed
+- 🐛 App won't load on Firefox 115
+[#158](https://git.crystalyx.net/Xefir/repod/issues/158) reported by @Jaunty and @mark.collins
+- 🔇 Volume slider didn't work properly
+
+### Deprecated
+- 💣 Require Nextcloud 29 or more
+
+## 3.2.0 - Typing fast - 2024-09-15
+
+### Added
+- 📝 Add Cardo to list of compatible clients
+[#176](https://github.com/thrillfall/nextcloud-gpodder/pull/176) reported by @n0vella
+
+### Changed
+- 🧑‍💻 Switch entiere project to TypeScript
+
+### Fixed
+- 💄 Missing icon on home when aren't any favorites
+- 💄 Tweaks spacing in several spaces on Home and banners
+- 💩 Leverage the available space between the episode title and the play button (but hacky way for now)
+[#59](https://git.crystalyx.net/Xefir/repod/issues/59#issuecomment-6246) reported by @W_LL_M
+
+## 3.1.0 - Above the stars - 2024-09-02
+
+### Added
+- ⭐ You can now add favorites subscriptions !
+It will show's up on the homepage instead of the recommendations witch appear only when you add a new subscription.
+[#59](https://git.crystalyx.net/Xefir/repod/issues/59) suggested by @W_LL_M, @Jaunty and @Satalink
+
+### Changed
+- 💥 Use html5 routing instead of hashes. All the URLs has changed removing the `#/` part.
+
+### Fixed
+- 🐛 Regression on 3.0 that prevent seeking player to episode last listened position
+[#136](https://git.crystalyx.net/Xefir/repod/issues/136) reported by @randomuser1967
+- ⚡ Improve the detection off mis-installed or mis-enabled gpodder app
+
+## 3.0.0 - What a vue - 2024-08-17
 
 ### Added
 - 🌐 Add german translation
@@ -16,7 +75,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Removed
 - 🗑️ Temporary replacing @nextcloud/dialogs to toastyjs
 
-## 2.3.3 - 2024-06-14
+## 2.3.3 - The Cake is a Lie - 2024-06-14
 
 ### Changed
 - ⬆️ Update @nextcloud/dialogs to 5.3.2
@@ -25,18 +84,18 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 - 🐛 App crashed when no cache system available
 [#107](https://git.crystalyx.net/Xefir/repod/issues/107) reported by @skvaller and @PhilTraere
 
-## 2.3.2 - 2024-05-31
+## 2.3.2 - Young Youth - 2024-05-31
 
 ### Fixed
 - 🐛 New subscribe button on search not disapearing if subscribed
 - ♿ Missing accessibility label on this button as well
 
-## 2.3.1 - 2024-05-29
+## 2.3.1 - Powerwash the Universe - 2024-05-29
 
 ### Changed
 - ⚡ Reduce app size by not shipping sourcemap
 
-## 2.3.0 - 2024-05-29
+## 2.3.0 - Star Align - 2024-05-29
 
 ### Added
 - ➕ Ability to subscribe to podcast from search list
@@ -53,12 +112,12 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 - ⚰️ Drop support for PHP 8.0
 - 🌐 Removed babel
 
-## 2.2.1 - 2024-05-18
+## 2.2.1 - Shami was here - 2024-05-18
 
 ### Removed
 - ♻️ Rollback: Hide unreadable episodes because of insecure sources
 
-## 2.2.0 - 2024-05-18
+## 2.2.0 - Moving in and out - 2024-05-18
 
 ### Added
 - 🚨 Linting the code with ESLint
@@ -70,7 +129,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - 🔓 Hide unreadable episodes because of insecure sources
 
-## 2.1.0 - 2024-03-16
+## 2.1.0 - Pocket Gundams - 2024-03-16
 
 ### Added
 - 🔍 Add CTA for rating the app on the store
@@ -84,7 +143,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 - 🔒 App wasn't working for non admin users
 [#76](https://git.crystalyx.net/Xefir/repod/issues/76) reported by @devasservice
 
-## 2.0.0 - 2024-03-05
+## 2.0.0 - Taking Actions - 2024-03-05
 
 ### Added
 - 🍪 Saving filters preference
@@ -101,13 +160,13 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - ❤️‍🔥 Better handling ended episodes
 
-## 1.5.9 - 2024-02-21
+## 1.5.9 - Just According to Keikaku - 2024-02-21
 
 ### Changed
 - 🧑‍💻 Change some endpoints to match gPodder.net "specifications"
 - ⬆️ Update @nextcloud/vue to 8.7.0
 
-## 1.5.8 - 2024-02-11
+## 1.5.8 - Goblet of Eonothem - 2024-02-11
 
 ### Fixed
 - Fyyd API sometime send empty feeds, ignoring them
@@ -125,19 +184,19 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Changed
 - Update @nextcloud/vue to v8.6.2
 
-## 1.5.5 - 2024-02-04
+## 1.5.5 - Hide and seek - 2024-02-04
 
 ### Fixed
 - Can't open podcast details if cache missing or misconfigured
 [#58](https://git.crystalyx.net/Xefir/repod/issues/58) reported by @raxventus
 
-## 1.5.4 - 2024-02-03
+## 1.5.4 - In search of the truth - 2024-02-03
 
 ### Fixed
 - Nextcloud search engine didn't work on Nextcloud 26 and 27
 [#57](https://git.crystalyx.net/Xefir/repod/issues/57) reported by @JonOfUs
 
-## 1.5.3 - 2024-02-01
+## 1.5.3 - The date where it all ends - 2024-02-01
 
 ### Changed
 - Update @nextcloud/vue to v8.6.1
@@ -145,7 +204,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - Fix episode listing crashing if an invalid publication date is present in the RSS
 
-## 1.5.2 - 2024-02-01
+## 1.5.2 - A little to the top - 2024-02-01
 
 ### Changed
 - Update @nextcloud/router to v3.0.0
@@ -153,7 +212,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - Fix player alignment off by a couple of pixels
 
-## 1.5.1 - 2024-01-30
+## 1.5.1 - Play on the PlayHead - 2024-01-30
 
 ### Changed
 - Update @nextcloud/vue to v8.6.0
@@ -163,7 +222,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - Force the placement of the filter settings to the top
 
-## 1.5.0 - 2024-01-30
+## 1.5.0 - Featuring the filtering - 2024-01-30
 
 ### Added
 - Filtering options for each podcast section

Dockerfile

@@ -1,4 +1,4 @@
-FROM nextcloud:29
+FROM nextcloud:30
 
 ENV NEXTCLOUD_UPDATE=1
 ENV NEXTCLOUD_ADMIN_USER=repod

Makefile

@@ -140,8 +140,8 @@ appstore:
 	--exclude="$(app_name)/protractor\.*" \
 	--exclude="$(app_name)/.*" \
 	--exclude="$(app_name)/js/.*" \
-	--exclude="$(app_name)/webpack.js" \
+	--exclude="$(app_name)/tsconfig.json" \
-	--exclude="$(app_name)/stylelint.config.js" \
+	--exclude="$(app_name)/stylelint.config.cjs" \
 	--exclude="$(app_name)/README.md" \
 	--exclude="$(app_name)/package-lock.json" \
 	--exclude="$(app_name)/LICENSE" \
@@ -153,7 +153,7 @@ appstore:
 	--exclude="$(app_name)/Dockerfile" \
 	--exclude="$(app_name)/psalm.xml" \
 	--exclude="$(app_name)/renovate.json" \
-	--exclude="$(app_name)/vite.config.mjs" \
+	--exclude="$(app_name)/vite.config.ts" \
 	$(app_name)
 
 # Start a nextcloud server on Docker to kickstart developement

README.md

@@ -39,6 +39,9 @@ You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) inst
 ### Homepage
 ![homepage](./screens/index.png)
 
+### Discover
+![homepage](./screens/discover.png)
+
 ### Search
 ![search](./screens/search.png)
 
@@ -55,11 +58,16 @@ You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) inst
 | [AntennaPod](https://antennapod.org) | Initial purpose for this project, as a synchronization endpoint for this client.<br> Support is available [as of version 2.5.1](https://github.com/AntennaPod/AntennaPod/pull/5243/). |
 | [KDE Kasts](https://apps.kde.org/de/kasts/) | Supported since version 21.12 |
 | [Podcast Merlin](https://github.com/yoyoooooooooo/Podcast-Merlin--Nextcloud-Gpodder-Client-For-Windows) | Full sync support podcast client for Windows |
+| [Cardo](https://cardo-podcast.github.io/#/cardo) | Podcast client with sync support, for Windows, Mac and Linux |
 
 ## Installation
 
 Either from the official Nextcloud [app store](https://apps.nextcloud.com/apps/repod) or by downloading the [latest release](https://git.crystalyx.net/Xefir/repod/releases/latest) and extracting it into your Nextcloud `apps/` directory.
 
+## Known issues
+
+- Conflict with Plasma Integration Firefox addon ([#164](https://git.crystalyx.net/Xefir/repod/issues/164))
+
 ## Credits
 
 - [GPodder Sync](https://github.com/thrillfall/nextcloud-gpodder) for the database API

appinfo/info.xml

@@ -7,11 +7,14 @@
     <description><![CDATA[## Features
 - 🔍 Browse and subscribe huge collection of podcasts
 - 🔊 Listen to episodes directly in Nextcloud
-- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)
+- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)
+- 📱 Mobile friendly interface
+- 📡 Import and export your subscriptions
+- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)
 
 ## Requirements
 You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!]]></description>
-    <version>3.0.0</version>
+    <version>3.3.2</version>
     <licence>agpl</licence>
     <author mail="xefir@crystalyx.net" homepage="https://crystalyx.net">Michel Roux</author>
     <namespace>RePod</namespace>
@@ -20,17 +23,21 @@ You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) inst
     <website>https://git.crystalyx.net/Xefir/repod</website>
     <bugs>https://git.crystalyx.net/Xefir/repod/issues</bugs>
     <screenshot>https://git.crystalyx.net/Xefir/repod/raw/branch/main/screens/index.png</screenshot>
+    <screenshot>https://git.crystalyx.net/Xefir/repod/raw/branch/main/screens/discover.png</screenshot>
     <screenshot>https://git.crystalyx.net/Xefir/repod/raw/branch/main/screens/search.png</screenshot>
     <screenshot>https://git.crystalyx.net/Xefir/repod/raw/branch/main/screens/episodes.png</screenshot>
     <screenshot>https://git.crystalyx.net/Xefir/repod/raw/branch/main/screens/modal.png</screenshot>
     <dependencies>
         <php min-version="8.1"/>
-        <nextcloud min-version="27" max-version="30"/>
+        <nextcloud min-version="29" max-version="30"/>
     </dependencies>
     <navigations>
         <navigation>
+            <id>repod</id>
             <name>Podcast</name>
             <route>repod.page.index</route>
+            <icon>app.svg</icon>
+            <type>link</type>
         </navigation>
     </navigations>
 </info>

appinfo/routes.php

@@ -1,25 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-/**
- * Create your routes in here. The name is the lowercase name of the controller
- * without the controller part, the stuff after the hash is the method.
- * e.g. page#index -> OCA\RePod\Controller\PageController->index().
- *
- * The controller class has to be registered in the application.php file since
- * it's instantiated in there
- */
-return [
-	'routes' => [
-		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
-		['name' => 'episodes#action', 'url' => '/episodes/action', 'verb' => 'GET'],
-		['name' => 'episodes#list', 'url' => '/episodes/list', 'verb' => 'GET'],
-		['name' => 'opml#export', 'url' => '/opml/export', 'verb' => 'GET'],
-		['name' => 'opml#import', 'url' => '/opml/import', 'verb' => 'POST'],
-		['name' => 'podcast#index', 'url' => '/podcast', 'verb' => 'GET'],
-		['name' => 'search#index', 'url' => '/search', 'verb' => 'GET'],
-		['name' => 'toplist#hot', 'url' => '/toplist/hot', 'verb' => 'GET'],
-		['name' => 'toplist#new', 'url' => '/toplist/new', 'verb' => 'GET'],
-	],
-];

composer.json

@@ -15,10 +15,10 @@
 		"psalm": "psalm --threads=1 --no-cache --show-info=true"
 	},
 	"require-dev": {
-		"nextcloud/ocp": "^29.0.4",
+		"nextcloud/ocp": "^30.0.2",
 		"roave/security-advisories": "dev-latest",
-		"nextcloud/coding-standard": "^1.2.1",
+		"nextcloud/coding-standard": "^1.3.2",
-		"vimeo/psalm": "^5.25.0"
+		"vimeo/psalm": "^5.26.1"
 	},
 	"config": {
 		"optimize-autoloader": true,

l10n/de.js

@@ -5,7 +5,7 @@ OC.L10N.register(
     "Podcast" : "Podcast",
     "RePod" : "RePod",
     "🔊 Browse, manage and listen to podcasts" : "🔊 Suchen, Verwalten und Anhören von Podcasts",
-    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Funktionen\n- 🔍 Durchsuchen und abonnieren einer großen Sammlung von Podcasts\n- 🔊 Episoden direkt in Nextcloud anhören\n- 🌐 Synchronisiere deine Aktivität mit [AntennaPod](https://antennapod.org/)\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
+    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Mobile friendly interface\n- 📡 Import and export your subscriptions\n- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Funktionen\n- 🔍 Durchsuchen und abonnieren einer großen Sammlung von Podcasts\n- 🔊 Episoden direkt in Nextcloud anhören\n- 🌐 Synchronisiere deine Aktivität mit [AntennaPod](https://antennapod.org/)\n- 📱 Mobile-freundliche Schnittstelle\n- 📡 Importieren und Exportieren Ihrer Abonnements\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
     "Download" : "Herunterladen",
     "Add a RSS link" : "Einen RSS-Link hinzufügen",
     "Subscribe" : "Abonnieren",
@@ -18,11 +18,15 @@ OC.L10N.register(
     "Link copied to the clipboard" : "Der Link des Feeds wurde in die Zwischenablage kopiert",
     "Play" : "Abspielen",
     "Stop" : "Stopp",
-    "Mark as read" : "Als gelesen markieren",
+    "Read" : "Gelesen",
-    "Mark as unread" : "Als ungelesen markieren",
     "Open website" : "Webseite aufrufen",
-    "Could not fetch episodes" : "Folgen können nicht abgerufen werden",
     "Could not change the status of the episode" : "Kann den Status der Folge nicht ändern",
+    "Could not fetch episodes" : "Folgen können nicht abgerufen werden",
+    "Rewind 10 seconds" : "10 Sekunden zurückspulen",
+    "Pause" : "Pause",
+    "Fast forward 30 seconds" : "30 Sekunden vorspulen",
+    "Mute" : "Stumm",
+    "Unmute" : "Stummschalten",
     "Export subscriptions" : "Abonnements exportieren",
     "Filtering episodes" : "Folgen filtern",
     "Show all" : "Zeige alles",
@@ -33,13 +37,18 @@ OC.L10N.register(
     "Import OPML file" : "Importiere OPML-Datei",
     "Rate RePod ❤️" : "Bewerte RePod ❤️",
     "Playback speed" : "Wiedergabegeschwindigkeit",
+    "Favorite" : "Favorit",
     "Are you sure you want to delete this subscription?" : "Bist Du sicher, dass Du das Abonnement löschen möchtest?",
     "Error while removing the feed" : "Fehler beim Löschen des Feeds",
+    "You can only have 10 favorites" : "Du kannst nur 10 Favoriten haben",
     "Add a podcast" : "Einen Podcast hinzufügen",
     "Could not fetch subscriptions" : "Abonnements können nicht abgerufen werden",
     "Find a podcast" : "Finde einen Podcast",
     "Error loading feed" : "Fehler beim Laden des Feeds",
     "Missing required app" : "Benötigte App fehlt",
-    "Install GPodder Sync" : "Installiere GPodder Sync"
+    "Install GPodder Sync" : "Installiere GPodder Sync",
+    "Pin some subscriptions to see their latest updates" : "Pinne einige Abonnements, um ihre neuesten Updates zu sehen",
+    "No favorites" : "Keine Favoriten",
+    "A browser extension conflict with RePod" : "Ein Browser-Erweiterungskonflikt mit RePod"
 },
 "");

l10n/de.json

@@ -3,7 +3,7 @@
     "Podcast" : "Podcast",
     "RePod" : "RePod",
     "🔊 Browse, manage and listen to podcasts" : "🔊 Suchen, Verwalten und Anhören von Podcasts",
-    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Funktionen\n- 🔍 Durchsuchen und abonnieren einer großen Sammlung von Podcasts\n- 🔊 Episoden direkt in Nextcloud anhören\n- 🌐 Synchronisiere deine Aktivität mit [AntennaPod](https://antennapod.org/)\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
+    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Mobile friendly interface\n- 📡 Import and export your subscriptions\n- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Funktionen\n- 🔍 Durchsuchen und abonnieren einer großen Sammlung von Podcasts\n- 🔊 Episoden direkt in Nextcloud anhören\n- 🌐 Synchronisiere deine Aktivität mit [AntennaPod](https://antennapod.org/)\n- 📱 Mobile-freundliche Schnittstelle\n- 📡 Importieren und Exportieren Ihrer Abonnements\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
     "Download" : "Herunterladen",
     "Add a RSS link" : "Einen RSS-Link hinzufügen",
     "Subscribe" : "Abonnieren",
@@ -16,11 +16,15 @@
     "Link copied to the clipboard" : "Der Link des Feeds wurde in die Zwischenablage kopiert",
     "Play" : "Abspielen",
     "Stop" : "Stopp",
-    "Mark as read" : "Als gelesen markieren",
+    "Read" : "Gelesen",
-    "Mark as unread" : "Als ungelesen markieren",
     "Open website" : "Webseite aufrufen",
-    "Could not fetch episodes" : "Folgen können nicht abgerufen werden",
     "Could not change the status of the episode" : "Kann den Status der Folge nicht ändern",
+    "Could not fetch episodes" : "Folgen können nicht abgerufen werden",
+    "Rewind 10 seconds" : "10 Sekunden zurückspulen",
+    "Pause" : "Pause",
+    "Fast forward 30 seconds" : "30 Sekunden vorspulen",
+    "Mute" : "Stumm",
+    "Unmute" : "Stummschalten",
     "Export subscriptions" : "Abonnements exportieren",
     "Filtering episodes" : "Folgen filtern",
     "Show all" : "Zeige alles",
@@ -31,13 +35,18 @@
     "Import OPML file" : "Importiere OPML-Datei",
     "Rate RePod ❤️" : "Bewerte RePod ❤️",
     "Playback speed" : "Wiedergabegeschwindigkeit",
+    "Favorite" : "Favorit",
     "Are you sure you want to delete this subscription?" : "Bist Du sicher, dass Du das Abonnement löschen möchtest?",
     "Error while removing the feed" : "Fehler beim Löschen des Feeds",
+    "You can only have 10 favorites" : "Du kannst nur 10 Favoriten haben",
     "Add a podcast" : "Einen Podcast hinzufügen",
     "Could not fetch subscriptions" : "Abonnements können nicht abgerufen werden",
     "Find a podcast" : "Finde einen Podcast",
     "Error loading feed" : "Fehler beim Laden des Feeds",
     "Missing required app" : "Benötigte App fehlt",
-    "Install GPodder Sync" : "Installiere GPodder Sync"
+    "Install GPodder Sync" : "Installiere GPodder Sync",
+    "Pin some subscriptions to see their latest updates" : "Pinne einige Abonnements, um ihre neuesten Updates zu sehen",
+    "No favorites" : "Keine Favoriten",
+    "A browser extension conflict with RePod" : "Ein Browser-Erweiterungskonflikt mit RePod"
 },"pluralForm" :""
 }

l10n/fr.js

@@ -5,7 +5,7 @@ OC.L10N.register(
     "Podcast" : "Podcast",
     "RePod" : "RePod",
     "🔊 Browse, manage and listen to podcasts" : "🔊 Parcourir, gérer et écouter vos podcasts",
-    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Fonctionnalités\n- 🔍 Parcourir et s'abonner à une grande collections de podcasts\n- 🔊 Écouter vos épisodes directement sur Nextcloud\n- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/)\n\n## Pré-requis\nVous devez avoir [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installé pour utiliser cette application !",
+    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Mobile friendly interface\n- 📡 Import and export your subscriptions\n- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Fonctionnalités\n- 🔍 Parcourir et s'abonner à une grande collections de podcasts\n- 🔊 Écouter vos épisodes directement sur Nextcloud\n- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/) et d'autres [applications](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Interface optimisée pour mobiles et ordinateurs\n- 📡 Import/export de ses abonnements\n- ➡️ Tableau récapitulatif complet des fonctionnalitées [ici](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Pré-requis\nVous devez avoir [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installé pour utiliser cette application !",
     "Download" : "Télécharger",
     "Add a RSS link" : "Ajouter un lien RSS",
     "Subscribe" : "S'abonner",
@@ -18,11 +18,15 @@ OC.L10N.register(
     "Link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers",
     "Play" : "Lecture",
     "Stop" : "Arrêter",
-    "Mark as read" : "Marquer comme lu",
+    "Read" : "Lu",
-    "Mark as unread" : "Marquer comme non lu",
     "Open website" : "Ouvrir le site web",
-    "Could not fetch episodes" : "Impossible de récuprer les épisodes",
     "Could not change the status of the episode" : "Impossible de changer le status de l'épisode",
+    "Could not fetch episodes" : "Impossible de récuprer les épisodes",
+    "Rewind 10 seconds" : "Retour rapide de 10 secondes",
+    "Pause" : "Pause",
+    "Fast forward 30 seconds" : "Avance rapide de 30 secondes",
+    "Mute" : "Silencer",
+    "Unmute" : "Paroler",
     "Export subscriptions" : "Exporter les abonnements",
     "Filtering episodes" : "Filtrage des épisodes",
     "Show all" : "Montrer tout",
@@ -33,13 +37,18 @@ OC.L10N.register(
     "Import OPML file" : "Importer un fichier OPML",
     "Rate RePod ❤️" : "Donnez votre avis ❤️",
     "Playback speed" : "Vitesse de lecture",
+    "Favorite" : "Favori",
     "Are you sure you want to delete this subscription?" : "Êtes-vous sûr de vouloir supprimer ce flux ?",
     "Error while removing the feed" : "Erreur lors de la suppression du flux",
+    "You can only have 10 favorites" : "Vous ne pouvez avoir que 10 favoris",
     "Add a podcast" : "Ajouter un podcast",
     "Could not fetch subscriptions" : "Impossible de récupérer les flux",
     "Find a podcast" : "Chercher un podcast",
     "Error loading feed" : "Erreur lors du chargement du flux",
     "Missing required app" : "Une application requise est manquante",
-    "Install GPodder Sync" : "Installer GPodder Sync"
+    "Install GPodder Sync" : "Installer GPodder Sync",
+    "Pin some subscriptions to see their latest updates" : "Ajoutez des abonnements en favoris pour obtenir les dernières nouvelles ici",
+    "No favorites" : "Aucun favoris",
+    "A browser extension conflict with RePod" : "Une extension de votre navigateur entre en conflit avec RePod"
 },
 "");

l10n/fr.json

@@ -3,7 +3,7 @@
     "Podcast" : "Podcast",
     "RePod" : "RePod",
     "🔊 Browse, manage and listen to podcasts" : "🔊 Parcourir, gérer et écouter vos podcasts",
-    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Fonctionnalités\n- 🔍 Parcourir et s'abonner à une grande collections de podcasts\n- 🔊 Écouter vos épisodes directement sur Nextcloud\n- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/)\n\n## Pré-requis\nVous devez avoir [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installé pour utiliser cette application !",
+    "## Features\n- 🔍 Browse and subscribe huge collection of podcasts\n- 🔊 Listen to episodes directly in Nextcloud\n- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Mobile friendly interface\n- 📡 Import and export your subscriptions\n- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Requirements\nYou need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!" : "## Fonctionnalités\n- 🔍 Parcourir et s'abonner à une grande collections de podcasts\n- 🔊 Écouter vos épisodes directement sur Nextcloud\n- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/) et d'autres [applications](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-gpoddersync)\n- 📱 Interface optimisée pour mobiles et ordinateurs\n- 📡 Import/export de ses abonnements\n- ➡️ Tableau récapitulatif complet des fonctionnalitées [ici](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Pré-requis\nVous devez avoir [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installé pour utiliser cette application !",
     "Download" : "Télécharger",
     "Add a RSS link" : "Ajouter un lien RSS",
     "Subscribe" : "S'abonner",
@@ -16,11 +16,15 @@
     "Link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers",
     "Play" : "Lecture",
     "Stop" : "Arrêter",
-    "Mark as read" : "Marquer comme lu",
+    "Read" : "Lu",
-    "Mark as unread" : "Marquer comme non lu",
     "Open website" : "Ouvrir le site web",
-    "Could not fetch episodes" : "Impossible de récuprer les épisodes",
     "Could not change the status of the episode" : "Impossible de changer le status de l'épisode",
+    "Could not fetch episodes" : "Impossible de récuprer les épisodes",
+    "Rewind 10 seconds" : "Retour rapide de 10 secondes",
+    "Pause" : "Pause",
+    "Fast forward 30 seconds" : "Avance rapide de 30 secondes",
+    "Mute" : "Silencer",
+    "Unmute" : "Paroler",
     "Export subscriptions" : "Exporter les abonnements",
     "Filtering episodes" : "Filtrage des épisodes",
     "Show all" : "Montrer tout",
@@ -31,13 +35,18 @@
     "Import OPML file" : "Importer un fichier OPML",
     "Rate RePod ❤️" : "Donnez votre avis ❤️",
     "Playback speed" : "Vitesse de lecture",
+    "Favorite" : "Favori",
     "Are you sure you want to delete this subscription?" : "Êtes-vous sûr de vouloir supprimer ce flux ?",
     "Error while removing the feed" : "Erreur lors de la suppression du flux",
+    "You can only have 10 favorites" : "Vous ne pouvez avoir que 10 favoris",
     "Add a podcast" : "Ajouter un podcast",
     "Could not fetch subscriptions" : "Impossible de récupérer les flux",
     "Find a podcast" : "Chercher un podcast",
     "Error loading feed" : "Erreur lors du chargement du flux",
     "Missing required app" : "Une application requise est manquante",
-    "Install GPodder Sync" : "Installer GPodder Sync"
+    "Install GPodder Sync" : "Installer GPodder Sync",
+    "Pin some subscriptions to see their latest updates" : "Ajoutez des abonnements en favoris pour obtenir les dernières nouvelles ici",
+    "No favorites" : "Aucun favoris",
+    "A browser extension conflict with RePod" : "Une extension de votre navigateur entre en conflit avec RePod"
 },"pluralForm" :""
 }

lib/AppInfo/Application.php

@@ -32,6 +32,10 @@ class Application extends App implements IBootstrap
 		/** @var IInitialState $initialState */
 		$initialState = $appContainer->get(IInitialState::class);
 
+		if (null === $appManager->getAppInfo(self::GPODDERSYNC_ID)) {
+			$appManager->disableApp(self::GPODDERSYNC_ID);
+		}
+
 		$gpoddersync = $appManager->isEnabledForUser(self::GPODDERSYNC_ID);
 		if (!$gpoddersync) {
 			try {

lib/Controller/EpisodesController.php

@@ -11,6 +11,9 @@ use OCA\RePod\Core\EpisodeAction\EpisodeActionReader;
 use OCA\RePod\Service\UserService;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\Http\Client\IClientService;
 use OCP\IRequest;
@@ -27,10 +30,9 @@ class EpisodesController extends Controller
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/episodes/list')]
-	 */
 	public function list(string $url): JSONResponse {
 		$client = $this->clientService->newClient();
 		$feed = $client->get($url);
@@ -41,10 +43,9 @@ class EpisodesController extends Controller
 		return new JSONResponse($episodes, $feed->getStatusCode());
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/episodes/action')]
-	 */
 	public function action(string $url): JSONResponse {
 		$action = $this->episodeActionRepository->findByEpisodeUrl($url, $this->userService->getUserUID());
 

lib/Controller/OpmlController.php

@@ -10,6 +10,9 @@ use OCA\GPodderSync\Core\SubscriptionChange\SubscriptionChangeSaver;
 use OCA\RePod\AppInfo\Application;
 use OCA\RePod\Service\UserService;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\DataDownloadResponse;
 use OCP\AppFramework\Http\Response;
 use OCP\IL10N;
@@ -28,10 +31,9 @@ class OpmlController extends Controller
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/opml/export')]
-	 */
 	public function export(): DataDownloadResponse {
 		// https://github.com/AntennaPod/AntennaPod/blob/master/core/src/main/java/de/danoeh/antennapod/core/export/opml/OpmlWriter.java
 		$xml = new \SimpleXMLElement('<opml/>', namespaceOrPrefix: 'http://xmlpull.org/v1/doc/features.html#indent-output');
@@ -82,10 +84,9 @@ class OpmlController extends Controller
 		return new DataDownloadResponse((string) $xml->asXML(), 'repod-'.$dateCreated->getTimestamp().'.opml', ' application/xml');
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'POST', url: '/opml/import')]
-	 */
 	public function import(): Response {
 		$file = $this->request->getUploadedFile('import');
 

lib/Controller/PageController.php

@@ -6,18 +6,30 @@ namespace OCA\RePod\Controller;
 
 use OCA\RePod\AppInfo\Application;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\ContentSecurityPolicy;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\IConfig;
+use OCP\IRequest;
 use OCP\Util;
 
 class PageController extends Controller
 {
-	/**
+	public function __construct(
-	 * @NoAdminRequired
+		IRequest $request,
-	 * @NoCSRFRequired
+		private IConfig $config
-	 */
+	) {
+		parent::__construct(Application::APP_ID, $request);
+	}
+
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[FrontpageRoute(verb: 'GET', url: '/')]
 	public function index(): TemplateResponse {
-		Util::addScript(Application::APP_ID, 'main');
+		Util::addScript(Application::APP_ID, Application::APP_ID.'-main');
+		Util::addStyle(Application::APP_ID, Application::APP_ID.'-main');
 
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('*');
@@ -28,4 +40,18 @@ class PageController extends Controller
 
 		return $response;
 	}
+
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[FrontpageRoute(verb: 'GET', url: '/discover')]
+	public function discover(): TemplateResponse {
+		return $this->index();
+	}
+
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[FrontpageRoute(verb: 'GET', url: '/feed/{path}', requirements: ['path' => '.+'])]
+	public function feed(): TemplateResponse {
+		return $this->index();
+	}
 }

lib/Controller/PodcastController.php

@@ -8,6 +8,9 @@ use OCA\GPodderSync\Core\PodcastData\PodcastData;
 use OCA\GPodderSync\Core\PodcastData\PodcastDataReader;
 use OCA\RePod\AppInfo\Application;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\Http\Client\IClientService;
 use OCP\ICacheFactory;
@@ -24,10 +27,9 @@ class PodcastController extends Controller
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/podcast')]
-	 */
 	public function index(string $url): JSONResponse {
 		$podcast = null;
 

lib/Controller/SearchController.php

@@ -7,6 +7,9 @@ namespace OCA\RePod\Controller;
 use OCA\RePod\AppInfo\Application;
 use OCA\RePod\Service\MultiPodService;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
 
@@ -19,10 +22,9 @@ class SearchController extends Controller
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/search')]
-	 */
 	public function index(string $q): JSONResponse {
 		return new JSONResponse($this->multiPodService->search($q));
 	}

lib/Controller/ToplistController.php

@@ -7,6 +7,9 @@ namespace OCA\RePod\Controller;
 use OCA\RePod\AppInfo\Application;
 use OCA\RePod\Service\FyydService;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\Attribute\FrontpageRoute;
+use OCP\AppFramework\Http\Attribute\NoAdminRequired;
+use OCP\AppFramework\Http\Attribute\NoCSRFRequired;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
 
@@ -19,18 +22,16 @@ class ToplistController extends Controller
 		parent::__construct(Application::APP_ID, $request);
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/toplist/hot')]
-	 */
 	public function hot(): JSONResponse {
 		return new JSONResponse($this->fyydService->hot());
 	}
 
-	/**
+	#[NoAdminRequired]
-	 * @NoAdminRequired
+	#[NoCSRFRequired]
-	 * @NoCSRFRequired
+	#[FrontpageRoute(verb: 'GET', url: '/toplist/new')]
-	 */
 	public function new(): JSONResponse {
 		return new JSONResponse($this->fyydService->latest());
 	}

package.json

@@ -2,42 +2,50 @@
   "name": "repod",
   "license": "AGPL-3.0-or-later",
   "scripts": {
-    "build": "vite build --mode production",
+    "build": "vue-tsc && vite build",
-    "dev": "vite build --mode development",
+    "dev": "vite --mode development build",
-    "dev:watch": "vite build --mode development --watch",
+    "watch": "vite --mode development build --watch",
-    "watch": "npm run dev:watch",
+    "lint": "vue-tsc && eslint src",
-    "lint": "eslint src",
+    "lint:fix": "vue-tsc && eslint src --fix",
-    "lint:fix": "eslint src --fix",
     "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
     "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix"
   },
+  "type": "module",
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
-  "prettier": "@nextcloud/prettier-config",
   "dependencies": {
-    "@nextcloud/axios": "^2.5.0",
+    "@formatjs/intl-segmenter": "^11.7.3",
+    "@nextcloud/axios": "^2.5.1",
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/l10n": "^3.1.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vite-config": "^2.2.2",
     "@nextcloud/vue": "9.0.0-alpha.5",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.1.7",
     "linkify-html": "^4.1.3",
-    "pinia": "^2.2.2",
+    "pinia": "^2.2.6",
     "toastify-js": "^1.12.0",
-    "vite": "^5.4.1",
+    "vite": "^5.4.10",
-    "vue": "^3.4.38",
+    "vue": "^3.5.12",
-    "vue-material-design-icons": "^5.3.0",
+    "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^4.4.3"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^8.4.1",
     "@nextcloud/prettier-config": "^1.1.0",
     "@nextcloud/stylelint-config": "^3.0.1",
+    "@types/toastify-js": "^1.12.3",
+    "@vue/eslint-config-typescript": "^13",
+    "@vue/tsconfig": "^0.5.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-pinia": "^0.2.0",
+    "eslint-plugin-pinia": "^0.4.1",
-    "eslint-plugin-prettier": "^5.2.1"
+    "eslint-plugin-prettier": "^5.2.1",
-  }
+    "ts-node": "^10.9.2",
+    "typescript": "5.5",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.1.10"
+  },
+  "prettier": "@nextcloud/prettier-config"
 }

src/App.vue

@@ -7,7 +7,7 @@
 	</NcContent>
 </template>
 
-<script>
+<script lang="ts">
 import 'toastify-js/src/toastify.css'
 import { mapActions, mapState } from 'pinia'
 import Bar from './components/Player/Bar.vue'
@@ -15,7 +15,7 @@ import GPodder from './views/GPodder.vue'
 import { NcContent } from '@nextcloud/vue'
 import Subscriptions from './components/Sidebar/Subscriptions.vue'
 import { loadState } from '@nextcloud/initial-state'
-import { usePlayer } from './store/player.js'
+import { usePlayer } from './store/player.ts'
 
 export default {
 	name: 'App',
@@ -33,15 +33,9 @@ export default {
 	},
 	mounted() {
 		this.init()
-		setInterval(this.loop, 40000)
 	},
 	methods: {
-		...mapActions(usePlayer, ['init', 'time']),
+		...mapActions(usePlayer, ['init']),
-		loop() {
-			if (this.paused === false) {
-				this.time()
-			}
-		},
 	},
 }
 </script>

src/components/Atoms/AppContent.vue

@@ -1,13 +1,13 @@
 <template>
-	<NcAppContent :class="{ padding: episode }">
+	<NcAppContent :class="{ episode }">
 		<slot />
 	</NcAppContent>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppContent } from '@nextcloud/vue'
 import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'AppContent',
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style scoped>
-.padding {
+.episode {
 	padding-bottom: 6rem;
 }
 </style>

src/components/Atoms/AppNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation :class="{ padding: episode }">
+	<NcAppNavigation :class="{ episode }">
 		<slot />
 		<template #list>
 			<slot name="list" />
@@ -10,10 +10,10 @@
 	</NcAppNavigation>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigation } from '@nextcloud/vue'
 import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'AppNavigation',
@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style scoped>
-.padding {
+.episode {
 	padding-bottom: 6rem;
 }
 </style>

src/components/Atoms/EmptyContent.vue

@@ -0,0 +1,34 @@
+<template>
+	<NcEmptyContent class="empty">
+		<slot />
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<template #name>
+			<slot name="name" />
+		</template>
+		<template #description>
+			<slot name="description" />
+		</template>
+		<template #action>
+			<slot name="action" />
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script lang="ts">
+import { NcEmptyContent } from '@nextcloud/vue'
+
+export default {
+	name: 'EmptyContent',
+	components: {
+		NcEmptyContent,
+	},
+}
+</script>
+
+<style scoped>
+.empty {
+	height: 100%;
+}
+</style>

src/components/Atoms/Loading.vue

@@ -2,7 +2,7 @@
 	<NcLoadingIcon class="loading" />
 </template>
 
-<script>
+<script lang="ts">
 import { NcLoadingIcon } from '@nextcloud/vue'
 
 export default {

src/components/Atoms/Modal.vue

@@ -1,37 +1,43 @@
 <template>
 	<div class="flex">
-		<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
+		<NcAvatar
-		<h2>{{ name }}</h2>
+			:display-name="episode.name"
-		<SafeHtml :source="description" />
+			:is-no-user="true"
+			:size="256"
+			:url="episode.image" />
+		<h2>{{ episode.name }}</h2>
+		<SafeHtml :source="episode.description || ''" />
 		<div class="flex">
-			<NcButton v-if="link" :href="link" target="_blank">
+			<NcButton v-if="episode.link" :href="episode.link" target="_blank">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
-				{{ title }}
+				{{ episode.title }}
 			</NcButton>
 			<NcButton
-				v-if="url"
+				v-if="episode.url"
-				:download="filenameFromUrl(url)"
+				:download="filenameFromUrl(episode.url)"
-				:href="url"
+				:href="episode.url"
 				target="_blank">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
 				{{ t('repod', 'Download') }}
-				{{ size ? `(${humanFileSize(size)})` : '' }}
+				{{ episode.size ? `(${humanFileSize(episode.size)})` : '' }}
 			</NcButton>
 		</div>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAvatar, NcButton } from '@nextcloud/vue'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
+import type { EpisodeInterface } from '../../utils/types.ts'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import SafeHtml from './SafeHtml.vue'
-import { filenameFromUrl } from '../../utils/url.js'
+import { filenameFromUrl } from '../../utils/url.ts'
-import { humanFileSize } from '../../utils/size.js'
+import { humanFileSize } from '../../utils/size.ts'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Modal',
@@ -43,38 +49,15 @@ export default {
 		SafeHtml,
 	},
 	props: {
-		description: {
+		episode: {
-			type: String,
+			type: Object as () => EpisodeInterface,
-			default: '',
-		},
-		image: {
-			type: String,
-			required: true,
-		},
-		link: {
-			type: String,
-			default: null,
-		},
-		name: {
-			type: String,
-			required: true,
-		},
-		size: {
-			type: Number,
-			default: null,
-		},
-		title: {
-			type: String,
-			required: true,
-		},
-		url: {
-			type: String,
 			required: true,
 		},
 	},
 	methods: {
 		filenameFromUrl,
 		humanFileSize,
+		t,
 	},
 }
 </script>

src/components/Atoms/SafeHtml.vue

@@ -2,7 +2,7 @@
 	<div v-sanitize="source" class="html" />
 </template>
 
-<script>
+<script lang="ts">
 import dompurify from 'dompurify'
 import linkifyHtml from 'linkify-html'
 

src/components/Discover/AddRss.vue

@@ -1,8 +1,8 @@
 <template>
-	<NcAppNavigationList>
+	<NcAppNavigationList class="list">
 		<NcAppNavigationNewItem
 			:name="t('repod', 'Add a RSS link')"
-			@new-item="addSubscription">
+			@new-item="(url) => $router.push(toFeedUrl(url))">
 			<template #icon>
 				<PlusIcon :size="20" />
 			</template>
@@ -10,10 +10,11 @@
 	</NcAppNavigationList>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationList, NcAppNavigationNewItem } from '@nextcloud/vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { encodeUrl } from '../../utils/url.js'
+import { t } from '@nextcloud/l10n'
+import { toFeedUrl } from '../../utils/url.ts'
 
 export default {
 	name: 'AddRss',
@@ -23,15 +24,14 @@ export default {
 		PlusIcon,
 	},
 	methods: {
-		addSubscription(feedUrl) {
+		t,
-			this.$router.push(encodeUrl(feedUrl))
+		toFeedUrl,
-		},
 	},
 }
 </script>
 
 <style scoped>
-ul {
+.list {
 	margin-top: 2rem;
 }
 </style>

src/components/Discover/Search.vue

@@ -7,7 +7,7 @@
 				:key="feed.link"
 				:details="formatLocaleDate(new Date(feed.fetchedAtUnix * 1000))"
 				:name="feed.title"
-				:to="toUrl(feed.link)">
+				:to="toFeedUrl(feed.link)">
 				<template #icon>
 					<NcAvatar
 						:display-name="feed.author"
@@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!subscriptions.includes(feed.link)"
+						v-if="!getSubByUrl(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@@ -34,18 +34,19 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import type { PodcastDataInterface } from '../../utils/types.ts'
 import axios from '@nextcloud/axios'
-import { debounce } from '../../utils/debounce.js'
+import { formatLocaleDate } from '../../utils/time.ts'
-import { formatLocaleDate } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '../../utils/toast.js'
+import { showError } from '../../utils/toast.ts'
-import { toUrl } from '../../utils/url.js'
+import { t } from '@nextcloud/l10n'
-import { useSubscriptions } from '../../store/subscriptions.js'
+import { toFeedUrl } from '../../utils/url.ts'
+import { useSubscriptions } from '../../store/subscriptions.ts'
 
 export default {
 	name: 'Search',
@@ -62,25 +63,28 @@ export default {
 			required: true,
 		},
 	},
-	data() {
+	data: () => ({
-		return {
+		feeds: [] as PodcastDataInterface[],
-			feeds: [],
+		loading: false,
-			loading: false,
+		timeout: null as NodeJS.Timeout | null,
-		}
+	}),
-	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['getSubByUrl']),
 	},
 	watch: {
 		value() {
-			this.search()
+			if (this.timeout) {
+				clearTimeout(this.timeout)
+			}
+			this.timeout = setTimeout(this.search, 200)
 		},
 	},
 	methods: {
 		...mapActions(useSubscriptions, ['fetch']),
 		formatLocaleDate,
-		toUrl,
+		t,
-		async addSubscription(url) {
+		toFeedUrl,
+		async addSubscription(url: string) {
 			try {
 				await axios.post(
 					generateUrl('/apps/gpoddersync/subscription_change/create'),
@@ -93,14 +97,13 @@ export default {
 				console.error(e)
 				showError(t('repod', 'Error while adding the feed'))
 			}
-
 			this.fetch()
 		},
-		search: debounce(async function value() {
+		async search() {
 			try {
 				this.loading = true
 				const currentSearch = this.value
-				const feeds = await axios.get(
+				const feeds = await axios.get<PodcastDataInterface[]>(
 					generateUrl('/apps/repod/search?q={value}', {
 						value: currentSearch,
 					}),
@@ -118,7 +121,7 @@ export default {
 					this.loading = false
 				}
 			}
-		}, 200),
+		},
 	},
 }
 </script>

src/components/Discover/Toplist.vue

@@ -4,7 +4,7 @@
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
 			<li v-for="top in tops" :key="top.link">
-				<router-link :to="toUrl(top.link)">
+				<router-link :to="toFeedUrl(top.link)">
 					<img :src="top.imageUrl" :title="top.author" />
 				</router-link>
 			</li>
@@ -12,12 +12,14 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import Loading from '../Atoms/Loading.vue'
+import type { PodcastDataInterface } from '../../utils/types.ts'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '../../utils/toast.js'
+import { showError } from '../../utils/toast.ts'
-import { toUrl } from '../../utils/url.js'
+import { t } from '@nextcloud/l10n'
+import { toFeedUrl } from '../../utils/url.ts'
 
 export default {
 	name: 'Toplist',
@@ -30,12 +32,10 @@ export default {
 			required: true,
 		},
 	},
-	data() {
+	data: () => ({
-		return {
+		loading: true,
-			loading: true,
+		tops: [] as PodcastDataInterface[],
-			tops: [],
+	}),
-		}
-	},
 	computed: {
 		title() {
 			switch (this.type) {
@@ -51,8 +51,8 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const tops = await axios.get(
+			const tops = await axios.get<PodcastDataInterface[]>(
-				generateUrl(`/apps/repod/toplist/${this.type}`),
+				generateUrl('/apps/repod/toplist/{type}', { type: this.type }),
 			)
 			this.tops = tops.data
 		} catch (e) {
@@ -63,7 +63,7 @@ export default {
 		}
 	},
 	methods: {
-		toUrl,
+		toFeedUrl,
 	},
 }
 </script>

src/components/Feed/Banner.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="header">
-		<img class="background" :src="imageUrl" />
+		<img class="background" :src="feed.imageUrl" />
 		<div class="content">
 			<div>
 				<NcAvatar
-					:display-name="author || title"
+					:display-name="feed.author || feed.title"
 					:is-no-user="true"
 					:size="128"
-					:url="imageUrl" />
+					:url="feed.imageUrl" />
 				<a class="feed" :href="url" @click.prevent="copyFeed">
 					<RssIcon :size="20" />
 					<i>{{ t('repod', 'Copy feed') }}</i>
@@ -15,15 +15,15 @@
 			</div>
 			<div class="inner">
 				<div class="infos">
-					<h2>{{ title }}</h2>
+					<h2>{{ feed.title }}</h2>
-					<a :href="link" target="_blank">
+					<a :href="feed.link" target="_blank">
-						<i>{{ author }}</i>
+						<i>{{ feed.author }}</i>
 					</a>
 					<br /><br />
-					<SafeHtml :source="description" />
+					<SafeHtml :source="feed.description || ''" />
 				</div>
 				<NcAppNavigationNew
-					v-if="!subscriptions.includes(url)"
+					v-if="!getSubByUrl(url)"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@@ -35,17 +35,19 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
-import { showError, showSuccess } from '../../utils/toast.js'
+import { showError, showSuccess } from '../../utils/toast.ts'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import type { PodcastDataInterface } from '../../utils/types.ts'
 import RssIcon from 'vue-material-design-icons/Rss.vue'
 import SafeHtml from '../Atoms/SafeHtml.vue'
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../../utils/url.js'
+import { decodeUrl } from '../../utils/url.ts'
 import { generateUrl } from '@nextcloud/router'
-import { useSubscriptions } from '../../store/subscriptions.js'
+import { t } from '@nextcloud/l10n'
+import { useSubscriptions } from '../../store/subscriptions.ts'
 
 export default {
 	name: 'Banner',
@@ -57,35 +59,20 @@ export default {
 		SafeHtml,
 	},
 	props: {
-		author: {
+		feed: {
-			type: String,
+			type: Object as () => PodcastDataInterface,
-			required: true,
-		},
-		description: {
-			type: String,
-			required: true,
-		},
-		imageUrl: {
-			type: String,
-			required: true,
-		},
-		link: {
-			type: String,
-			required: true,
-		},
-		title: {
-			type: String,
 			required: true,
 		},
 	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['getSubByUrl']),
 		url() {
-			return decodeUrl(this.$route.params.url)
+			return decodeUrl(this.$route.params.url as string)
 		},
 	},
 	methods: {
 		...mapActions(useSubscriptions, ['fetch']),
+		t,
 		async addSubscription() {
 			try {
 				await axios.post(
@@ -99,7 +86,6 @@ export default {
 				console.error(e)
 				showError(t('repod', 'Error while adding the feed'))
 			}
-
 			this.fetch()
 		},
 		copyFeed() {
@@ -143,11 +129,13 @@ export default {
 }
 
 .infos {
+	flex: 1;
 	overflow: auto;
 }
 
 .inner {
 	display: flex;
+	flex: 1;
 }
 
 @media only screen and (max-width: 768px) {

src/components/Feed/Episode.vue

@@ -0,0 +1,222 @@
+<template>
+	<NcListItem
+		:active="isCurrentEpisode(episode)"
+		class="episode"
+		:details="
+			!oneLine && episode.pubDate
+				? formatLocaleDate(new Date(episode.pubDate?.date))
+				: ''
+		"
+		:force-display-actions="true"
+		:name="episode.name"
+		:one-line="oneLine"
+		:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
+		:title="episode.description"
+		@click="modalEpisode = episode">
+		<template #actions>
+			<NcActionButton
+				v-if="!isCurrentEpisode(episode)"
+				:aria-label="t('repod', 'Play')"
+				:title="t('repod', 'Play')"
+				@click="load(episode, url)">
+				<template #icon>
+					<PlayIcon :size="20" />
+				</template>
+			</NcActionButton>
+			<NcActionButton
+				v-if="isCurrentEpisode(episode)"
+				:aria-label="t('repod', 'Stop')"
+				:title="t('repod', 'Stop')"
+				@click="load(null)">
+				<template #icon>
+					<StopIcon :size="20" />
+				</template>
+			</NcActionButton>
+		</template>
+		<template #extra>
+			<NcActions>
+				<NcActionButton
+					v-if="episode.duration"
+					:aria-label="t('repod', 'Read')"
+					:disabled="loading"
+					:model-value="hasEnded(episode)"
+					:name="t('repod', 'Read')"
+					:title="t('repod', 'Read')"
+					@click="markAs(episode, !hasEnded(episode))">
+					<template #icon>
+						<PlaylistPlayIcon v-if="!hasEnded(episode)" :size="20" />
+						<PlaylistRemoveIcon v-if="hasEnded(episode)" :size="20" />
+					</template>
+				</NcActionButton>
+				<NcActionLink
+					v-if="episode.link"
+					:href="episode.link"
+					:name="t('repod', 'Open website')"
+					target="_blank"
+					:title="t('repod', 'Open website')">
+					<template #icon>
+						<OpenInNewIcon :size="20" />
+					</template>
+				</NcActionLink>
+				<NcActionLink
+					v-if="episode.url"
+					:download="filenameFromUrl(episode.url)"
+					:href="episode.url"
+					:name="t('repod', 'Download')"
+					target="_blank"
+					:title="t('repod', 'Download')">
+					<template #icon>
+						<DownloadIcon :size="20" />
+					</template>
+				</NcActionLink>
+			</NcActions>
+			<NcModal v-if="modalEpisode" @close="modalEpisode = null">
+				<Modal :episode="episode" />
+			</NcModal>
+		</template>
+		<template #icon>
+			<NcAvatar
+				:display-name="episode.name"
+				:is-no-user="true"
+				:url="episode.image" />
+		</template>
+		<template #indicator>
+			<NcProgressBar
+				v-if="episode.action && isListening(episode) && !oneLine"
+				class="progress"
+				:value="(episode.action.position * 100) / episode.action.total" />
+		</template>
+		<template #subname>
+			{{ episode.duration }}
+		</template>
+	</NcListItem>
+</template>
+
+<script lang="ts">
+import {
+	NcActionButton,
+	NcActionLink,
+	NcActions,
+	NcAvatar,
+	NcListItem,
+	NcModal,
+	NcProgressBar,
+} from '@nextcloud/vue'
+import {
+	durationToSeconds,
+	formatEpisodeTimestamp,
+	formatLocaleDate,
+} from '../../utils/time.ts'
+import { hasEnded, isListening } from '../../utils/status.ts'
+import { mapActions, mapState } from 'pinia'
+import DownloadIcon from 'vue-material-design-icons/Download.vue'
+import type { EpisodeInterface } from '../../utils/types.ts'
+import Modal from '../Atoms/Modal.vue'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
+import PlayIcon from 'vue-material-design-icons/Play.vue'
+import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
+import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
+import StopIcon from 'vue-material-design-icons/Stop.vue'
+import axios from '@nextcloud/axios'
+import { filenameFromUrl } from '../../utils/url.ts'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
+import { usePlayer } from '../../store/player.ts'
+
+export default {
+	name: 'Episode',
+	components: {
+		DownloadIcon,
+		Modal,
+		NcActionButton,
+		NcActionLink,
+		NcActions,
+		NcAvatar,
+		NcListItem,
+		NcModal,
+		NcProgressBar,
+		OpenInNewIcon,
+		PlayIcon,
+		PlaylistPlayIcon,
+		PlaylistRemoveIcon,
+		StopIcon,
+	},
+	props: {
+		episode: {
+			type: Object as () => EpisodeInterface,
+			required: true,
+		},
+		oneLine: {
+			type: Boolean,
+			default: false,
+		},
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+	data: () => ({
+		loading: false,
+		modalEpisode: null as EpisodeInterface | null,
+	}),
+	computed: {
+		...mapState(usePlayer, { playerEpisode: 'episode' }),
+	},
+	methods: {
+		...mapActions(usePlayer, ['load']),
+		filenameFromUrl,
+		formatLocaleDate,
+		hasEnded,
+		isListening,
+		t,
+		isCurrentEpisode(episode: EpisodeInterface) {
+			return this.playerEpisode?.url === episode.url
+		},
+		async markAs(episode: EpisodeInterface, read: boolean) {
+			try {
+				this.loading = true
+				episode.action = {
+					podcast: this.url,
+					episode: episode.url,
+					guid: episode.guid,
+					action: 'play',
+					timestamp: formatEpisodeTimestamp(new Date()),
+					started: episode.action?.started || 0,
+					position: read ? durationToSeconds(episode.duration || '') : 0,
+					total: durationToSeconds(episode.duration || ''),
+				}
+				await axios.post(
+					generateUrl('/apps/gpoddersync/episode_action/create'),
+					[episode.action],
+				)
+				if (read && this.isCurrentEpisode(episode)) {
+					this.load(null)
+				}
+			} catch (e) {
+				console.error(e)
+				showError(t('repod', 'Could not change the status of the episode'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.progress {
+	margin-top: 0.4rem;
+}
+</style>
+
+<style>
+.episode .list-item-content__name {
+	max-width: 100%;
+}
+
+.episode .list-item-content__subname {
+	flex-basis: auto;
+	flex-grow: 0;
+}
+</style>

src/components/Feed/Episodes.vue

@@ -2,175 +2,39 @@
 	<div>
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
-			<NcListItem
+			<Episode
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
-				:active="isCurrentEpisode(episode)"
+				:episode="episode"
-				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
+				:url="url" />
-				:force-display-actions="true"
-				:href="$route.href"
-				:name="episode.name"
-				:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
-				target="_self"
-				:title="episode.description"
-				@click="modalEpisode = episode">
-				<template #actions>
-					<NcActionButton
-						v-if="!isCurrentEpisode(episode)"
-						:aria-label="t('repod', 'Play')"
-						:title="t('repod', 'Play')"
-						@click="load(episode, url)">
-						<template #icon>
-							<PlayIcon :size="20" />
-						</template>
-					</NcActionButton>
-					<NcActionButton
-						v-if="isCurrentEpisode(episode)"
-						:aria-label="t('repod', 'Stop')"
-						:title="t('repod', 'Stop')"
-						@click="load(null)">
-						<template #icon>
-							<StopIcon :size="20" />
-						</template>
-					</NcActionButton>
-				</template>
-				<template #extra>
-					<NcActions>
-						<NcActionButton
-							v-if="episode.duration && !hasEnded(episode)"
-							:aria-label="t('repod', 'Mark as read')"
-							:disabled="loadingAction"
-							:name="t('repod', 'Mark as read')"
-							:title="t('repod', 'Mark as read')"
-							@click="markAs(episode, true)">
-							<template #icon>
-								<PlaylistPlayIcon :size="20" />
-							</template>
-						</NcActionButton>
-						<NcActionButton
-							v-if="episode.duration && hasEnded(episode)"
-							:aria-label="t('repod', 'Mark as unread')"
-							:disabled="loadingAction"
-							:name="t('repod', 'Mark as unread')"
-							:title="t('repod', 'Mark as unread')"
-							@click="markAs(episode, false)">
-							<template #icon>
-								<PlaylistRemoveIcon :size="20" />
-							</template>
-						</NcActionButton>
-						<NcActionLink
-							v-if="episode.link"
-							:href="episode.link"
-							:name="t('repod', 'Open website')"
-							target="_blank"
-							:title="t('repod', 'Open website')">
-							<template #icon>
-								<OpenInNewIcon :size="20" />
-							</template>
-						</NcActionLink>
-						<NcActionLink
-							v-if="episode.url"
-							:download="filenameFromUrl(episode.url)"
-							:href="episode.url"
-							:name="t('repod', 'Download')"
-							target="_blank"
-							:title="t('repod', 'Download')">
-							<template #icon>
-								<DownloadIcon :size="20" />
-							</template>
-						</NcActionLink>
-					</NcActions>
-				</template>
-				<template #icon>
-					<NcAvatar
-						:display-name="episode.name"
-						:is-no-user="true"
-						:url="episode.image" />
-				</template>
-				<template #indicator>
-					<NcProgressBar
-						v-if="isListening(episode)"
-						class="progress"
-						:value="
-							(episode.action.position * 100) / episode.action.total
-						" />
-				</template>
-				<template #subname>
-					{{ episode.duration }}
-				</template>
-			</NcListItem>
 		</ul>
-		<NcModal v-if="modalEpisode" @close="modalEpisode = null">
-			<Modal
-				:description="modalEpisode.description"
-				:image="modalEpisode.image"
-				:link="modalEpisode.link"
-				:name="modalEpisode.name"
-				:size="modalEpisode.size"
-				:title="modalEpisode.title"
-				:url="modalEpisode.url" />
-		</NcModal>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
-import {
+import { hasEnded, isListening } from '../../utils/status.ts'
-	NcActionButton,
+import Episode from './Episode.vue'
-	NcActionLink,
+import type { EpisodeInterface } from '../../utils/types.ts'
-	NcActions,
-	NcAvatar,
-	NcListItem,
-	NcModal,
-	NcProgressBar,
-} from '@nextcloud/vue'
-import { decodeUrl, filenameFromUrl } from '../../utils/url.js'
-import {
-	durationToSeconds,
-	formatEpisodeTimestamp,
-	formatLocaleDate,
-} from '../../utils/time.js'
-import { mapActions, mapState } from 'pinia'
-import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import Loading from '../Atoms/Loading.vue'
-import Modal from '../Atoms/Modal.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import PlayIcon from 'vue-material-design-icons/Play.vue'
-import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
-import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
+import { decodeUrl } from '../../utils/url.ts'
 import { generateUrl } from '@nextcloud/router'
-import { showError } from '../../utils/toast.js'
+import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { showError } from '../../utils/toast.ts'
-import { useSettings } from '../../store/settings.js'
+import { t } from '@nextcloud/l10n'
+import { usePlayer } from '../../store/player.ts'
+import { useSettings } from '../../store/settings.ts'
 
 export default {
 	name: 'Episodes',
 	components: {
-		DownloadIcon,
+		Episode,
 		Loading,
-		Modal,
-		NcActionButton,
-		NcActionLink,
-		NcActions,
-		NcAvatar,
-		NcListItem,
-		NcModal,
-		NcProgressBar,
-		OpenInNewIcon,
-		PlayIcon,
-		PlaylistPlayIcon,
-		PlaylistRemoveIcon,
-		StopIcon,
-	},
-	data() {
-		return {
-			episodes: [],
-			loading: true,
-			loadingAction: false,
-			modalEpisode: null,
-		}
 	},
+	data: () => ({
+		episodes: [] as EpisodeInterface[],
+		loading: true,
+	}),
 	computed: {
 		...mapState(usePlayer, ['episode']),
 		...mapState(useSettings, ['filters']),
@@ -179,27 +43,24 @@ export default {
 				if (!this.filters.listened && this.hasEnded(episode)) {
 					return false
 				}
-
 				if (!this.filters.listening && this.isListening(episode)) {
 					return false
 				}
-
 				if (!this.filters.unlistened && !this.isListening(episode)) {
 					return false
 				}
-
 				return true
 			})
 		},
 		url() {
-			return decodeUrl(this.$route.params.url)
+			return decodeUrl(this.$route.params.url as string)
 		},
 	},
 	watch: {
 		episode() {
 			if (this.episode) {
 				this.episodes = this.episodes.map((e) =>
-					e.url === this.episode.url ? this.episode : e,
+					e.url === this.episode?.url ? this.episode : e,
 				)
 			}
 		},
@@ -207,13 +68,15 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const episodes = await axios.get(
+			const episodes = await axios.get<EpisodeInterface[]>(
 				generateUrl('/apps/repod/episodes/list?url={url}', {
 					url: this.url,
 				}),
 			)
 			this.episodes = [...episodes.data].sort(
-				(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
+				(a, b) =>
+					new Date(b.pubDate?.date || '').getTime() -
+					new Date(a.pubDate?.date || '').getTime(),
 			)
 		} catch (e) {
 			console.error(e)
@@ -223,63 +86,8 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(usePlayer, ['load']),
+		hasEnded,
-		filenameFromUrl,
+		isListening,
-		formatLocaleDate,
-		hasEnded(episode) {
-			return (
-				episode.action &&
-				(episode.action.action === 'DELETE' ||
-					(episode.action.position > 0 &&
-						episode.action.total > 0 &&
-						episode.action.position >= episode.action.total))
-			)
-		},
-		isCurrentEpisode(episode) {
-			return this.episode && this.episode.url === episode.url
-		},
-		isListening(episode) {
-			return (
-				episode.action &&
-				episode.action.action &&
-				episode.action.action.toLowerCase() === 'play' &&
-				episode.action.position > 0 &&
-				!this.hasEnded(episode)
-			)
-		},
-		async markAs(episode, read) {
-			try {
-				this.loadingAction = true
-				episode.action = {
-					podcast: this.url,
-					episode: episode.url,
-					guid: episode.guid,
-					action: 'play',
-					timestamp: formatEpisodeTimestamp(new Date()),
-					started: episode.action ? episode.action.started : 0,
-					position: read ? durationToSeconds(episode.duration) : 0,
-					total: durationToSeconds(episode.duration),
-				}
-				await axios.post(
-					generateUrl('/apps/gpoddersync/episode_action/create'),
-					[episode.action],
-				)
-				if (read && this.episode && episode.url === this.episode.url) {
-					this.load(null)
-				}
-			} catch (e) {
-				console.error(e)
-				showError(t('repod', 'Could not change the status of the episode'))
-			} finally {
-				this.loadingAction = false
-			}
-		},
 	},
 }
 </script>
-
-<style scoped>
-.progress {
-	margin-top: 0.4rem;
-}
-</style>

src/components/Feed/Favorite.vue

@@ -0,0 +1,106 @@
+<template>
+	<NcGuestContent class="guest">
+		<Loading v-if="!feed.data" />
+		<NcAvatar
+			v-if="feed.data"
+			class="avatar"
+			:display-name="feed.data.author || feed.data.title"
+			:is-no-user="true"
+			:size="222"
+			:title="feed.data.author"
+			:url="feed.data.imageUrl" />
+		<div v-if="feed.data" class="list">
+			<h2 class="title">{{ feed.data.title }}</h2>
+			<Loading v-if="loading" />
+			<ul v-if="!loading">
+				<Episode
+					v-for="episode in episodes"
+					:key="episode.guid"
+					:episode="episode"
+					:one-line="true"
+					:url="feed.metrics.url" />
+			</ul>
+		</div>
+	</NcGuestContent>
+</template>
+
+<script lang="ts">
+import type { EpisodeInterface, SubscriptionInterface } from '../../utils/types.ts'
+import { NcAvatar, NcGuestContent } from '@nextcloud/vue'
+import Episode from './Episode.vue'
+import Loading from '../Atoms/Loading.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { hasEnded } from '../../utils/status.ts'
+import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
+
+export default {
+	name: 'Favorite',
+	components: {
+		Episode,
+		Loading,
+		NcAvatar,
+		NcGuestContent,
+	},
+	props: {
+		feed: {
+			type: Object as () => SubscriptionInterface,
+			required: true,
+		},
+	},
+	data: () => ({
+		episodes: [] as EpisodeInterface[],
+		loading: true,
+	}),
+	async mounted() {
+		try {
+			this.loading = true
+			const episodes = await axios.get<EpisodeInterface[]>(
+				generateUrl('/apps/repod/episodes/list?url={url}', {
+					url: this.feed.metrics.url,
+				}),
+			)
+			this.episodes = [...episodes.data]
+				.sort(
+					(a, b) =>
+						new Date(b.pubDate?.date || '').getTime() -
+						new Date(a.pubDate?.date || '').getTime(),
+				)
+				.filter((episode) => !this.hasEnded(episode))
+				.slice(0, 4)
+		} catch (e) {
+			console.error(e)
+			showError(t('repod', 'Could not fetch episodes'))
+		} finally {
+			this.loading = false
+		}
+	},
+	methods: {
+		hasEnded,
+	},
+}
+</script>
+
+<style scoped>
+.guest {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin: 20px !important;
+}
+
+.list {
+	flex: 1;
+}
+
+.title {
+	text-align: center;
+}
+
+@media only screen and (max-width: 768px) {
+	.avatar {
+		display: none;
+	}
+}
+</style>

src/components/Player/Bar.vue

@@ -13,7 +13,7 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import Controls from './Controls.vue'
 import Infos from './Infos.vue'
 import Loading from '../Atoms/Loading.vue'
@@ -21,7 +21,7 @@ import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
 import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Bar',
@@ -78,7 +78,7 @@ export default {
 
 @media only screen and (max-width: 768px) {
 	.infos {
-		flex: 2;
+		flex: 1;
 	}
 
 	.timer,

src/components/Player/Controls.vue

@@ -1,27 +1,53 @@
 <template>
 	<div class="controls">
-		<PauseIcon v-if="!paused" class="pointer" :size="50" @click="pause" />
+		<Rewind10Icon
-		<PlayIcon v-if="paused" class="pointer" :size="50" @click="play" />
+			class="pointer rewind"
+			:size="20"
+			:title="t('repod', 'Rewind 10 seconds')"
+			@click="seek((currentTime ?? 0) - 10)" />
+		<PauseIcon
+			v-if="!paused"
+			class="pointer"
+			:size="50"
+			:title="t('repod', 'Pause')"
+			@click="pause" />
+		<PlayIcon
+			v-if="paused"
+			class="pointer"
+			:size="50"
+			:title="t('repod', 'Play')"
+			@click="play" />
+		<FastForward30Icon
+			class="pointer forward"
+			:size="20"
+			:title="t('repod', 'Fast forward 30 seconds')"
+			@click="seek((currentTime ?? 0) + 30)" />
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import FastForward30Icon from 'vue-material-design-icons/FastForward30.vue'
 import PauseIcon from 'vue-material-design-icons/Pause.vue'
 import PlayIcon from 'vue-material-design-icons/Play.vue'
-import { usePlayer } from '../../store/player.js'
+import Rewind10Icon from 'vue-material-design-icons/Rewind10.vue'
+import { t } from '@nextcloud/l10n'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Controls',
 	components: {
+		FastForward30Icon,
 		PauseIcon,
 		PlayIcon,
+		Rewind10Icon,
 	},
 	computed: {
-		...mapState(usePlayer, ['paused']),
+		...mapState(usePlayer, ['currentTime', 'paused']),
 	},
 	methods: {
-		...mapActions(usePlayer, ['play', 'pause']),
+		...mapActions(usePlayer, ['play', 'pause', 'seek']),
+		t,
 	},
 }
 </script>
@@ -34,4 +60,11 @@ export default {
 .pointer {
 	cursor: pointer;
 }
+
+@media only screen and (max-width: 768px) {
+	.forward,
+	.rewind {
+		display: none;
+	}
+}
 </style>

src/components/Player/Infos.vue

@@ -1,30 +1,23 @@
 <template>
-	<div class="root">
+	<div v-if="episode && podcastUrl" class="root">
 		<strong class="pointer" @click="modal = true">
 			{{ episode.name }}
 		</strong>
-		<router-link :to="hash">
+		<router-link :to="toFeedUrl(podcastUrl)">
 			<i>{{ episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
-			<Modal
+			<Modal :episode="episode" />
-				:description="episode.description"
-				:image="episode.image"
-				:link="episode.link"
-				:name="episode.name"
-				:size="episode.size"
-				:title="episode.title"
-				:url="episode.url" />
 		</NcModal>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import Modal from '../Atoms/Modal.vue'
 import { NcModal } from '@nextcloud/vue'
 import { mapState } from 'pinia'
-import { toUrl } from '../../utils/url.js'
+import { toFeedUrl } from '../../utils/url.ts'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Infos',
@@ -32,16 +25,14 @@ export default {
 		Modal,
 		NcModal,
 	},
-	data() {
+	data: () => ({
-		return {
+		modal: false,
-			modal: false,
+	}),
-		}
-	},
 	computed: {
 		...mapState(usePlayer, ['episode', 'podcastUrl']),
-		hash() {
+	},
-			return toUrl(this.podcastUrl)
+	methods: {
-		},
+		toFeedUrl,
 	},
 }
 </script>

src/components/Player/ProgressBar.vue

@@ -1,16 +1,19 @@
 <template>
 	<input
+		v-if="duration"
 		class="progress"
 		:max="duration"
 		min="0"
 		type="range"
 		:value="currentTime"
-		@change="(event) => seek(event.target.value)" />
+		@change="
+			(event) => seek(parseInt((event.target as HTMLInputElement).value))
+		" />
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'ProgressBar',

src/components/Player/Timer.vue

@@ -1,15 +1,15 @@
 <template>
-	<div>
+	<div v-if="currentTime && duration" class="root">
 		<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
 		<span>/</span>
 		<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
 	</div>
 </template>
 
-<script>
+<script lang="ts">
-import { formatTimer } from '../../utils/time.js'
+import { formatTimer } from '../../utils/time.ts'
 import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.js'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Timer',
@@ -23,7 +23,7 @@ export default {
 </script>
 
 <style scoped>
-div {
+.root {
 	align-items: center;
 	display: flex;
 	gap: 5px;

src/components/Player/Volume.vue

@@ -4,21 +4,25 @@
 			v-if="volume > 0.7"
 			class="pointer"
 			:size="30"
+			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeLowIcon
 			v-if="volume > 0 && volume <= 0.3"
 			class="pointer"
 			:size="30"
+			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeMediumIcon
 			v-if="volume > 0.3 && volume <= 0.7"
 			class="pointer"
 			:size="30"
+			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeMuteIcon
 			v-if="volume === 0"
 			class="pointer"
 			:size="30"
+			:title="t('repod', 'Unmute')"
 			@click="setVolume(volumeMuted)" />
 		<input
 			max="1"
@@ -26,17 +30,21 @@
 			step="0.1"
 			type="range"
 			:value="volume"
-			@change="(event) => setVolume(event.target.value)" />
+			@change="
+				(event) =>
+					setVolume(parseFloat((event.target as HTMLInputElement).value))
+			" />
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeLowIcon from 'vue-material-design-icons/VolumeLow.vue'
 import VolumeMediumIcon from 'vue-material-design-icons/VolumeMedium.vue'
 import VolumeMuteIcon from 'vue-material-design-icons/VolumeMute.vue'
-import { usePlayer } from '../../store/player.js'
+import { t } from '@nextcloud/l10n'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Volume',
@@ -46,11 +54,9 @@ export default {
 		VolumeMediumIcon,
 		VolumeMuteIcon,
 	},
-	data() {
+	data: () => ({
-		return {
+		volumeMuted: 0,
-			volumeMuted: 0,
+	}),
-		}
-	},
 	computed: {
 		...mapState(usePlayer, ['volume']),
 	},
@@ -60,6 +66,7 @@ export default {
 			this.volumeMuted = this.volume
 			this.setVolume(0)
 		},
+		t,
 	},
 }
 </script>

src/components/Settings/Export.vue

@@ -8,10 +8,11 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import ExportIcon from 'vue-material-design-icons/Export.vue'
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Export',
@@ -21,6 +22,7 @@ export default {
 	},
 	methods: {
 		generateUrl,
+		t,
 	},
 }
 </script>

src/components/Settings/Filters.vue

@@ -39,13 +39,13 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
-import { getCookie } from '../../utils/cookies.js'
+import { t } from '@nextcloud/l10n'
-import { useSettings } from '../../store/settings.js'
+import { useSettings } from '../../store/settings.ts'
 
 export default {
 	name: 'Filters',
@@ -65,14 +65,9 @@ export default {
 			)
 		},
 	},
-	mounted() {
-		try {
-			const filters = getCookie('repod.filters')
-			this.filters = JSON.parse(filters)
-		} catch {}
-	},
 	methods: {
 		...mapActions(useSettings, ['setFilters']),
+		t,
 	},
 }
 </script>

src/components/Settings/Import.vue

@@ -29,12 +29,13 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem, NcModal } from '@nextcloud/vue'
 import ImportIcon from 'vue-material-design-icons/Import.vue'
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Import',
@@ -44,19 +45,19 @@ export default {
 		NcAppNavigationItem,
 		NcModal,
 	},
-	data() {
+	data: () => ({
-		return {
+		loading: false,
-			loading: false,
+		modal: false,
-			modal: false,
+	}),
-		}
-	},
 	methods: {
 		generateUrl,
-		async importOpml(event) {
+		t,
+		async importOpml(event: Event) {
 			try {
-				const formData = new FormData(event.target)
+				const target = event.target as HTMLFormElement
-				this.importLoading = true
+				const formData = new FormData(target)
-				await axios.post(event.target.action, formData)
+				this.loading = true
+				await axios.post(target.action, formData)
 			} catch (e) {
 				console.error(e)
 			} finally {

src/components/Settings/Rate.vue

@@ -8,9 +8,10 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Rate',
@@ -18,5 +19,8 @@ export default {
 		NcAppNavigationItem,
 		StarIcon,
 	},
+	methods: {
+		t,
+	},
 }
 </script>

src/components/Settings/Settings.vue

@@ -8,7 +8,7 @@
 	</NcAppNavigationSettings>
 </template>
 
-<script>
+<script lang="ts">
 import Export from './Export.vue'
 import Filters from './Filters.vue'
 import Import from './Import.vue'

src/components/Settings/Speed.vue

@@ -15,7 +15,7 @@
 	</NcAppNavigationItem>
 </template>
 
-<script>
+<script lang="ts">
 import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
@@ -23,7 +23,8 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import SpeedometerIcon from 'vue-material-design-icons/Speedometer.vue'
 import SpeedometerMediumIcon from 'vue-material-design-icons/SpeedometerMedium.vue'
 import SpeedometerSlowIcon from 'vue-material-design-icons/SpeedometerSlow.vue'
-import { usePlayer } from '../../store/player.js'
+import { t } from '@nextcloud/l10n'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'Speed',
@@ -41,8 +42,9 @@ export default {
 	},
 	methods: {
 		...mapActions(usePlayer, ['setRate']),
-		changeRate(diff) {
+		t,
-			const newRate = (this.rate + diff).toPrecision(2)
+		changeRate(diff: number) {
+			const newRate = parseFloat((this.rate + diff).toPrecision(2))
 			this.setRate(newRate > 0 ? newRate : this.rate)
 		},
 	},

src/components/Sidebar/Item.vue

@@ -1,109 +0,0 @@
-<template>
-	<NcAppNavigationItem
-		:loading="loading"
-		:name="feed ? feed.title : url"
-		:to="hash">
-		<template #actions>
-			<NcActionButton
-				:aria-label="t(`core`, 'Delete')"
-				:name="t(`core`, 'Delete')"
-				:title="t(`core`, 'Delete')"
-				@click="deleteSubscription">
-				<template #icon>
-					<DeleteIcon :size="20" />
-				</template>
-			</NcActionButton>
-		</template>
-		<template #icon>
-			<NcAvatar
-				v-if="feed"
-				:display-name="feed.author || feed.title"
-				:is-no-user="true"
-				:url="feed.imageUrl" />
-			<AlertIcon v-if="failed" />
-		</template>
-	</NcAppNavigationItem>
-</template>
-
-<script>
-import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
-import AlertIcon from 'vue-material-design-icons/Alert.vue'
-import DeleteIcon from 'vue-material-design-icons/Delete.vue'
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import { mapActions } from 'pinia'
-import { showError } from '../../utils/toast.js'
-import { toUrl } from '../../utils/url.js'
-import { useSubscriptions } from '../../store/subscriptions.js'
-
-export default {
-	name: 'Item',
-	components: {
-		AlertIcon,
-		DeleteIcon,
-		NcActionButton,
-		NcAppNavigationItem,
-		NcAvatar,
-	},
-	props: {
-		url: {
-			type: String,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			failed: false,
-			loading: true,
-			feed: null,
-		}
-	},
-	computed: {
-		hash() {
-			return toUrl(this.url)
-		},
-	},
-	async mounted() {
-		try {
-			const podcastData = await axios.get(
-				generateUrl(
-					'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
-					{
-						url: this.url,
-					},
-				),
-			)
-			this.feed = podcastData.data.data
-		} catch (e) {
-			this.failed = true
-			console.error(e)
-		} finally {
-			this.loading = false
-		}
-	},
-	methods: {
-		...mapActions(useSubscriptions, ['fetch']),
-		async deleteSubscription() {
-			if (
-				confirm(
-					t('repod', 'Are you sure you want to delete this subscription?'),
-				)
-			) {
-				try {
-					this.loading = true
-					await axios.post(
-						generateUrl('/apps/gpoddersync/subscription_change/create'),
-						{ add: [], remove: [this.url] },
-					)
-				} catch (e) {
-					console.error(e)
-					showError(t('repod', 'Error while removing the feed'))
-				} finally {
-					this.loading = false
-					this.fetch()
-				}
-			}
-		},
-	},
-}
-</script>

src/components/Sidebar/Subscription.vue

@@ -0,0 +1,151 @@
+<template>
+	<NcAppNavigationItem
+		:loading="loading"
+		:name="feed?.data?.title || url"
+		:to="toFeedUrl(url)">
+		<template #actions>
+			<NcActionButton
+				:aria-label="t('repod', 'Favorite')"
+				:model-value="feed?.isFavorite"
+				:name="t('repod', 'Favorite')"
+				:title="t('repod', 'Favorite')"
+				@update:modelValue="switchFavorite($event)">
+				<template #icon>
+					<StarPlusIcon v-if="!feed?.isFavorite" :size="20" />
+					<StarRemoveIcon v-if="feed?.isFavorite" :size="20" />
+				</template>
+			</NcActionButton>
+			<NcActionButton
+				:aria-label="t(`core`, 'Delete')"
+				:name="t(`core`, 'Delete')"
+				:title="t(`core`, 'Delete')"
+				@click="deleteSubscription">
+				<template #icon>
+					<DeleteIcon :size="20" />
+				</template>
+			</NcActionButton>
+		</template>
+		<template #icon>
+			<NcAvatar
+				:display-name="feed?.data?.author || feed?.data?.title"
+				:is-no-user="true"
+				:title="feed?.data?.author"
+				:url="feed?.data?.imageUrl" />
+			<StarIcon v-if="feed?.isFavorite" class="star" :size="20" />
+			<AlertIcon v-if="failed" />
+		</template>
+	</NcAppNavigationItem>
+</template>
+
+<script lang="ts">
+import { NcActionButton, NcAppNavigationItem, NcAvatar } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
+import AlertIcon from 'vue-material-design-icons/Alert.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import type { PersonalSettingsPodcastDataInterface } from '../../utils/types.ts'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import StarPlusIcon from 'vue-material-design-icons/StarPlus.vue'
+import StarRemoveIcon from 'vue-material-design-icons/StarRemove.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
+import { toFeedUrl } from '../../utils/url.ts'
+import { useSubscriptions } from '../../store/subscriptions.ts'
+
+export default {
+	name: 'Subscription',
+	components: {
+		AlertIcon,
+		DeleteIcon,
+		NcActionButton,
+		NcAppNavigationItem,
+		NcAvatar,
+		StarIcon,
+		StarPlusIcon,
+		StarRemoveIcon,
+	},
+	props: {
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			failed: false,
+			loading: true,
+		}
+	},
+	computed: {
+		...mapState(useSubscriptions, ['getSubByUrl', 'subs']),
+		feed() {
+			return this.getSubByUrl(this.url)
+		},
+	},
+	async mounted() {
+		try {
+			const podcastData =
+				await axios.get<PersonalSettingsPodcastDataInterface>(
+					generateUrl(
+						'/apps/gpoddersync/personal_settings/podcast_data?url={url}',
+						{
+							url: this.url,
+						},
+					),
+				)
+			this.addMetadatas(this.url, podcastData.data.data)
+		} catch (e) {
+			this.failed = true
+			console.error(e)
+		} finally {
+			this.loading = false
+		}
+	},
+	methods: {
+		...mapActions(useSubscriptions, ['fetch', 'addMetadatas', 'setFavorite']),
+		t,
+		toFeedUrl,
+		async deleteSubscription() {
+			if (
+				confirm(
+					t('repod', 'Are you sure you want to delete this subscription?'),
+				)
+			) {
+				try {
+					this.loading = true
+					await axios.post(
+						generateUrl('/apps/gpoddersync/subscription_change/create'),
+						{ add: [], remove: [this.url] },
+					)
+				} catch (e) {
+					console.error(e)
+					showError(t('repod', 'Error while removing the feed'))
+				} finally {
+					this.setFavorite(this.url, false)
+					this.loading = false
+					this.fetch()
+				}
+			}
+		},
+		switchFavorite(value: boolean) {
+			if (value) {
+				if (this.subs.filter((sub) => sub.isFavorite).length >= 10) {
+					showError(t('repod', 'You can only have 10 favorites'))
+					return
+				}
+			}
+			this.setFavorite(this.url, value)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.star {
+	bottom: 2px;
+	color: yellow;
+	left: 22px;
+	position: absolute;
+}
+</style>

src/components/Sidebar/Subscriptions.vue

@@ -2,7 +2,7 @@
 	<AppNavigation>
 		<template #list>
 			<NcAppContentList>
-				<router-link to="/">
+				<router-link to="/discover">
 					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
 						<template #icon>
 							<PlusIcon :size="20" />
@@ -11,10 +11,14 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item
+					<Subscription
-						v-for="subscriptionUrl of subscriptions"
+						v-for="sub of subs.filter((sub) => sub.isFavorite)"
-						:key="subscriptionUrl"
+						:key="sub.metrics.url"
-						:url="subscriptionUrl" />
+						:url="sub.metrics.url" />
+					<Subscription
+						v-for="sub of subs.filter((sub) => !sub.isFavorite)"
+						:key="sub.metrics.url"
+						:url="sub.metrics.url" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@@ -24,7 +28,7 @@
 	</AppNavigation>
 </template>
 
-<script>
+<script lang="ts">
 import {
 	NcAppContentList,
 	NcAppNavigationList,
@@ -32,32 +36,31 @@ import {
 } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import AppNavigation from '../Atoms/AppNavigation.vue'
-import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import Settings from '../Settings/Settings.vue'
-import { showError } from '../../utils/toast.js'
+import Subscription from './Subscription.vue'
-import { useSubscriptions } from '../../store/subscriptions.js'
+import { showError } from '../../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
+import { useSubscriptions } from '../../store/subscriptions.ts'
 
 export default {
 	name: 'Subscriptions',
 	components: {
 		AppNavigation,
-		Item,
 		Loading,
 		NcAppContentList,
 		NcAppNavigationList,
 		NcAppNavigationNew,
 		PlusIcon,
 		Settings,
+		Subscription,
 	},
-	data() {
+	data: () => ({
-		return {
+		loading: true,
-			loading: true,
+	}),
-		}
-	},
 	computed: {
-		...mapState(useSubscriptions, ['subscriptions']),
+		...mapState(useSubscriptions, ['subs']),
 	},
 	async mounted() {
 		try {
@@ -71,6 +74,7 @@ export default {
 	},
 	methods: {
 		...mapActions(useSubscriptions, ['fetch']),
+		t,
 	},
 }
 </script>

src/main.ts

@@ -1,13 +1,12 @@
-import { n, t } from '@nextcloud/l10n'
+import '@formatjs/intl-segmenter/polyfill'
 import App from './App.vue'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import router from './router.js'
+import router from './router.ts'
 
 const Vue = createApp(App)
 const pinia = createPinia()
 
-Vue.mixin({ methods: { t, n } })
 Vue.use(pinia)
 Vue.use(router)
 Vue.mount('#content')

src/router.ts

@@ -1,17 +1,22 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Discover from './views/Discover.vue'
 import Feed from './views/Feed.vue'
+import Home from './views/Home.vue'
 import { generateUrl } from '@nextcloud/router'
 
 const router = createRouter({
-	history: createWebHashHistory(generateUrl('apps/repod')),
+	history: createWebHistory(generateUrl('apps/repod')),
 	routes: [
 		{
 			path: '/',
+			component: Home,
+		},
+		{
+			path: '/discover',
 			component: Discover,
 		},
 		{
-			path: '/:url',
+			path: '/feed/:url',
 			component: Feed,
 		},
 	],

src/store/player.ts

@@ -1,24 +1,32 @@
+import type { EpisodeActionInterface, EpisodeInterface } from '../utils/types.ts'
+import { getCookie, setCookie } from '../utils/cookies.ts'
 import axios from '@nextcloud/axios'
 import { defineStore } from 'pinia'
-import { formatEpisodeTimestamp } from '../utils/time.js'
+import { formatEpisodeTimestamp } from '../utils/time.ts'
 import { generateUrl } from '@nextcloud/router'
+import { showError } from '../utils/toast.ts'
+import { t } from '@nextcloud/l10n'
 
 const audio = new Audio()
 
 export const usePlayer = defineStore('player', {
 	state: () => ({
-		currentTime: null,
+		currentTime: null as number | null,
-		duration: null,
+		duration: null as number | null,
-		episode: null,
+		episode: null as EpisodeInterface | null,
 		loaded: false,
-		paused: null,
+		paused: true,
-		podcastUrl: null,
+		playCount: 0,
+		podcastUrl: null as string | null,
 		volume: 1,
 		rate: 1,
 		started: 0,
 	}),
 	actions: {
 		init() {
+			audio.playbackRate = parseFloat(getCookie('repod.rate') || '1')
+			audio.volume = parseFloat(getCookie('repod.volume') || '1')
+
 			audio.ondurationchange = () => (this.duration = audio.duration)
 			audio.onended = () => this.stop()
 			audio.onloadeddata = () => (this.loaded = true)
@@ -28,28 +36,38 @@ export const usePlayer = defineStore('player', {
 			audio.onseeked = () => (this.currentTime = audio.currentTime)
 			audio.ontimeupdate = () => (this.currentTime = audio.currentTime)
 			audio.onvolumechange = () => (this.volume = audio.volume)
-		},
-		async load(episode, podcastUrl) {
-			this.episode = episode
-			this.podcastUrl = podcastUrl
 
-			if (this.episode) {
+			setInterval(this.act, 40000)
+			setInterval(this.conflict, 1000)
+		},
+		act() {
+			if (this.paused === false) {
+				this.time()
+			}
+		},
+		conflict() {
+			this.playCount = 0
+		},
+		async load(episode: EpisodeInterface | null, podcastUrl?: string) {
+			this.episode = episode
+			this.podcastUrl = podcastUrl || null
+
+			if (this.episode?.url) {
 				audio.src = this.episode.url
 				audio.load()
 
 				try {
-					const action = await axios.get(
+					const action = await axios.get<EpisodeActionInterface>(
 						generateUrl('/apps/repod/episodes/action?url={url}', {
 							url: this.episode.url,
 						}),
 					)
 
-					this.episode.action = action
+					this.episode.action = action.data
 				} catch {}
 
 				if (
 					this.episode.action &&
-					this.episode.action.position &&
 					this.episode.action.position < this.episode.action.total
 				) {
 					audio.currentTime = this.episode.action.position
@@ -69,11 +87,17 @@ export const usePlayer = defineStore('player', {
 			this.time()
 		},
 		play() {
-			audio.play()
+			this.playCount++
-			this.paused = false
+
-			this.started = audio.currentTime
+			if (this.playCount > 10) {
+				showError(t('repod', 'A browser extension conflict with RePod'))
+			} else {
+				audio.play()
+				this.paused = false
+				this.started = audio.currentTime
+			}
 		},
-		seek(currentTime) {
+		seek(currentTime: number) {
 			audio.currentTime = currentTime
 			this.time()
 		},
@@ -82,6 +106,10 @@ export const usePlayer = defineStore('player', {
 			this.episode = null
 		},
 		time() {
+			if (!this.podcastUrl || !this.episode?.url) {
+				return
+			}
+
 			this.episode.action = {
 				podcast: this.podcastUrl,
 				episode: this.episode.url,
@@ -92,15 +120,18 @@ export const usePlayer = defineStore('player', {
 				position: Math.round(audio.currentTime),
 				total: Math.round(audio.duration),
 			}
+
 			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
 				this.episode.action,
 			])
 		},
-		setVolume(volume) {
+		setVolume(volume: number) {
 			audio.volume = volume
+			setCookie('repod.volume', volume.toString(), 365)
 		},
-		setRate(rate) {
+		setRate(rate: number) {
 			audio.playbackRate = rate
+			setCookie('repod.rate', rate.toString(), 365)
 		},
 	},
 })

src/store/settings.js

@@ -1,18 +0,0 @@
-import { defineStore } from 'pinia'
-import { setCookie } from '../utils/cookies.js'
-
-export const useSettings = defineStore('settings', {
-	state: () => ({
-		filters: {
-			listened: true,
-			listening: true,
-			unlistened: true,
-		},
-	}),
-	actions: {
-		setFilters(filters) {
-			this.filters = { ...this.filters, ...filters }
-			setCookie('repod.filters', JSON.stringify(this.filters), 365)
-		},
-	},
-})

src/store/settings.ts

@@ -0,0 +1,37 @@
+import { getCookie, setCookie } from '../utils/cookies.ts'
+import type { FiltersInterface } from '../utils/types.ts'
+import { defineStore } from 'pinia'
+
+export const useSettings = defineStore('settings', {
+	state: () => {
+		try {
+			const filters = JSON.parse(getCookie('repod.filters') || '{}') || {}
+
+			if (!filters.length) {
+				throw new Error('Empty cookie')
+			}
+
+			return {
+				filters: {
+					listened: filters.listened,
+					listening: filters.listening,
+					unlistened: filters.unlistened,
+				},
+			}
+		} catch {
+			return {
+				filters: {
+					listened: true,
+					listening: true,
+					unlistened: true,
+				},
+			}
+		}
+	},
+	actions: {
+		setFilters(filters: Partial<FiltersInterface>) {
+			this.filters = { ...this.filters, ...filters }
+			setCookie('repod.filters', JSON.stringify(this.filters), 365)
+		},
+	},
+})

src/store/subscriptions.js

@@ -1,20 +0,0 @@
-import axios from '@nextcloud/axios'
-import { defineStore } from 'pinia'
-import { generateUrl } from '@nextcloud/router'
-
-export const useSubscriptions = defineStore('subscriptions', {
-	state: () => ({
-		subscriptions: [],
-	}),
-	actions: {
-		async fetch() {
-			const metrics = await axios.get(
-				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
-			)
-			const subs = [...metrics.data.subscriptions].sort(
-				(a, b) => b.listenedSeconds - a.listenedSeconds,
-			)
-			this.subscriptions = subs.map((sub) => sub.url)
-		},
-	},
-})

src/store/subscriptions.ts

@@ -0,0 +1,59 @@
+import type {
+	PersonalSettingsMetricsInterface,
+	PodcastDataInterface,
+	SubscriptionInterface,
+} from '../utils/types.ts'
+import { getCookie, setCookie } from '../utils/cookies.ts'
+import axios from '@nextcloud/axios'
+import { defineStore } from 'pinia'
+import { generateUrl } from '@nextcloud/router'
+
+export const useSubscriptions = defineStore('subscriptions', {
+	state: () => ({
+		subs: [] as SubscriptionInterface[],
+	}),
+	getters: {
+		getSubByUrl: (state) => (url: string) =>
+			state.subs.find((sub) => sub.metrics.url === url),
+	},
+	actions: {
+		async fetch() {
+			let favorites: string[] = []
+			try {
+				favorites = JSON.parse(getCookie('repod.favorites') || '[]') || []
+			} catch {}
+
+			const metrics = await axios.get<PersonalSettingsMetricsInterface>(
+				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
+			)
+
+			this.subs = [...metrics.data.subscriptions]
+				.sort((a, b) => b.listenedSeconds - a.listenedSeconds)
+				.map((sub) => ({
+					metrics: sub,
+					isFavorite: favorites.includes(sub.url),
+					data: this.getSubByUrl(sub.url)?.data,
+				}))
+		},
+		addMetadatas(link: string, data: PodcastDataInterface) {
+			this.subs = this.subs.map((sub) =>
+				sub.metrics.url === link ? { ...sub, data } : sub,
+			)
+		},
+		setFavorite(link: string, isFavorite: boolean) {
+			this.subs = this.subs.map((sub) =>
+				sub.metrics.url === link ? { ...sub, isFavorite } : sub,
+			)
+
+			setCookie(
+				'repod.favorites',
+				JSON.stringify(
+					this.subs
+						.filter((sub) => sub.isFavorite)
+						.map((sub) => sub.metrics.url),
+				),
+				365,
+			)
+		},
+	},
+})

src/utils/cookies.ts

@@ -4,7 +4,7 @@
  * @param {string} name Nom du cookie à récupérer
  * @return {string|null}
  */
-export const getCookie = (name) => {
+export const getCookie = (name: string): string | null => {
 	const cookies = document.cookie.split('; ')
 	const value = cookies.find((c) => c.startsWith(name + '='))?.split('=')[1]
 	if (value === undefined) {
@@ -19,7 +19,7 @@ export const getCookie = (name) => {
  * @param {string} value Value du cookie
  * @param {number} days Durée de vie du cookie (en jours)
  */
-export const setCookie = (name, value, days) => {
+export const setCookie = (name: string, value: string, days: number) => {
 	const date = new Date()
 	date.setDate(date.getDate() + days)
 	document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; SameSite=Strict;`

src/utils/debounce.js

@@ -1,12 +0,0 @@
-// https://stackoverflow.com/a/53486112
-export const debounce = (fn, delay) => {
-	let timeoutID = null
-	return function () {
-		clearTimeout(timeoutID)
-		const args = arguments
-		const that = this
-		timeoutID = setTimeout(function () {
-			fn.apply(that, args)
-		}, delay)
-	}
-}

src/utils/size.ts

@@ -1,8 +1,8 @@
 // https://stackoverflow.com/a/20732091
-export const humanFileSize = (size) => {
+export const humanFileSize = (size: number) => {
 	const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
 	return (
-		(size / Math.pow(1024, i)).toFixed(2) * 1 +
+		(size / Math.pow(1024, i)).toFixed(2) +
 		' ' +
 		['B', 'kB', 'MB', 'GB', 'TB'][i]
 	)

src/utils/status.ts

@@ -0,0 +1,16 @@
+import type { EpisodeInterface } from './types'
+
+export const hasEnded = (episode: EpisodeInterface) =>
+	episode.action &&
+	episode.action.action &&
+	(episode.action.action.toLowerCase() === 'delete' ||
+		(episode.action.position > 0 &&
+			episode.action.total > 0 &&
+			episode.action.position >= episode.action.total))
+
+export const isListening = (episode: EpisodeInterface) =>
+	episode.action &&
+	episode.action.action &&
+	episode.action.action.toLowerCase() === 'play' &&
+	episode.action.position > 0 &&
+	!hasEnded(episode)

src/utils/time.ts

@@ -3,9 +3,9 @@
  * @param {Date} date The date
  * @return {string}
  */
-export const formatTimer = (date) => {
+export const formatTimer = (date: Date): string => {
-	const minutes = date.getUTCMinutes().toString().padStart(2, 0)
+	const minutes = date.getUTCMinutes().toString().padStart(2, '0')
-	const seconds = date.getUTCSeconds().toString().padStart(2, 0)
+	const seconds = date.getUTCSeconds().toString().padStart(2, '0')
 	let timer = `${minutes}:${seconds}`
 
 	if (date.getUTCHours()) {
@@ -20,7 +20,7 @@ export const formatTimer = (date) => {
  * @param {Date} date The date
  * @return {string}
  */
-export const formatEpisodeTimestamp = (date) => {
+export const formatEpisodeTimestamp = (date: Date): string => {
 	const year = date.getFullYear()
 	const month = (date.getMonth() + 1).toString().padStart(2, '0')
 	const day = date.getDate().toString().padStart(2, '0')
@@ -36,7 +36,7 @@ export const formatEpisodeTimestamp = (date) => {
  * @param {Date} date The date
  * @return {string}
  */
-export const formatLocaleDate = (date) =>
+export const formatLocaleDate = (date: Date): string =>
 	date.toLocaleDateString(undefined, { dateStyle: 'medium' })
 
 /**
@@ -44,7 +44,7 @@ export const formatLocaleDate = (date) =>
  * @param {string} duration The duration feed's entry
  * @return {number}
  */
-export const durationToSeconds = (duration) => {
+export const durationToSeconds = (duration: string): number => {
 	const splitDuration = duration.split(':').reverse()
 	let seconds = parseInt(splitDuration[0])
 	seconds += splitDuration.length > 1 ? parseInt(splitDuration[1]) * 60 : 0

src/utils/toast.js

@@ -1,12 +0,0 @@
-import toastify from 'toastify-js'
-
-export const showMessage = (text, backgroundColor) =>
-	toastify({
-		text,
-		backgroundColor,
-	}).showToast()
-
-export const showError = (text) => showMessage(text, 'var(--color-error)')
-export const showWarning = (text) => showMessage(text, 'var(--color-warning)')
-export const showInfo = (text) => showMessage(text, 'var(--color-primary)')
-export const showSuccess = (text) => showMessage(text, 'var(--color-success)')

src/utils/toast.ts

@@ -0,0 +1,14 @@
+import toastify from 'toastify-js'
+
+export const showMessage = (text: string, backgroundColor: string) =>
+	toastify({
+		text,
+		backgroundColor,
+	}).showToast()
+
+export const showError = (text: string) => showMessage(text, 'var(--color-error)')
+export const showWarning = (text: string) =>
+	showMessage(text, 'var(--color-warning)')
+export const showInfo = (text: string) => showMessage(text, 'var(--color-primary)')
+export const showSuccess = (text: string) =>
+	showMessage(text, 'var(--color-success)')

src/utils/types.ts

@@ -0,0 +1,73 @@
+export interface EpisodeActionInterface {
+	podcast: string
+	episode: string
+	action: string
+	timestamp: string
+	started: number
+	position: number
+	total: number
+	guid?: string
+	id?: number
+}
+
+export interface EpisodeInterface {
+	title: string
+	url: string
+	name: string
+	link?: string
+	image?: string
+	description?: string
+	fetchedAtUnix: number
+	guid: string
+	type?: string
+	size?: number
+	pubDate?: {
+		date: string
+		timezone_type: number
+		timezone: string
+	}
+	duration?: string
+	action?: EpisodeActionInterface
+}
+
+export interface FiltersInterface {
+	listened: boolean
+	listening: boolean
+	unlistened: boolean
+}
+
+export interface PodcastDataInterface {
+	title: string
+	author?: string
+	link: string
+	description?: string
+	imageUrl?: string
+	fetchedAtUnix: number
+	imageBlob?: string | null
+}
+
+export interface PodcastMetricsInterface {
+	url: string
+	listenedSeconds: number
+	actionCounts: {
+		delete: number
+		download: number
+		flattr: number
+		new: number
+		play: number
+	}
+}
+
+export interface SubscriptionInterface {
+	data?: PodcastDataInterface
+	isFavorite?: boolean
+	metrics: PodcastMetricsInterface
+}
+
+export interface PersonalSettingsMetricsInterface {
+	subscriptions: PodcastMetricsInterface[]
+}
+
+export interface PersonalSettingsPodcastDataInterface {
+	data: PodcastDataInterface
+}

src/utils/url.js

@@ -1,7 +0,0 @@
-export const encodeUrl = (url) => encodeURIComponent(btoa(url))
-export const decodeUrl = (url) => atob(decodeURIComponent(url))
-export const toUrl = (url) => `/${encodeUrl(url)}`
-export const filenameFromUrl = (str) => {
-	const url = new URL(str)
-	return url.pathname.split('/').pop()
-}

src/utils/url.ts

@@ -0,0 +1,5 @@
+export const encodeUrl = (url: string) => encodeURIComponent(btoa(url))
+export const decodeUrl = (url: string) => atob(decodeURIComponent(url))
+export const toFeedUrl = (url: string) => `/feed/${encodeUrl(url)}`
+export const filenameFromUrl = (url: string) =>
+	new URL(url).pathname.split('/').pop()

src/views/Discover.vue

@@ -1,5 +1,5 @@
 <template>
-	<AppContent class="main">
+	<AppContent class="padding">
 		<NcTextField v-model="search" :label="t('repod', 'Find a podcast')">
 			<template #icon>
 				<Magnify :size="20" />
@@ -12,13 +12,14 @@
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import AddRss from '../components/Discover/AddRss.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import { NcTextField } from '@nextcloud/vue'
 import Search from '../components/Discover/Search.vue'
 import Toplist from '../components/Discover/Toplist.vue'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Discover',
@@ -30,16 +31,17 @@ export default {
 		Search,
 		Toplist,
 	},
-	data() {
+	data: () => ({
-		return {
+		search: '',
-			search: '',
+	}),
-		}
+	methods: {
+		t,
 	},
 }
 </script>
 
 <style scoped>
-.main {
+.padding {
 	padding: 15px 51px;
 }
 </style>

src/views/Feed.vue

@@ -1,35 +1,28 @@
 <template>
 	<AppContent>
 		<Loading v-if="loading" />
-		<NcEmptyContent
+		<EmptyContent v-if="failed" :name="t('repod', 'Error loading feed')">
-			v-if="failed"
-			class="error"
-			:name="t('repod', 'Error loading feed')">
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
-		<Banner
+		<Banner v-if="feed" :feed="feed" />
-			v-if="feed"
-			:author="feed.author"
-			:description="feed.description"
-			:image-url="feed.imageUrl"
-			:link="feed.link"
-			:title="feed.title" />
 		<Episodes v-if="feed" />
 	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
 import Alert from 'vue-material-design-icons/Alert.vue'
 import AppContent from '../components/Atoms/AppContent.vue'
 import Banner from '../components/Feed/Banner.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
 import Episodes from '../components/Feed/Episodes.vue'
 import Loading from '../components/Atoms/Loading.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
+import type { PodcastDataInterface } from '../utils/types.ts'
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../utils/url.js'
+import { decodeUrl } from '../utils/url.ts'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Feed',
@@ -37,25 +30,24 @@ export default {
 		Alert,
 		AppContent,
 		Banner,
+		EmptyContent,
 		Episodes,
 		Loading,
-		NcEmptyContent,
-	},
-	data() {
-		return {
-			failed: false,
-			loading: true,
-			feed: null,
-		}
 	},
+	data: () => ({
+		failed: false,
+		loading: true,
+		feed: null as PodcastDataInterface | null,
+	}),
 	computed: {
 		url() {
-			return decodeUrl(this.$route.params.url)
+			return decodeUrl(this.$route.params.url as string)
 		},
 	},
 	async mounted() {
 		try {
-			const podcastData = await axios.get(
+			this.loading = true
+			const podcastData = await axios.get<PodcastDataInterface>(
 				generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
 			)
 			this.feed = podcastData.data
@@ -66,11 +58,8 @@ export default {
 			this.loading = false
 		}
 	},
+	methods: {
+		t,
+	},
 }
 </script>
-
-<style scoped>
-.error {
-	margin: 2rem;
-}
-</style>

src/views/GPodder.vue

@@ -1,6 +1,6 @@
 <template>
-	<NcAppContent class="content">
+	<AppContent>
-		<NcEmptyContent :name="t('repod', 'Missing required app')">
+		<EmptyContent :name="t('repod', 'Missing required app')">
 			<template #action>
 				<NcButton :href="gPodderSyncUrl">
 					{{ t('repod', 'Install GPodder Sync') }}
@@ -9,27 +9,33 @@
 			<template #icon>
 				<Alert />
 			</template>
-		</NcEmptyContent>
+		</EmptyContent>
-	</NcAppContent>
+	</AppContent>
 </template>
 
-<script>
+<script lang="ts">
-import { NcAppContent, NcButton, NcEmptyContent } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import AppContent from '../components/Atoms/AppContent.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
+import { NcButton } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
+import { t } from '@nextcloud/l10n'
 
 export default {
 	name: 'GPodder',
 	components: {
 		Alert,
-		NcAppContent,
+		AppContent,
+		EmptyContent,
 		NcButton,
-		NcEmptyContent,
 	},
 	computed: {
 		gPodderSyncUrl() {
 			return generateUrl('/settings/apps/installed/gpoddersync')
 		},
 	},
+	methods: {
+		t,
+	},
 }
 </script>

src/views/Home.vue

@@ -0,0 +1,55 @@
+<template>
+	<AppContent>
+		<EmptyContent
+			v-if="!favorites.length"
+			class="padding"
+			:description="
+				t('repod', 'Pin some subscriptions to see their latest updates')
+			"
+			:name="t('repod', 'No favorites')">
+			<template #icon>
+				<StarOffIcon />
+			</template>
+		</EmptyContent>
+		<ul v-if="favorites.length">
+			<li v-for="favorite in favorites" :key="favorite.metrics.url">
+				<Favorite :feed="favorite" />
+			</li>
+		</ul>
+	</AppContent>
+</template>
+
+<script lang="ts">
+import AppContent from '../components/Atoms/AppContent.vue'
+import EmptyContent from '../components/Atoms/EmptyContent.vue'
+import Favorite from '../components/Feed/Favorite.vue'
+import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
+import { mapState } from 'pinia'
+import { t } from '@nextcloud/l10n'
+import { useSubscriptions } from '../store/subscriptions.ts'
+
+export default {
+	name: 'Home',
+	components: {
+		AppContent,
+		EmptyContent,
+		Favorite,
+		StarOffIcon,
+	},
+	computed: {
+		...mapState(useSubscriptions, ['subs']),
+		favorites() {
+			return this.subs.filter((sub) => sub.isFavorite)
+		},
+	},
+	methods: {
+		t,
+	},
+}
+</script>
+
+<style scoped>
+.padding {
+	padding: 15px 51px;
+}
+</style>

stubs/OCA/GPodderSync/Core/SubscriptionChange/SubscriptionChangeRequestParser.php

@@ -6,7 +6,9 @@ namespace OCA\GPodderSync\Core\SubscriptionChange;
 
 class SubscriptionChangeRequestParser
 {
-	public function __construct(private SubscriptionChangesReader $subscriptionChangeReader) {}
+	public function __construct(
+		private SubscriptionChangesReader $subscriptionChangeReader
+	) {}
 
 	/**
 	 * @return SubscriptionChange[]

stubs/OCA/GPodderSync/Db/EpisodeAction/EpisodeActionRepository.php

@@ -8,7 +8,9 @@ use OCA\GPodderSync\Core\EpisodeAction\EpisodeAction;
 
 class EpisodeActionRepository
 {
-	public function __construct(private EpisodeActionMapper $episodeActionMapper) {}
+	public function __construct(
+		private EpisodeActionMapper $episodeActionMapper
+	) {}
 
 	/**
 	 * @return EpisodeAction[]

stubs/OCA/GPodderSync/Db/EpisodeAction/EpisodeActionWriter.php

@@ -8,7 +8,9 @@ use OCP\DB\Exception;
 
 class EpisodeActionWriter
 {
-	public function __construct(private EpisodeActionMapper $episodeActionMapper) {}
+	public function __construct(
+		private EpisodeActionMapper $episodeActionMapper
+	) {}
 
 	/**
 	 * @return EpisodeActionEntity

stubs/OCA/GPodderSync/Db/SubscriptionChange/SubscriptionChangeRepository.php

@@ -6,7 +6,9 @@ namespace OCA\GPodderSync\Db\SubscriptionChange;
 
 class SubscriptionChangeRepository
 {
-	public function __construct(private SubscriptionChangeMapper $subscriptionChangeMapper) {}
+	public function __construct(
+		private SubscriptionChangeMapper $subscriptionChangeMapper
+	) {}
 
 	/**
 	 * @return SubscriptionChangeEntity[]

stubs/OCA/GPodderSync/Db/SubscriptionChange/SubscriptionChangeWriter.php

@@ -6,7 +6,9 @@ namespace OCA\GPodderSync\Db\SubscriptionChange;
 
 class SubscriptionChangeWriter
 {
-	public function __construct(private SubscriptionChangeMapper $subscriptionChangeMapper) {}
+	public function __construct(
+		private SubscriptionChangeMapper $subscriptionChangeMapper
+	) {}
 
 	public function purge(): void {}
 

translationfiles/de/repod.po

@@ -32,7 +32,13 @@ msgid ""
 "## Features\n"
 "- 🔍 Browse and subscribe huge collection of podcasts\n"
 "- 🔊 Listen to episodes directly in Nextcloud\n"
-"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n"
+"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other "
+"apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-"
+"gpoddersync)\n"
+"- 📱 Mobile friendly interface\n"
+"- 📡 Import and export your subscriptions\n"
+"- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/"
+"repod#comparaison-with-similar-apps-for-nextcloud)\n"
 "\n"
 "## Requirements\n"
 "You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) "
@@ -42,6 +48,8 @@ msgstr ""
 "- 🔍 Durchsuchen und abonnieren einer großen Sammlung von Podcasts\n"
 "- 🔊 Episoden direkt in Nextcloud anhören\n"
 "- 🌐 Synchronisiere deine Aktivität mit [AntennaPod](https://antennapod.org/)\n"
+"- 📱 Mobile-freundliche Schnittstelle\n"
+"- 📡 Importieren und Exportieren Ihrer Abonnements\n"
 "\n"
 "## Voraussetzungen\n"
 "Du musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) "
@@ -83,20 +91,32 @@ msgstr "Abspielen"
 msgid "Stop"
 msgstr "Stopp"
 
-msgid "Mark as read"
+msgid "Read"
-msgstr "Als gelesen markieren"
+msgstr "Gelesen"
-
-msgid "Mark as unread"
-msgstr "Als ungelesen markieren"
 
 msgid "Open website"
 msgstr "Webseite aufrufen"
 
+msgid "Could not change the status of the episode"
+msgstr "Kann den Status der Folge nicht ändern"
+
 msgid "Could not fetch episodes"
 msgstr "Folgen können nicht abgerufen werden"
 
-msgid "Could not change the status of the episode"
+msgid "Rewind 10 seconds"
-msgstr "Kann den Status der Folge nicht ändern"
+msgstr "10 Sekunden zurückspulen"
+
+msgid "Pause"
+msgstr "Pause"
+
+msgid "Fast forward 30 seconds"
+msgstr "30 Sekunden vorspulen"
+
+msgid "Mute"
+msgstr "Stumm"
+
+msgid "Unmute"
+msgstr "Stummschalten"
 
 msgid "Export subscriptions"
 msgstr "Abonnements exportieren"
@@ -128,12 +148,18 @@ msgstr "Bewerte RePod ❤️"
 msgid "Playback speed"
 msgstr "Wiedergabegeschwindigkeit"
 
+msgid "Favorite"
+msgstr "Favorit"
+
 msgid "Are you sure you want to delete this subscription?"
 msgstr "Bist Du sicher, dass Du das Abonnement löschen möchtest?"
 
 msgid "Error while removing the feed"
 msgstr "Fehler beim Löschen des Feeds"
 
+msgid "You can only have 10 favorites"
+msgstr "Du kannst nur 10 Favoriten haben"
+
 msgid "Add a podcast"
 msgstr "Einen Podcast hinzufügen"
 
@@ -151,3 +177,12 @@ msgstr "Benötigte App fehlt"
 
 msgid "Install GPodder Sync"
 msgstr "Installiere GPodder Sync"
+
+msgid "Pin some subscriptions to see their latest updates"
+msgstr "Pinne einige Abonnements, um ihre neuesten Updates zu sehen"
+
+msgid "No favorites"
+msgstr "Keine Favoriten"
+
+msgid "A browser extension conflict with RePod"
+msgstr "Ein Browser-Erweiterungskonflikt mit RePod"

translationfiles/fr/repod.po

@@ -32,7 +32,13 @@ msgid ""
 "## Features\n"
 "- 🔍 Browse and subscribe huge collection of podcasts\n"
 "- 🔊 Listen to episodes directly in Nextcloud\n"
-"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n"
+"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other "
+"apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-"
+"gpoddersync)\n"
+"- 📱 Mobile friendly interface\n"
+"- 📡 Import and export your subscriptions\n"
+"- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/"
+"repod#comparaison-with-similar-apps-for-nextcloud)\n"
 "\n"
 "## Requirements\n"
 "You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) "
@@ -41,7 +47,13 @@ msgstr ""
 "## Fonctionnalités\n"
 "- 🔍 Parcourir et s'abonner à une grande collections de podcasts\n"
 "- 🔊 Écouter vos épisodes directement sur Nextcloud\n"
-"- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/)\n"
+"- 🌐 Synchroniser son activité avec [AntennaPod](https://antennapod.org/) et d'autres "
+"[applications](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-"
+"gpoddersync)\n"
+"- 📱 Interface optimisée pour mobiles et ordinateurs\n"
+"- 📡 Import/export de ses abonnements\n"
+"- ➡️ Tableau récapitulatif complet des fonctionnalitées [ici](https://git.crystalyx."
+"net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n"
 "\n"
 "## Pré-requis\n"
 "Vous devez avoir [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) "
@@ -83,20 +95,32 @@ msgstr "Lecture"
 msgid "Stop"
 msgstr "Arrêter"
 
-msgid "Mark as read"
+msgid "Read"
-msgstr "Marquer comme lu"
+msgstr "Lu"
-
-msgid "Mark as unread"
-msgstr "Marquer comme non lu"
 
 msgid "Open website"
 msgstr "Ouvrir le site web"
 
+msgid "Could not change the status of the episode"
+msgstr "Impossible de changer le status de l'épisode"
+
 msgid "Could not fetch episodes"
 msgstr "Impossible de récuprer les épisodes"
 
-msgid "Could not change the status of the episode"
+msgid "Rewind 10 seconds"
-msgstr "Impossible de changer le status de l'épisode"
+msgstr "Retour rapide de 10 secondes"
+
+msgid "Pause"
+msgstr "Pause"
+
+msgid "Fast forward 30 seconds"
+msgstr "Avance rapide de 30 secondes"
+
+msgid "Mute"
+msgstr "Silencer"
+
+msgid "Unmute"
+msgstr "Paroler"
 
 msgid "Export subscriptions"
 msgstr "Exporter les abonnements"
@@ -128,12 +152,18 @@ msgstr "Donnez votre avis ❤️"
 msgid "Playback speed"
 msgstr "Vitesse de lecture"
 
+msgid "Favorite"
+msgstr "Favori"
+
 msgid "Are you sure you want to delete this subscription?"
 msgstr "Êtes-vous sûr de vouloir supprimer ce flux ?"
 
 msgid "Error while removing the feed"
 msgstr "Erreur lors de la suppression du flux"
 
+msgid "You can only have 10 favorites"
+msgstr "Vous ne pouvez avoir que 10 favoris"
+
 msgid "Add a podcast"
 msgstr "Ajouter un podcast"
 
@@ -151,3 +181,12 @@ msgstr "Une application requise est manquante"
 
 msgid "Install GPodder Sync"
 msgstr "Installer GPodder Sync"
+
+msgid "Pin some subscriptions to see their latest updates"
+msgstr "Ajoutez des abonnements en favoris pour obtenir les dernières nouvelles ici"
+
+msgid "No favorites"
+msgstr "Aucun favoris"
+
+msgid "A browser extension conflict with RePod"
+msgstr "Une extension de votre navigateur entre en conflit avec RePod"

translationfiles/templates/repod.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Nextcloud 3.14159\n"
 "Report-Msgid-Bugs-To: translations\\@example.com\n"
-"POT-Creation-Date: 2024-08-09 10:10+0000\n"
+"POT-Creation-Date: 2024-11-08 23:27+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,7 +17,7 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: /app/lib/Controller/OpmlController.php:44
+#: /app/lib/Controller/OpmlController.php:46
 msgid "RePod Subscriptions"
 msgstr ""
 
@@ -40,7 +40,13 @@ msgid ""
 "## Features\n"
 "- 🔍 Browse and subscribe huge collection of podcasts\n"
 "- 🔊 Listen to episodes directly in Nextcloud\n"
-"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)\n"
+"- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/) and [other "
+"apps](https://git.crystalyx.net/Xefir/repod#clients-supporting-sync-of-"
+"gpoddersync)\n"
+"- 📱 Mobile friendly interface\n"
+"- 📡 Import and export your subscriptions\n"
+"- ➡️ Full features comparison [here](https://git.crystalyx.net/Xefir/"
+"repod#comparaison-with-similar-apps-for-nextcloud)\n"
 "\n"
 "## Requirements\n"
 "You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) "
@@ -48,8 +54,8 @@ msgid ""
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:1
-#: /app/specialVueFakeDummyForL10nScript.js:27
+#: /app/specialVueFakeDummyForL10nScript.js:24
-#: /app/specialVueFakeDummyForL10nScript.js:28
+#: /app/specialVueFakeDummyForL10nScript.js:25
 msgid "Download"
 msgstr ""
 
@@ -95,6 +101,7 @@ msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:15
 #: /app/specialVueFakeDummyForL10nScript.js:16
+#: /app/specialVueFakeDummyForL10nScript.js:31
 msgid "Play"
 msgstr ""
 
@@ -106,96 +113,135 @@ msgstr ""
 #: /app/specialVueFakeDummyForL10nScript.js:19
 #: /app/specialVueFakeDummyForL10nScript.js:20
 #: /app/specialVueFakeDummyForL10nScript.js:21
-msgid "Mark as read"
+msgid "Read"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:22
 #: /app/specialVueFakeDummyForL10nScript.js:23
-#: /app/specialVueFakeDummyForL10nScript.js:24
-msgid "Mark as unread"
-msgstr ""
-
-#: /app/specialVueFakeDummyForL10nScript.js:25
-#: /app/specialVueFakeDummyForL10nScript.js:26
 msgid "Open website"
 msgstr ""
 
-#: /app/specialVueFakeDummyForL10nScript.js:29
+#: /app/specialVueFakeDummyForL10nScript.js:26
-msgid "Could not fetch episodes"
-msgstr ""
-
-#: /app/specialVueFakeDummyForL10nScript.js:30
 msgid "Could not change the status of the episode"
 msgstr ""
 
-#: /app/specialVueFakeDummyForL10nScript.js:31
+#: /app/specialVueFakeDummyForL10nScript.js:27
-msgid "Export subscriptions"
+#: /app/specialVueFakeDummyForL10nScript.js:28
+msgid "Could not fetch episodes"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:29
+msgid "Rewind 10 seconds"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:30
+msgid "Pause"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:32
-msgid "Filtering episodes"
+msgid "Fast forward 30 seconds"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:33
-msgid "Show all"
-msgstr ""
-
 #: /app/specialVueFakeDummyForL10nScript.js:34
-msgid "Listened"
-msgstr ""
-
 #: /app/specialVueFakeDummyForL10nScript.js:35
-msgid "Listening"
+msgid "Mute"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:36
-msgid "Unlistened"
+msgid "Unmute"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:37
-msgid "Import subscriptions"
+msgid "Export subscriptions"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:38
-msgid "Import OPML file"
+msgid "Filtering episodes"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:39
-msgid "Rate RePod ❤️"
+msgid "Show all"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:40
-msgid "Playback speed"
+msgid "Listened"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:41
-msgid "Are you sure you want to delete this subscription?"
+msgid "Listening"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:42
-msgid "Error while removing the feed"
+msgid "Unlistened"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:43
-msgid "Add a podcast"
+msgid "Import subscriptions"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:44
-msgid "Could not fetch subscriptions"
+msgid "Import OPML file"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:45
-msgid "Find a podcast"
+msgid "Rate RePod ❤️"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:46
-msgid "Error loading feed"
+msgid "Playback speed"
 msgstr ""
 
 #: /app/specialVueFakeDummyForL10nScript.js:47
+#: /app/specialVueFakeDummyForL10nScript.js:48
+#: /app/specialVueFakeDummyForL10nScript.js:49
+msgid "Favorite"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:50
+msgid "Are you sure you want to delete this subscription?"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:51
+msgid "Error while removing the feed"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:52
+msgid "You can only have 10 favorites"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:53
+msgid "Add a podcast"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:54
+msgid "Could not fetch subscriptions"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:55
+msgid "Find a podcast"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:56
+msgid "Error loading feed"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:57
 msgid "Missing required app"
 msgstr ""
 
-#: /app/specialVueFakeDummyForL10nScript.js:48
+#: /app/specialVueFakeDummyForL10nScript.js:58
 msgid "Install GPodder Sync"
 msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:59
+msgid "Pin some subscriptions to see their latest updates"
+msgstr ""
+
+#: /app/specialVueFakeDummyForL10nScript.js:60
+msgid "No favorites"
+msgstr ""
+
+#: /app/src/store/player.ts:93
+msgid "A browser extension conflict with RePod"
+msgstr ""

tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "extends": "@vue/tsconfig",
+    "include": ["./src/**/*.ts", "./src/**/*.vue", "**/*.ts"],
+    "compilerOptions": {
+      "allowImportingTsExtensions": true,
+      "allowSyntheticDefaultImports": true,
+      "target": "ESNext",
+      "module": "ESNext",
+      "moduleResolution": "Bundler",
+      "noImplicitAny": false,
+      "rootDir": ".",
+      "strict": true,
+      "noEmit": true,
+    }
+  }

vite.config.mjs

@@ -1,22 +0,0 @@
-import { createAppConfig } from '@nextcloud/vite-config'
-import { defineConfig } from 'vite'
-
-const config = defineConfig(({ mode }) => ({
-	build: {
-		rollupOptions: {
-			output: {
-				entryFileNames: 'js/[name].js',
-				format: 'iife',
-				manualChunks: false,
-			},
-		},
-		sourcemap: mode === 'development',
-	},
-}))
-
-export default createAppConfig(
-	{
-		main: 'src/main.js',
-	},
-	{ config },
-)

vite.config.ts

@@ -0,0 +1,20 @@
+import { join, resolve } from 'path'
+import { createAppConfig } from '@nextcloud/vite-config'
+import { defineConfig } from 'vite'
+
+const config = defineConfig({
+	build: {
+		sourcemap: false,
+	},
+})
+
+export default createAppConfig(
+	{
+		main: resolve(join('src', 'main.ts')),
+	},
+	{
+		config,
+		createEmptyCSSEntryPoints: true,
+		thirdPartyLicense: false,
+	},
+)