113 changed files with 7565 additions and 7854 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -9,6 +9,5 @@

 /node_modules/
 /js/
-/css/

 /build/
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -1,11 +1,5 @@
 module.exports = {
-	extends: [
-		'@nextcloud',
-		'@vue/eslint-config-typescript/recommended',
-		'plugin:pinia/recommended',
-		'plugin:prettier/recommended',
-	],
-	parser: 'vue-eslint-parser',
+	extends: ['@nextcloud', 'plugin:prettier/recommended'],
 	rules: {
 		'jsdoc/require-jsdoc': 'off',
 		'vue/first-attribute-linebreak': 'off',
--- a/.gitea/workflows/repod.yml
+++ b/.gitea/workflows/repod.yml
@ -14,7 +14,7 @@ jobs:

  php:
    runs-on: ubuntu-latest
-    container: nextcloud:30
+    container: nextcloud:29
    steps:
      - run: apt-get update
      - run: apt-get install -y git nodejs
@ -30,9 +30,15 @@ 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: "^20"
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+      - run: npm i -g npm@${{ steps.versions.outputs.npmVersion }}
      - run: npm ci
      - run: npm run lint
      - run: npm run stylelint
@ -41,21 +47,27 @@ jobs:
  release:
    if: gitea.ref_type == 'tag'
    runs-on: ubuntu-latest
-    container: nextcloud:30
+    container: nextcloud:29
    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: "^20"
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+      - run: npm i -g npm@${{ steps.versions.outputs.npmVersion }}
      - run: make dist
      - uses: akkuman/gitea-release-action@v1
        with:
          files: |
-            build/artifacts/${{ gitea.event.repository.name }}.tar.gz
+            build/artifacts/repod.tar.gz
      - uses: FKLC/sign-files-action@v1.0.0
        with:
          privateKey: ${{ secrets.PRIVATEKEY }}
@ -63,13 +75,13 @@ jobs:
          extension: .sig
          outputFolder: build/artifacts
          files: |
-            build/artifacts/${{ gitea.event.repository.name }}.tar.gz
+            build/artifacts/repod.tar.gz
      - id: sign
-        run: echo "SIGNATURE=$(cat build/artifacts/${{ gitea.event.repository.name }}.tar.gz.sig | openssl base64 -A)" >> $GITHUB_OUTPUT
+        run: echo "SIGNATURE=$(cat build/artifacts/repod.tar.gz.sig | openssl base64 -A)" >> $GITHUB_OUTPUT
      - uses: actionsflow/axios@v1
        with:
          url: https://apps.nextcloud.com/api/v1/apps/releases
          method: POST
          accept: 200,201
          headers: '{ "Authorization": "Token <<<${{ secrets.TOKEN }}>>>" }'
-          data: '{ "download": "https://git.crystalyx.net/${{ gitea.repository }}/releases/download/<<<${{ gitea.ref_name }}>>>/${{ gitea.event.repository.name }}.tar.gz", "signature": "<<<${{ steps.sign.outputs.SIGNATURE }}>>>" }'
+          data: '{ "download": "https://git.crystalyx.net/Xefir/repod/releases/download/<<<${{ gitea.ref_name }}>>>/repod.tar.gz", "signature": "<<<${{ steps.sign.outputs.SIGNATURE }}>>>" }'
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,5 @@

 /node_modules/
 /js/
-/css/

 /build/
--- a/.l10nignore
+++ b/.l10nignore
@ -9,6 +9,5 @@ tests/.phpunit.cache

 node_modules/
 js/
-css/

 build/
--- a/.php-cs-fixer.dist.php
+++ b/.php-cs-fixer.dist.php
@ -13,7 +13,9 @@ class MyConfig extends Config
 		$rules = parent::getRules();
 		$rules['@PhpCsFixer'] = true;
 		$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;
 	}
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,108 +1,4 @@
-## 3.4.1 - Skip & Chill - 2024-11-12
-
-### Changed
- 💄 Make a little gap between player's controls
-
-### Fixed
- 📝 Descriptions are now well formatted
- ⏩ Chapters supported !
-> Click on a timestamp in descriptions to skip to the specified part of the podcast
-
-## 3.4.0 - Good Night - 2024-11-09
-
-### Added
- ♿ Improve accessibility by adding titles when missing
- ✨ Playback speed and volume setting doesn't stick
-[#185](https://git.crystalyx.net/Xefir/repod/issues/185) reported by @SteveDinn
- ✨ Skip back or forward
-[#159](https://git.crystalyx.net/Xefir/repod/issues/159) reported by @moonlike8812
- ✨ Sleep timer
-[#119](https://git.crystalyx.net/Xefir/repod/issues/119) reported by @Markusphi and @OiledAmoeba
-
-### Changed
- 💄 Add padding around favorites on mobile
-
-### Fixed
- 🔒 Increase security when Nextcloud is in debug mode
-
-## 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
-Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
-
-### Changed
- 🎉 Migrate to Vue 3
- 🔖 Support Nextcloud 30
- 🏗️ Switch from Vuex to Pinia
-
-### Fixed
- 💄 Use iTunes image first for episode if available
- 💄 Displaying styles and proper HTML on episode's modal descriptions
-
-### Removed
- 🗑️ Temporary replacing @nextcloud/dialogs to toastyjs
-
-## 2.3.3 - The Cake is a Lie - 2024-06-14
+## 2.3.3 - 2024-06-14

 ### Changed
 - ⬆️ Update @nextcloud/dialogs to 5.3.2
@ -111,18 +7,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 - Young Youth - 2024-05-31
+## 2.3.2 - 2024-05-31

 ### Fixed
 - 🐛 New subscribe button on search not disapearing if subscribed
 - ♿ Missing accessibility label on this button as well

-## 2.3.1 - Powerwash the Universe - 2024-05-29
+## 2.3.1 - 2024-05-29

 ### Changed
 - ⚡ Reduce app size by not shipping sourcemap

-## 2.3.0 - Star Align - 2024-05-29
+## 2.3.0 - 2024-05-29

 ### Added
 - ➕ Ability to subscribe to podcast from search list
@ -139,12 +35,12 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 - ⚰️ Drop support for PHP 8.0
 - 🌐 Removed babel

-## 2.2.1 - Shami was here - 2024-05-18
+## 2.2.1 - 2024-05-18

 ### Removed
 - ♻️ Rollback: Hide unreadable episodes because of insecure sources

-## 2.2.0 - Moving in and out - 2024-05-18
+## 2.2.0 - 2024-05-18

 ### Added
 - 🚨 Linting the code with ESLint
@ -156,7 +52,7 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - 🔓 Hide unreadable episodes because of insecure sources

-## 2.1.0 - Pocket Gundams - 2024-03-16
+## 2.1.0 - 2024-03-16

 ### Added
 - 🔍 Add CTA for rating the app on the store
@ -170,7 +66,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 - Taking Actions - 2024-03-05
+## 2.0.0 - 2024-03-05

 ### Added
 - 🍪 Saving filters preference
@ -187,13 +83,13 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Fixed
 - ❤️‍🔥 Better handling ended episodes

-## 1.5.9 - Just According to Keikaku - 2024-02-21
+## 1.5.9 - 2024-02-21

 ### Changed
 - 🧑‍💻 Change some endpoints to match gPodder.net "specifications"
 - ⬆️ Update @nextcloud/vue to 8.7.0

-## 1.5.8 - Goblet of Eonothem - 2024-02-11
+## 1.5.8 - 2024-02-11

 ### Fixed
 - Fyyd API sometime send empty feeds, ignoring them
@ -211,19 +107,19 @@ Thanks to @OiledAmoeba [#120](https://git.crystalyx.net/Xefir/repod/issues/120)
 ### Changed
 - Update @nextcloud/vue to v8.6.2

-## 1.5.5 - Hide and seek - 2024-02-04
+## 1.5.5 - 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 - In search of the truth - 2024-02-03
+## 1.5.4 - 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 - The date where it all ends - 2024-02-01
+## 1.5.3 - 2024-02-01

 ### Changed
 - Update @nextcloud/vue to v8.6.1
@ -231,7 +127,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 - A little to the top - 2024-02-01
+## 1.5.2 - 2024-02-01

 ### Changed
 - Update @nextcloud/router to v3.0.0
@ -239,7 +135,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 - Play on the PlayHead - 2024-01-30
+## 1.5.1 - 2024-01-30

 ### Changed
 - Update @nextcloud/vue to v8.6.0
@ -249,7 +145,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 - Featuring the filtering - 2024-01-30
+## 1.5.0 - 2024-01-30

 ### Added
 - Filtering options for each podcast section
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -0,0 +1,9 @@
+In the Nextcloud community, participants from all over the world come together to create Free Software for a free internet. This is made possible by the support, hard work and enthusiasm of thousands of people, including those who create and use Nextcloud software.
+
+Our code of conduct offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere, and to explain how together we can strengthen and support each other.
+
+The Code of Conduct is shared by all contributors and users who engage with the Nextcloud team and its community services. It presents a summary of the shared values and “common sense” thinking in our community.
+
+You can find our full code of conduct on our website: https://nextcloud.com/code-of-conduct/
+
+Please, keep our CoC in mind when you contribute! That way, everyone can be a part of our community in a productive, positive, creative and fun way.
--- a/12
+++ b/12
@ -1,10 +1,10 @@
-FROM nextcloud:30
+FROM nextcloud:29

-ENV NEXTCLOUD_UPDATE=1
-ENV NEXTCLOUD_ADMIN_USER=repod
-ENV NEXTCLOUD_ADMIN_PASSWORD=repod
-ENV NEXTCLOUD_INIT_HTACCESS=1
-ENV SQLITE_DATABASE=repod
+ENV NEXTCLOUD_UPDATE 1
+ENV NEXTCLOUD_ADMIN_USER repod
+ENV NEXTCLOUD_ADMIN_PASSWORD repod
+ENV NEXTCLOUD_INIT_HTACCESS 1
+ENV SQLITE_DATABASE repod

 RUN apt-get update && \
    apt-get install -y nodejs npm sqlite3 && \
--- a/132
+++ b/132
@ -1,4 +1,39 @@
 # https://github.com/nextcloud/appstore/blob/fixed-templates/nextcloudappstore/scaffolding/app-templates/26/app/Makefile
+# Generic Makefile for building and packaging a Nextcloud app which uses npm and
+# Composer.
+#
+# Dependencies:
+# * make
+# * which
+# * curl: used if phpunit and composer are not installed to fetch them from the web
+# * tar: for building the archive
+# * npm: for building and testing everything JS
+#
+# If no composer.json is in the app root directory, the Composer step
+# will be skipped. The same goes for the package.json which can be located in
+# the app root or the js/ directory.
+#
+# The npm command by launches the npm build script:
+#
+#    npm run build
+#
+# The npm test command launches the npm test script:
+#
+#    npm run test
+#
+# The idea behind this is to be completely testing and build tool agnostic. All
+# build tools and additional package managers should be installed locally in
+# your project, since this won't pollute people's global namespace.
+#
+# The following npm scripts in your package.json install and update the bower
+# and npm dependencies and use gulp as build system (notice how everything is
+# run from the node_modules folder):
+#
+#    "scripts": {
+#        "test": "node node_modules/gulp-cli/bin/gulp.js karma",
+#        "prebuild": "npm install && node_modules/bower/bin/bower install && node_modules/bower/bin/bower update",
+#        "build": "node node_modules/gulp-cli/bin/gulp.js"
+#    },

 app_name=$(notdir $(CURDIR))
 build_tools_directory=$(CURDIR)/build/tools
@ -68,14 +103,14 @@ dist: build
 source:
 	rm -rf $(source_build_directory)
 	mkdir -p $(source_build_directory)
-	tar -C .. -cvzf $(source_package_name).tar.gz \
+	tar cvzf $(source_package_name).tar.gz \
 	--exclude-vcs \
-	--exclude="$(app_name)/build" \
-	--exclude="$(app_name)/js/node_modules" \
-	--exclude="$(app_name)/node_modules" \
-	--exclude="$(app_name)/*.log" \
-	--exclude="$(app_name)/js/*.log" \
-	$(app_name)
+	--exclude="../$(app_name)/build" \
+	--exclude="../$(app_name)/js/node_modules" \
+	--exclude="../$(app_name)/node_modules" \
+	--exclude="../$(app_name)/*.log" \
+	--exclude="../$(app_name)/js/*.log" \
+	../$(app_name)

 # Builds the source package for the app store, ignores php tests, js tests
 # and build related folders that are unnecessary for an appstore release
@ -83,52 +118,51 @@ source:
 appstore:
 	rm -rf $(appstore_build_directory)
 	mkdir -p $(appstore_build_directory)
-	tar -C .. -cvzf $(appstore_package_name).tar.gz \
-	--exclude="$(app_name)/build" \
-	--exclude="$(app_name)/tests" \
-	--exclude="$(app_name)/Makefile" \
-	--exclude="$(app_name)/*.log" \
-	--exclude="$(app_name)/phpunit*xml" \
-	--exclude="$(app_name)/composer.*" \
-	--exclude="$(app_name)/node_modules" \
-	--exclude="$(app_name)/js/node_modules" \
-	--exclude="$(app_name)/js/tests" \
-	--exclude="$(app_name)/js/test" \
-	--exclude="$(app_name)/js/*.log" \
-	--exclude="$(app_name)/js/package.json" \
-	--exclude="$(app_name)/js/bower.json" \
-	--exclude="$(app_name)/js/karma.*" \
-	--exclude="$(app_name)/js/protractor.*" \
-	--exclude="$(app_name)/package.json" \
-	--exclude="$(app_name)/bower.json" \
-	--exclude="$(app_name)/karma.*" \
-	--exclude="$(app_name)/protractor\.*" \
-	--exclude="$(app_name)/.*" \
-	--exclude="$(app_name)/js/.*" \
-	--exclude="$(app_name)/tsconfig.json" \
-	--exclude="$(app_name)/stylelint.config.cjs" \
-	--exclude="$(app_name)/README.md" \
-	--exclude="$(app_name)/package-lock.json" \
-	--exclude="$(app_name)/LICENSE" \
-	--exclude="$(app_name)/src" \
-	--exclude="$(app_name)/stubs" \
-	--exclude="$(app_name)/screens" \
-	--exclude="$(app_name)/vendor" \
-	--exclude="$(app_name)/translationfiles" \
-	--exclude="$(app_name)/Dockerfile" \
-	--exclude="$(app_name)/psalm.xml" \
-	--exclude="$(app_name)/renovate.json" \
-	--exclude="$(app_name)/vite.config.ts" \
-	$(app_name)
+	tar cvzf $(appstore_package_name).tar.gz \
+	--exclude="../$(app_name)/build" \
+	--exclude="../$(app_name)/tests" \
+	--exclude="../$(app_name)/Makefile" \
+	--exclude="../$(app_name)/*.log" \
+	--exclude="../$(app_name)/phpunit*xml" \
+	--exclude="../$(app_name)/composer.*" \
+	--exclude="../$(app_name)/node_modules" \
+	--exclude="../$(app_name)/js/node_modules" \
+	--exclude="../$(app_name)/js/tests" \
+	--exclude="../$(app_name)/js/test" \
+	--exclude="../$(app_name)/js/*.log" \
+	--exclude="../$(app_name)/js/package.json" \
+	--exclude="../$(app_name)/js/bower.json" \
+	--exclude="../$(app_name)/js/karma.*" \
+	--exclude="../$(app_name)/js/protractor.*" \
+	--exclude="../$(app_name)/package.json" \
+	--exclude="../$(app_name)/bower.json" \
+	--exclude="../$(app_name)/karma.*" \
+	--exclude="../$(app_name)/protractor\.*" \
+	--exclude="../$(app_name)/.*" \
+	--exclude="../$(app_name)/js/.*" \
+	--exclude="../$(app_name)/webpack.js" \
+	--exclude="../$(app_name)/stylelint.config.js" \
+	--exclude="../$(app_name)/README.md" \
+	--exclude="../$(app_name)/package-lock.json" \
+	--exclude="../$(app_name)/LICENSE" \
+	--exclude="../$(app_name)/src" \
+	--exclude="../$(app_name)/stubs" \
+	--exclude="../$(app_name)/screens" \
+	--exclude="../$(app_name)/vendor" \
+	--exclude="../$(app_name)/translationfiles" \
+	--exclude="../$(app_name)/Dockerfile" \
+	--exclude="../$(app_name)/psalm.xml" \
+	--exclude="../$(app_name)/renovate.json" \
+	../$(app_name)

 # Start a nextcloud server on Docker to kickstart developement
 .PHONY: dev
 dev: build
-	docker stop $(app_name) || true
-	docker rm $(app_name) || true
-	docker build -t $(app_name) .
-	docker run -itd --rm --name $(app_name) -v $(CURDIR):/var/www/html/apps/$(app_name) -p 80:80 $(app_name)
-	npm run watch || docker stop $(app_name)
+	docker stop repod || true
+	docker rm repod || true
+	docker build -t repod .
+	docker run -itd --rm --name repod -v $(CURDIR):/var/www/html/apps/repod -p 80:80 repod
+	npm run watch

 # Generate translations
 .PHONY: l10n
--- a/README.md
+++ b/README.md
@ -6,12 +6,13 @@ You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) inst

 ## Features

- 🔍 Browse and subscribe huge collection of podcasts
- 🔊 Listen to episodes directly in Nextcloud
- 📋 Keep track of subscribed shows and episodes
- 🌐 Sync them with GPodderSync compatible clients
- 📱 Mobile friendly interface
- 📡 Import and export your subscriptions
+- Browse podcasts and play them directly in Nextcloud
+- Keep track of subscribed shows and episodes
+- Sync them with GPodderSync compatible clients
+- Import and export subscriptions
+- Mobile friendly interface
+- Unified search integration
+- Interface in multiple languages

 ## Comparaison with similar apps for Nextcloud

@ -19,32 +20,30 @@ You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) inst
 | --- | --- | --- | --- | --- |
 | Actively maintened | ✅ | ✅ | ✅ | ❌ |
 | Play your local music files | ❌ | ❌ | ✅ | ❌ |
-| Sync with [GPodder clients](#clients-supporting-sync-of-gpoddersync) | ✅ | ✅ | [⭕](https://github.com/owncloud/music/issues/975) | [⭕](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/103) |
+| Sync with [GPodder clients](#clients-supporting-sync-of-gpoddersync) | ✅ | ✅ | ❌ | ❌ |
 | Add and manage subscriptions | ✅ | ❌ | ✅ | ✅ |
 | Listen synced episodes by another clients | ✅ | ✅ | ❌ | ❌ |
-| Fetch and listen new epidodes | ✅ | [⭕](https://github.com/pbek/nextcloud-nextpod/issues/5) | ✅ | ✅ |
-| Keep track of listened episodes | ✅ | ✅ | [⭕](https://github.com/owncloud/music/issues/1148) | ✅ |
-| Download epidodes | ✅ | ✅ | ❌ | ✅ |
-| Sleep timer | ✅ | ❌ | [⭕](https://github.com/owncloud/music/issues/884#issuecomment-921582302) | ❌ |
-| Advanced player controls | ✅ | ❌ | ✅ | ✅ |
-| Import and export subscriptions | ✅ | ❌ | [⭕](https://github.com/owncloud/music/issues/904) | [⭕](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/185) |
+| Fetch and listen new epidodes | ✅ | ❌ | ✅ | ✅ |
+| Keep track of listened episodes | ✅ | ✅ | ❌ | ✅ |
+| Import and export subscriptions | ✅ | ❌ | ❌ | ❌ |
 | Search and discover new podcasts | ✅ | ❌ | ❌ | ✅ |
-| Open episode website and RSS feed | ✅ | ✅ | ❌ | ✅ |
 | Integrate with Nextcloud search engine | ✅ | ❌ | ❌ | ✅ |
-| Integrate with [Nextcloud Notes](https://apps.nextcloud.com/apps/notes) | ❌ | ✅ | ❌ | ❌ |
 | Mobile friendly interface | ✅ | ❌ | ✅ | ✅ |
-| Support chapters | ✅ | ❌ | ❌ | ✅ |
-| Available in multiple languages | [✅](https://translate.crystalyx.net/projects/repod/gitea/) (en/fr/de) | ❌ | [✅](https://github.com/owncloud/music/issues/671#issuecomment-782746463) | [✅](https://www.transifex.com/project-insanityorg/podcast-1/dashboard/) (en/de) |
-
-> Click on ⭕ to open the ticket
+| Support chapters | ❌ | ❌ | ❌ | ✅ |

 ## Screenshots

-<img src="./screens/index.png" width="230" title="Homepage" />
-<img src="./screens/discover.png" width="230" title="Discover" />
-<img src="./screens/search.png" width="230" title="Search" />
-<img src="./screens/episodes.png" width="230" title="Episode list" />
-<img src="./screens/modal.png" width="230" title="Episode description" />
+### Homepage
+![homepage](./screens/index.png)
+
+### Search
+![search](./screens/search.png)
+
+### Episode list
+![episodes](./screens/episodes.png)
+
+### Episode description
+![modal](./screens/modal.png)

 ## Clients supporting sync of GPodderSync

@ -53,24 +52,11 @@ 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))
-
-## Translations
-
-You can contribute to translate the app in your language and you don't need to have any development background to do so !
-
-Please join the effort at our **[Weblate](https://translate.crystalyx.net/projects/repod/gitea/)** project.
-
-Thank you so much if you decide to participate ❤️
-
 ## Credits

 - [GPodder Sync](https://github.com/thrillfall/nextcloud-gpodder) for the database API
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@ -7,14 +7,11 @@
    <description><![CDATA[## Features
 - 🔍 Browse and subscribe huge collection of podcasts
 - 🔊 Listen to episodes directly in Nextcloud
- 🌐 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)
+- 🌐 Sync your activity with [AntennaPod](https://antennapod.org/)

 ## Requirements
 You need to have [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installed to use this app!]]></description>
-    <version>3.4.1</version>
+    <version>2.3.3</version>
    <licence>agpl</licence>
    <author mail="xefir@crystalyx.net" homepage="https://crystalyx.net">Michel Roux</author>
    <namespace>RePod</namespace>
@ -23,21 +20,17 @@ 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="29" max-version="30"/>
+        <nextcloud min-version="27" max-version="29"/>
    </dependencies>
    <navigations>
        <navigation>
-            <id>repod</id>
            <name>Podcast</name>
            <route>repod.page.index</route>
-            <icon>app.svg</icon>
-            <type>link</type>
        </navigation>
    </navigations>
 </info>
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@ -0,0 +1,25 @@
+<?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'],
+	],
+];
--- a/composer.json
+++ b/composer.json
@ -12,19 +12,13 @@
 		"lint": "find . -name \\*.php -not -path './vendor/*' -not -path './vendor-bin/*' -not -path './build/*' -print0 | xargs -0 -n1 php -l",
 		"cs:check": "php-cs-fixer fix --dry-run --diff",
 		"cs:fix": "php-cs-fixer fix",
-		"psalm": "psalm --threads=1 --no-cache --show-info=true",
-		"rector": "rector && composer cs:fix"
-	},
-	"require": {
-		"php": "^8.1"
+		"psalm": "psalm --threads=1 --no-cache --show-info=true"
 	},
 	"require-dev": {
-		"nextcloud/ocp": "^30.0.2",
+		"nextcloud/ocp": "^29.0.2",
 		"roave/security-advisories": "dev-latest",
-		"nextcloud/coding-standard": "^1.3.2",
-		"nextcloud/rector": "^0.2.1",
-		"rector/rector": "^1.2.10",
-		"vimeo/psalm": "^5.26.1"
+		"nextcloud/coding-standard": "^1.2.1",
+		"vimeo/psalm": "^5.24.0"
 	},
 	"config": {
 		"optimize-autoloader": true,
--- a/composer.lock
+++ b/composer.lock
--- a/l10n/de.js
+++ b/l10n/de.js
@ -1,59 +0,0 @@
-OC.L10N.register(
-    "repod",
-    {
-    "RePod Subscriptions" : "RePod Abonnements",
-    "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/) 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- ➡️ Vollständiger Funktionsvergleich [hier](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
-    "Download" : "Herunterladen",
-    "Skip to {match}" : "Springen zu {match}",
-    "Add a RSS link" : "Einen RSS-Link hinzufügen",
-    "Subscribe" : "Abonnieren",
-    "Error while adding the feed" : "Fehler beim Hinzufügen des Feeds",
-    "Could not fetch search results" : "Suchergebnisse können nicht geladen werden",
-    "New podcasts" : "Neue Podcasts",
-    "Hot podcasts" : "Beliebte Podcasts",
-    "Could not fetch tops" : "Titel können nicht abgerufen werden",
-    "Copy feed" : "Feed kopieren",
-    "Link copied to the clipboard" : "Der Link des Feeds wurde in die Zwischenablage kopiert",
-    "Play" : "Abspielen",
-    "Stop" : "Stopp",
-    "Read" : "Gelesen",
-    "Open website" : "Webseite aufrufen",
-    "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",
-    "Listened" : "Gehört",
-    "Listening" : "Läuft",
-    "Unlistened" : "Nicht angehört",
-    "Import subscriptions" : "Importiere Abonnements",
-    "Import OPML file" : "Importiere OPML-Datei",
-    "Rate RePod ❤️" : "Bewerte RePod ❤️",
-    "Sleep timer" : "Einschlaftimer",
-    "Minutes" : "Minuten",
-    "_%n min_::_%n mins_" : ["%n min","%n mins"],
-    "_%n sec_::_%n secs_" : ["%s sec","%n secs"],
-    "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",
-    "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"
-},
-"nplurals=2; plural=n != 1;");
--- a/l10n/de.json
+++ b/l10n/de.json
@ -1,57 +0,0 @@
-{ "translations": {
-    "RePod Subscriptions" : "RePod Abonnements",
-    "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/) 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- ➡️ Vollständiger Funktionsvergleich [hier](https://git.crystalyx.net/Xefir/repod#comparaison-with-similar-apps-for-nextcloud)\n\n## Voraussetzungen\nDu musst [GPodderSync](https://apps.nextcloud.com/apps/gpoddersync) installiert haben, um diese App zu benutzen!",
-    "Download" : "Herunterladen",
-    "Skip to {match}" : "Springen zu {match}",
-    "Add a RSS link" : "Einen RSS-Link hinzufügen",
-    "Subscribe" : "Abonnieren",
-    "Error while adding the feed" : "Fehler beim Hinzufügen des Feeds",
-    "Could not fetch search results" : "Suchergebnisse können nicht geladen werden",
-    "New podcasts" : "Neue Podcasts",
-    "Hot podcasts" : "Beliebte Podcasts",
-    "Could not fetch tops" : "Titel können nicht abgerufen werden",
-    "Copy feed" : "Feed kopieren",
-    "Link copied to the clipboard" : "Der Link des Feeds wurde in die Zwischenablage kopiert",
-    "Play" : "Abspielen",
-    "Stop" : "Stopp",
-    "Read" : "Gelesen",
-    "Open website" : "Webseite aufrufen",
-    "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",
-    "Listened" : "Gehört",
-    "Listening" : "Läuft",
-    "Unlistened" : "Nicht angehört",
-    "Import subscriptions" : "Importiere Abonnements",
-    "Import OPML file" : "Importiere OPML-Datei",
-    "Rate RePod ❤️" : "Bewerte RePod ❤️",
-    "Sleep timer" : "Einschlaftimer",
-    "Minutes" : "Minuten",
-    "_%n min_::_%n mins_" : ["%n min","%n mins"],
-    "_%n sec_::_%n secs_" : ["%s sec","%n secs"],
-    "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",
-    "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" :"nplurals=2; plural=n != 1;"
-}
--- a/l10n/fr.js
+++ b/l10n/fr.js
@ -5,9 +5,8 @@ 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/) 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 !",
+    "## 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 !",
    "Download" : "Télécharger",
-    "Skip to {match}" : "Sauter à {match}",
    "Add a RSS link" : "Ajouter un lien RSS",
    "Subscribe" : "S'abonner",
    "Error while adding the feed" : "Erreur lors de l'ajout du flux",
@ -16,18 +15,13 @@ OC.L10N.register(
    "Hot podcasts" : "Tendances",
    "Could not fetch tops" : "Impossible de récupérer les tops",
    "Copy feed" : "Copier le flux",
-    "Link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers",
    "Play" : "Lecture",
    "Stop" : "Arrêter",
-    "Read" : "Lu",
+    "Mark as read" : "Marquer comme lu",
+    "Mark as unread" : "Marquer comme non lu",
    "Open website" : "Ouvrir le site web",
-    "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",
+    "Could not change the status of the episode" : "Impossible de changer le status de l'épisode",
    "Export subscriptions" : "Exporter les abonnements",
    "Filtering episodes" : "Filtrage des épisodes",
    "Show all" : "Montrer tout",
@ -37,23 +31,15 @@ OC.L10N.register(
    "Import subscriptions" : "Importer les abonnements",
    "Import OPML file" : "Importer un fichier OPML",
    "Rate RePod ❤️" : "Donnez votre avis ❤️",
-    "Sleep timer" : "Minuteur",
-    "Minutes" : "Minutes",
-    "_%n min_::_%n mins_" : ["%n min","%n mins"],
-    "_%n sec_::_%n secs_" : ["%s sec","%n secs"],
    "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",
-    "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"
+    "Feed's link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers"
 },
 "");
--- a/l10n/fr.json
+++ b/l10n/fr.json
@ -3,9 +3,8 @@
    "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/) 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 !",
+    "## 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 !",
    "Download" : "Télécharger",
-    "Skip to {match}" : "Sauter à {match}",
    "Add a RSS link" : "Ajouter un lien RSS",
    "Subscribe" : "S'abonner",
    "Error while adding the feed" : "Erreur lors de l'ajout du flux",
@ -14,18 +13,13 @@
    "Hot podcasts" : "Tendances",
    "Could not fetch tops" : "Impossible de récupérer les tops",
    "Copy feed" : "Copier le flux",
-    "Link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers",
    "Play" : "Lecture",
    "Stop" : "Arrêter",
-    "Read" : "Lu",
+    "Mark as read" : "Marquer comme lu",
+    "Mark as unread" : "Marquer comme non lu",
    "Open website" : "Ouvrir le site web",
-    "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",
+    "Could not change the status of the episode" : "Impossible de changer le status de l'épisode",
    "Export subscriptions" : "Exporter les abonnements",
    "Filtering episodes" : "Filtrage des épisodes",
    "Show all" : "Montrer tout",
@ -35,23 +29,15 @@
    "Import subscriptions" : "Importer les abonnements",
    "Import OPML file" : "Importer un fichier OPML",
    "Rate RePod ❤️" : "Donnez votre avis ❤️",
-    "Sleep timer" : "Minuteur",
-    "Minutes" : "Minutes",
-    "_%n min_::_%n mins_" : ["%n min","%n mins"],
-    "_%n sec_::_%n secs_" : ["%s sec","%n secs"],
    "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",
-    "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"
+    "Feed's link copied to the clipboard" : "Lien vers le flux copié dans le presse-papiers"
 },"pluralForm" :""
 }
--- a/lib/AppInfo/Application.php
+++ b/lib/AppInfo/Application.php
@ -16,7 +16,6 @@ use OCP\AppFramework\Services\IInitialState;
 class Application extends App implements IBootstrap
 {
 	public const APP_ID = 'repod';
-
 	private const GPODDERSYNC_ID = 'gpoddersync';

 	public function __construct() {
@ -33,15 +32,11 @@ 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 {
 				$appManager->enableApp(self::GPODDERSYNC_ID);
-			} catch (AppPathNotFoundException) {
+			} catch (AppPathNotFoundException $e) {
 			}
 		}

--- a/lib/Controller/EpisodesController.php
+++ b/lib/Controller/EpisodesController.php
@ -11,9 +11,6 @@ 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;
@ -22,30 +19,32 @@ class EpisodesController extends Controller
 {
 	public function __construct(
 		IRequest $request,
-		private readonly EpisodeActionReader $episodeActionReader,
-		private readonly EpisodeActionRepository $episodeActionRepository,
-		private readonly IClientService $clientService,
-		private readonly UserService $userService
+		private EpisodeActionReader $episodeActionReader,
+		private EpisodeActionRepository $episodeActionRepository,
+		private IClientService $clientService,
+		private UserService $userService
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/episodes/list')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function list(string $url): JSONResponse {
 		$client = $this->clientService->newClient();
 		$feed = $client->get($url);
 		$episodes = $this->episodeActionReader->parseRssXml((string) $feed->getBody());
-		usort($episodes, fn (EpisodeActionExtraData $a, EpisodeActionExtraData $b): int => $b->getPubDate() <=> $a->getPubDate());
-		$episodes = array_values(array_intersect_key($episodes, array_unique(array_map(fn (EpisodeActionExtraData $episode): string => $episode->getGuid(), $episodes))));
+		usort($episodes, fn (EpisodeActionExtraData $a, EpisodeActionExtraData $b) => $b->getPubDate() <=> $a->getPubDate());
+		$episodes = array_values(array_intersect_key($episodes, array_unique(array_map(fn (EpisodeActionExtraData $episode) => $episode->getGuid(), $episodes))));

 		return new JSONResponse($episodes, $feed->getStatusCode());
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/episodes/action')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function action(string $url): JSONResponse {
 		$action = $this->episodeActionRepository->findByEpisodeUrl($url, $this->userService->getUserUID());

--- a/lib/Controller/OpmlController.php
+++ b/lib/Controller/OpmlController.php
@ -10,9 +10,6 @@ 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;
@ -22,18 +19,19 @@ class OpmlController extends Controller
 {
 	public function __construct(
 		IRequest $request,
-		private readonly IL10N $l10n,
-		private readonly PodcastDataReader $podcastDataReader,
-		private readonly PodcastMetricsReader $podcastMetricsReader,
-		private readonly SubscriptionChangeSaver $subscriptionChangeSaver,
-		private readonly UserService $userService
+		private IL10N $l10n,
+		private PodcastDataReader $podcastDataReader,
+		private PodcastMetricsReader $podcastMetricsReader,
+		private SubscriptionChangeSaver $subscriptionChangeSaver,
+		private UserService $userService
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/opml/export')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	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');
@ -55,7 +53,7 @@ class OpmlController extends Controller
 			foreach ($subscriptions as $subscription) {
 				try {
 					$podcast = $this->podcastDataReader->getCachedOrFetchPodcastData($subscription->getUrl(), $this->userService->getUserUID());
-				} catch (\Exception) {
+				} catch (\Exception $e) {
 					continue;
 				}

@ -84,9 +82,10 @@ class OpmlController extends Controller
 		return new DataDownloadResponse((string) $xml->asXML(), 'repod-'.$dateCreated->getTimestamp().'.opml', ' application/xml');
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'POST', url: '/opml/import')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function import(): Response {
 		$file = $this->request->getUploadedFile('import');

--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@ -6,28 +6,18 @@ 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\IRequest;
 use OCP\Util;

 class PageController extends Controller
 {
-	public function __construct(
-		IRequest $request
-	) {
-		parent::__construct(Application::APP_ID, $request);
-	}
-
-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function index(): TemplateResponse {
-		Util::addScript(Application::APP_ID, Application::APP_ID.'-main');
-		Util::addStyle(Application::APP_ID, Application::APP_ID.'-main');
+		Util::addScript(Application::APP_ID, 'main');

 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedImageDomain('*');
@ -38,18 +28,4 @@ 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();
-	}
 }
--- a/lib/Controller/PodcastController.php
+++ b/lib/Controller/PodcastController.php
@ -8,9 +8,6 @@ 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;
@ -20,23 +17,24 @@ class PodcastController extends Controller
 {
 	public function __construct(
 		IRequest $request,
-		private readonly ICacheFactory $cacheFactory,
-		private readonly IClientService $clientService,
-		private readonly PodcastDataReader $podcastDataReader
+		private ICacheFactory $cacheFactory,
+		private IClientService $clientService,
+		private PodcastDataReader $podcastDataReader
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/podcast')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function index(string $url): JSONResponse {
 		$podcast = null;

 		if ($this->cacheFactory->isLocalCacheAvailable()) {
 			try {
 				$podcast = $this->podcastDataReader->tryGetCachedPodcastData($url);
-			} catch (\Exception) {
+			} catch (\Exception $e) {
 			}
 		}

@ -51,7 +49,7 @@ class PodcastController extends Controller
 		if ($this->cacheFactory->isLocalCacheAvailable()) {
 			try {
 				$this->podcastDataReader->trySetCachedPodcastData($url, $podcast);
-			} catch (\Exception) {
+			} catch (\Exception $e) {
 			}
 		}

--- a/lib/Controller/SearchController.php
+++ b/lib/Controller/SearchController.php
@ -7,9 +7,6 @@ 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;

@ -17,14 +14,15 @@ class SearchController extends Controller
 {
 	public function __construct(
 		IRequest $request,
-		private readonly MultiPodService $multiPodService
+		private MultiPodService $multiPodService
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/search')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function index(string $q): JSONResponse {
 		return new JSONResponse($this->multiPodService->search($q));
 	}
--- a/lib/Controller/ToplistController.php
+++ b/lib/Controller/ToplistController.php
@ -7,9 +7,6 @@ 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;

@ -17,21 +14,23 @@ class ToplistController extends Controller
 {
 	public function __construct(
 		IRequest $request,
-		private readonly FyydService $fyydService
+		private FyydService $fyydService
 	) {
 		parent::__construct(Application::APP_ID, $request);
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/toplist/hot')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function hot(): JSONResponse {
 		return new JSONResponse($this->fyydService->hot());
 	}

-	#[NoAdminRequired]
-	#[NoCSRFRequired]
-	#[FrontpageRoute(verb: 'GET', url: '/toplist/new')]
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
 	public function new(): JSONResponse {
 		return new JSONResponse($this->fyydService->latest());
 	}
--- a/lib/Core/EpisodeAction/EpisodeActionExtraData.php
+++ b/lib/Core/EpisodeAction/EpisodeActionExtraData.php
@ -28,22 +28,22 @@ use OCA\GPodderSync\Core\EpisodeAction\EpisodeAction;
 *  action: ?EpisodeActionType
 * }
 */
-class EpisodeActionExtraData implements \JsonSerializable, \Stringable
+class EpisodeActionExtraData implements \JsonSerializable
 {
 	public function __construct(
-		private readonly string $title,
-		private readonly ?string $url,
-		private readonly string $name,
-		private readonly ?string $link,
-		private readonly ?string $image,
-		private readonly ?string $description,
-		private readonly int $fetchedAtUnix,
-		private readonly string $guid,
-		private readonly ?string $type,
-		private readonly ?int $size,
-		private readonly ?\DateTime $pubDate,
-		private readonly ?string $duration,
-		private readonly ?EpisodeAction $action
+		private string $title,
+		private ?string $url,
+		private string $name,
+		private ?string $link,
+		private ?string $image,
+		private ?string $description,
+		private int $fetchedAtUnix,
+		private string $guid,
+		private ?string $type,
+		private ?int $size,
+		private ?\DateTime $pubDate,
+		private ?string $duration,
+		private ?EpisodeAction $action
 	) {}

 	public function __toString(): string {
@ -120,7 +120,7 @@ class EpisodeActionExtraData implements \JsonSerializable, \Stringable
 			'size' => $this->size,
 			'pubDate' => $this->pubDate,
 			'duration' => $this->duration,
-			'action' => $this->action instanceof EpisodeAction ? $this->action->toArray() : null,
+			'action' => $this->action ? $this->action->toArray() : null,
 		];
 	}

--- a/lib/Core/EpisodeAction/EpisodeActionReader.php
+++ b/lib/Core/EpisodeAction/EpisodeActionReader.php
@ -11,8 +11,8 @@ use OCA\RePod\Service\UserService;
 class EpisodeActionReader extends CoreEpisodeActionReader
 {
 	public function __construct(
-		private readonly EpisodeActionRepository $episodeActionRepository,
-		private readonly UserService $userService
+		private EpisodeActionRepository $episodeActionRepository,
+		private UserService $userService
 	) {}

 	/**
@ -20,8 +20,7 @@ class EpisodeActionReader extends CoreEpisodeActionReader
 	 * Specs : https://github.com/Podcast-Standards-Project/PSP-1-Podcast-RSS-Specification/blob/main/README.md.
 	 *
 	 * @return EpisodeActionExtraData[]
-	 *
-	 * @throws \Exception if the XML data could not be parsed
+	 * @throws \Exception               if the XML data could not be parsed
 	 */
 	public function parseRssXml(string $xmlString, ?int $fetchedAtUnix = null): array {
 		$episodes = [];
@ -56,24 +55,22 @@ class EpisodeActionReader extends CoreEpisodeActionReader
 			$link = $this->stringOrNull($item->link);

 			// Get episode image
-			if (isset($iTunesItemChildren)) {
+			$image = $this->stringOrNull($item->image->url);
+
+			if (!isset($image) && isset($iTunesItemChildren)) {
 				$imageAttributes = $iTunesItemChildren->image->attributes();
 				$image = $this->stringOrNull(isset($imageAttributes) ? (string) $imageAttributes->href : '');
 			}

+			if (!isset($image)) {
+				$image = $this->stringOrNull($channel->image->url);
+			}
+
 			if (!isset($image) && isset($iTunesChannelChildren)) {
 				$imageAttributes = $iTunesChannelChildren->image->attributes();
 				$image = $this->stringOrNull(isset($imageAttributes) ? (string) $imageAttributes->href : '');
 			}

-			if (!isset($image)) {
-				$image = $this->stringOrNull($item->image->url);
-			}
-
-			if (!isset($image)) {
-				$image = $this->stringOrNull($channel->image->url);
-			}
-
 			if (!isset($image)) {
 				preg_match('/<itunes:image\s+href="([^"]+)"/', $xmlString, $matches);
 				if (count($matches) > 1) {
@ -93,6 +90,9 @@ class EpisodeActionReader extends CoreEpisodeActionReader
 				$description = $this->stringOrNull($iTunesItemChildren->summary);
 			}

+			// Remove tags
+			$description = strip_tags(str_replace(['<br>', '<br/>', '<br />'], "\n", $description ?? ''));
+
 			// Get episode duration
 			if (isset($iTunesItemChildren)) {
 				$duration = $this->stringOrNull($iTunesItemChildren->duration);
@ -105,7 +105,7 @@ class EpisodeActionReader extends CoreEpisodeActionReader
 			if (isset($pubDate)) {
 				try {
 					$pubDate = new \DateTime($pubDate);
-				} catch (\Exception) {
+				} catch (\Exception $e) {
 					$pubDate = null;
 				}
 			}
--- a/lib/Service/FyydService.php
+++ b/lib/Service/FyydService.php
@ -13,9 +13,9 @@ class FyydService implements IPodProvider
 	private const BASE_URL = 'https://api.fyyd.de/0.2/';

 	public function __construct(
-		private readonly IClientService $clientService,
-		private readonly LoggerInterface $logger,
-		private readonly UserService $userService
+		private IClientService $clientService,
+		private LoggerInterface $logger,
+		private UserService $userService
 	) {}

 	public function search(string $value): array {
@ -94,8 +94,8 @@ class FyydService implements IPodProvider
 			if (array_key_exists('data', $langJson) && is_array($langJson['data'])) {
 				$language = in_array($userLang, $langJson['data']) ? $userLang : 'en';
 			}
-		} catch (\Exception $exception) {
-			$this->logger->error($exception->getMessage(), $exception->getTrace());
+		} catch (\Exception $e) {
+			$this->logger->error($e->getMessage(), $e->getTrace());
 		}

 		$podcastClient = $this->clientService->newClient();
--- a/lib/Service/ItunesService.php
+++ b/lib/Service/ItunesService.php
@ -12,8 +12,8 @@ class ItunesService implements IPodProvider
 	private const BASE_URL = 'https://itunes.apple.com/';

 	public function __construct(
-		private readonly IClientService $clientService,
-		private readonly UserService $userService
+		private IClientService $clientService,
+		private UserService $userService
 	) {}

 	public function search(string $value): array {
--- a/lib/Service/MultiPodService.php
+++ b/lib/Service/MultiPodService.php
@ -17,7 +17,7 @@ class MultiPodService implements IPodProvider
 	public function __construct(
 		FyydService $fyydService,
 		ItunesService $itunesService,
-		private readonly LoggerInterface $logger
+		private LoggerInterface $logger
 	) {
 		$this->providers = [$fyydService, $itunesService];
 	}
@ -36,7 +36,7 @@ class MultiPodService implements IPodProvider
 			}
 		}

-		usort($podcasts, fn (PodcastData $a, PodcastData $b): int => $b->getFetchedAtUnix() <=> $a->getFetchedAtUnix());
+		usort($podcasts, fn (PodcastData $a, PodcastData $b) => $b->getFetchedAtUnix() <=> $a->getFetchedAtUnix());

 		return array_values(
 			array_intersect_key(
--- a/lib/Service/SearchProvider.php
+++ b/lib/Service/SearchProvider.php
@ -16,9 +16,9 @@ use OCP\Search\SearchResultEntry;
 class SearchProvider implements IProvider
 {
 	public function __construct(
-		private readonly IL10N $l10n,
-		private readonly IURLGenerator $urlGenerator,
-		private readonly MultiPodService $multiPodService
+		private IL10N $l10n,
+		private IURLGenerator $urlGenerator,
+		private MultiPodService $multiPodService
 	) {}

 	public function getId(): string {
@ -30,7 +30,7 @@ class SearchProvider implements IProvider
 	}

 	public function getOrder(string $route, array $routeParameters): int {
-		if (str_starts_with($route, Application::APP_ID.'.')) {
+		if (0 === strpos($route, Application::APP_ID.'.')) {
 			// Active app, prefer my results
 			return -1;
 		}
--- a/lib/Service/UserService.php
+++ b/lib/Service/UserService.php
@ -10,8 +10,8 @@ use OCP\L10N\IFactory;
 class UserService
 {
 	public function __construct(
-		private readonly IFactory $l10n,
-		private readonly IUserSession $userSession
+		private IFactory $l10n,
+		private IUserSession $userSession
 	) {}

 	public function getUserUID(): string {
@ -27,7 +27,7 @@ class UserService
 	public function getCountryCode(): string {
 		$isoCodes = explode('_', $this->getIsoCode());

-		return $isoCodes[1] ?? 'us';
+		return isset($isoCodes[1]) ? $isoCodes[1] : 'us';
 	}

 	public function getLangCode(): string {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,49 +1,38 @@
 {
  "name": "repod",
  "license": "AGPL-3.0-or-later",
-  "type": "module",
  "scripts": {
-    "build": "vite build",
-    "dev": "vite --mode development build",
-    "lint": "vue-tsc && eslint src",
-    "lint:fix": "vue-tsc && eslint src --fix",
-    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
-    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
-    "watch": "vite --mode development build --watch"
+    "build": "NODE_ENV=production webpack --config webpack.js --progress",
+    "dev": "NODE_ENV=development webpack --config webpack.js --progress",
+    "watch": "NODE_ENV=development webpack --config webpack.js --progress --watch",
+    "lint": "eslint src",
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css"
  },
  "browserslist": [
    "extends @nextcloud/browserslist-config"
  ],
  "prettier": "@nextcloud/prettier-config",
  "dependencies": {
-    "@formatjs/intl-segmenter": "^11.7.4",
-    "@nextcloud/axios": "^2.5.1",
+    "@nextcloud/axios": "^2.5.0",
+    "@nextcloud/dialogs": "^5.3.2",
    "@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.2.0",
-    "linkify-html": "^4.1.3",
-    "pinia": "^2.2.6",
-    "toastify-js": "^1.12.0",
-    "vite": "^5.4.11",
-    "vue": "^3.5.13",
-    "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^4.4.5"
+    "@nextcloud/vue": "^8.12.0",
+    "vue": "^2",
+    "vue-material-design-icons": "^5.3.0",
+    "vue-router": "^3",
+    "vuex": "^3"
  },
  "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.6.0",
+    "@nextcloud/webpack-vue-config": "^6.0.1",
    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-pinia": "^0.4.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "typescript": "5.5",
-    "vue-tsc": "^2.1.10"
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-webpack-plugin": "^4.2.0",
+    "stylelint-webpack-plugin": "^5.0.1"
  }
 }
--- a/rector.php
+++ b/rector.php
@ -1,34 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-use Nextcloud\Rector\Set\NextcloudSets;
-use Rector\Config\RectorConfig;
-
-return RectorConfig::configure()
-	->withPaths([
-		__DIR__.'/appinfo',
-		__DIR__.'/lib',
-	])
-	->withPhpSets(php81: true)
-	->withSets([
-		NextcloudSets::NEXTCLOUD_27,
-	])
-	->withPreparedSets(
-		deadCode: true,
-		codeQuality: true,
-		codingStyle: true,
-		typeDeclarations: true,
-		privatization: true,
-		instanceOf: true,
-		earlyReturn: true,
-		strictBooleans: true,
-		rectorPreset: true,
-		phpunitCodeQuality: true,
-		doctrineCodeQuality: true,
-		symfonyCodeQuality: true,
-		symfonyConfigs: true,
-		twig: true,
-		phpunit: true,
-	)
-;
--- a/renovate.json
+++ b/renovate.json
@ -1,4 +1,3 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "rangeStrategy": "bump"
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
 }
--- a/screens/discover.png
+++ b/screens/discover.png
--- a/screens/episodes.png
+++ b/screens/episodes.png
--- a/screens/index.png
+++ b/screens/index.png
--- a/screens/modal.png
+++ b/screens/modal.png
--- a/screens/search.png
+++ b/screens/search.png
--- a/src/App.vue
+++ b/src/App.vue
@ -7,15 +7,13 @@
 	</NcContent>
 </template>

-<script lang="ts">
-import 'toastify-js/src/toastify.css'
-import { mapActions, mapState } from 'pinia'
+<script>
+import '@nextcloud/dialogs/style.css'
 import Bar from './components/Player/Bar.vue'
 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.ts'

 export default {
 	name: 'App',
@ -26,16 +24,9 @@ export default {
 		Subscriptions,
 	},
 	computed: {
-		...mapState(usePlayer, ['paused']),
 		gpodder() {
 			return loadState('repod', 'gpodder', false)
 		},
 	},
-	mounted() {
-		this.init()
-	},
-	methods: {
-		...mapActions(usePlayer, ['init']),
-	},
 }
 </script>
--- a/src/components/Atoms/AppContent.vue
+++ b/src/components/Atoms/AppContent.vue
@ -1,13 +1,11 @@
 <template>
-	<NcAppContent :class="{ episode }">
+	<NcAppContent :class="episode ? 'padding' : ''">
 		<slot />
 	</NcAppContent>
 </template>

-<script lang="ts">
+<script>
 import { NcAppContent } from '@nextcloud/vue'
-import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.ts'

 export default {
 	name: 'AppContent',
@ -15,13 +13,15 @@ export default {
 		NcAppContent,
 	},
 	computed: {
-		...mapState(usePlayer, ['episode']),
+		episode() {
+			return this.$store.state.player.episode
+		},
 	},
 }
 </script>

 <style scoped>
-.episode {
+.padding {
 	padding-bottom: 6rem;
 }
 </style>
--- a/src/components/Atoms/AppNavigation.vue
+++ b/src/components/Atoms/AppNavigation.vue
@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation :class="{ episode }">
+	<NcAppNavigation :class="episode ? 'padding' : ''">
 		<slot />
 		<template #list>
 			<slot name="list" />
@ -10,10 +10,8 @@
 	</NcAppNavigation>
 </template>

-<script lang="ts">
+<script>
 import { NcAppNavigation } from '@nextcloud/vue'
-import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.ts'

 export default {
 	name: 'AppNavigation',
@ -21,13 +19,15 @@ export default {
 		NcAppNavigation,
 	},
 	computed: {
-		...mapState(usePlayer, ['episode']),
+		episode() {
+			return this.$store.state.player.episode
+		},
 	},
 }
 </script>

 <style scoped>
-.episode {
+.padding {
 	padding-bottom: 6rem;
 }
 </style>
--- a/src/components/Atoms/EmptyContent.vue
+++ b/src/components/Atoms/EmptyContent.vue
@ -1,34 +0,0 @@
-<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>
--- a/src/components/Atoms/Loading.vue
+++ b/src/components/Atoms/Loading.vue
@ -2,7 +2,7 @@
 	<NcLoadingIcon class="loading" />
 </template>

-<script lang="ts">
+<script>
 import { NcLoadingIcon } from '@nextcloud/vue'

 export default {
--- a/src/components/Atoms/Modal.vue
+++ b/src/components/Atoms/Modal.vue
@ -1,43 +1,32 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
-	<div class="flex">
-		<NcAvatar
-			:display-name="episode.name"
-			:is-no-user="true"
-			:size="256"
-			:url="episode.image" />
-		<h2>{{ episode.name }}</h2>
-		<SafeHtml :source="episode.description || ''" />
-		<div class="flex">
-			<NcButton v-if="episode.link" :href="episode.link" target="_blank">
+	<div>
+		<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
+		<h2>{{ name }}</h2>
+		<p v-html="strippedDescription" />
+		<div>
+			<NcButton v-if="link" :href="link" target="_blank">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
-				{{ episode.title }}
+				{{ title }}
 			</NcButton>
-			<NcButton
-				v-if="episode.url"
-				:download="filenameFromUrl(episode.url)"
-				:href="episode.url"
-				target="_blank">
+			<NcButton v-if="url" :href="url" target="_blank">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
-				{{ t('repod', 'Download') }}
-				{{ episode.size ? `(${humanFileSize(episode.size)})` : '' }}
+				{{ t('repod', 'Download') }} {{ size ? `(${episodeFileSize})` : '' }}
 			</NcButton>
 		</div>
 	</div>
 </template>

-<script lang="ts">
+<script>
 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.ts'
-import { humanFileSize } from '../../utils/size.ts'
-import { t } from '@nextcloud/l10n'
+import { cleanHtml } from '../../utils/text.js'
+import { humanFileSize } from '../../utils/size.js'

 export default {
 	name: 'Modal',
@ -46,24 +35,50 @@ export default {
 		NcAvatar,
 		NcButton,
 		OpenInNewIcon,
-		SafeHtml,
 	},
 	props: {
-		episode: {
-			type: Object as () => EpisodeInterface,
+		description: {
+			type: String,
+			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,
+	computed: {
+		episodeFileSize() {
+			return humanFileSize(this.size)
+		},
+		strippedDescription() {
+			return cleanHtml(this.description)
+		},
 	},
 }
 </script>

 <style scoped>
-.flex {
+div {
 	align-items: center;
 	display: flex;
 	flex-direction: column;
--- a/src/components/Atoms/SafeHtml.vue
+++ b/src/components/Atoms/SafeHtml.vue
@ -1,78 +0,0 @@
-<template>
-	<div ref="html" v-sanitize="source" class="html" />
-</template>
-
-<script lang="ts">
-import dompurify from 'dompurify'
-import linkifyHtml from 'linkify-html'
-import { mapActions } from 'pinia'
-import { t } from '@nextcloud/l10n'
-import { timeToSeconds } from '../../utils/time.ts'
-import { usePlayer } from '../../store/player.ts'
-
-export default {
-	name: 'SafeHtml',
-	directives: {
-		sanitize: {
-			mounted(el, binding) {
-				el.innerHTML = dompurify
-					.sanitize(
-						linkifyHtml(binding.value, {
-							nl2br: true,
-							target: '_blank',
-						}),
-					)
-					.replace(
-						/(([0-9]?[0-9]):)?([0-5]?[0-9]):([0-5][0-9])/g,
-						(
-							match,
-							noop: string,
-							hours: string,
-							minutes: string,
-							seconds: string,
-						) =>
-							`<seekable time="${timeToSeconds(
-								parseInt(hours),
-								parseInt(minutes),
-								parseInt(seconds),
-							)}" title="${t('repod', 'Skip to {match}', { match })}">${
-								match
-							}</seekable>`,
-					)
-			},
-		},
-	},
-	props: {
-		source: {
-			type: String,
-			required: true,
-		},
-	},
-	mounted() {
-		const seekables = (this.$refs.html as HTMLElement).querySelectorAll(
-			'seekable',
-		)
-		for (const seekable of seekables) {
-			seekable.addEventListener('click', (event) => {
-				this.seek(
-					parseInt(
-						(event.target as HTMLElement).getAttribute('time') || '',
-					),
-				)
-				this.play()
-			})
-		}
-	},
-	methods: {
-		...mapActions(usePlayer, ['play', 'seek']),
-	},
-}
-</script>
-
-<style>
-.html a,
-seekable {
-	cursor: pointer;
-	text-decoration: underline;
-}
-</style>
--- a/src/components/Discover/AddRss.vue
+++ b/src/components/Discover/AddRss.vue
@ -1,8 +1,8 @@
 <template>
-	<NcAppNavigationList class="list">
+	<NcAppNavigationList>
 		<NcAppNavigationNewItem
 			:name="t('repod', 'Add a RSS link')"
-			@new-item="(url) => $router.push(toFeedUrl(url))">
+			@new-item="addSubscription">
 			<template #icon>
 				<PlusIcon :size="20" />
 			</template>
@ -10,11 +10,10 @@
 	</NcAppNavigationList>
 </template>

-<script lang="ts">
+<script>
 import { NcAppNavigationList, NcAppNavigationNewItem } from '@nextcloud/vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { t } from '@nextcloud/l10n'
-import { toFeedUrl } from '../../utils/url.ts'
+import { encodeUrl } from '../../utils/url.js'

 export default {
 	name: 'AddRss',
@ -24,14 +23,15 @@ export default {
 		PlusIcon,
 	},
 	methods: {
-		t,
-		toFeedUrl,
+		addSubscription(feedUrl) {
+			this.$router.push(encodeUrl(feedUrl))
+		},
 	},
 }
 </script>

 <style scoped>
-.list {
+ul {
 	margin-top: 2rem;
 }
 </style>
--- a/src/components/Discover/Search.vue
+++ b/src/components/Discover/Search.vue
@ -7,7 +7,7 @@
 				:key="feed.link"
 				:details="formatLocaleDate(new Date(feed.fetchedAtUnix * 1000))"
 				:name="feed.title"
-				:to="toFeedUrl(feed.link)">
+				:to="toUrl(feed.link)">
 				<template #icon>
 					<NcAvatar
 						:display-name="feed.author"
@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!getSubByUrl(feed.link)"
+						v-if="!isSubscribed(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@ -34,19 +34,16 @@
 	</div>
 </template>

-<script lang="ts">
+<script>
 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 { formatLocaleDate } from '../../utils/time.ts'
+import { debounce } from '../../utils/debounce.js'
+import { formatLocaleDate } from '../../utils/time.js'
 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'
+import { showError } from '@nextcloud/dialogs'
+import { toUrl } from '../../utils/url.js'

 export default {
 	name: 'Search',
@ -63,28 +60,21 @@ export default {
 			required: true,
 		},
 	},
-	data: () => ({
-		feeds: [] as PodcastDataInterface[],
-		loading: false,
-		timeout: null as NodeJS.Timeout | null,
-	}),
-	computed: {
-		...mapState(useSubscriptions, ['getSubByUrl']),
+	data() {
+		return {
+			feeds: [],
+			loading: false,
+		}
 	},
 	watch: {
 		value() {
-			if (this.timeout) {
-				clearTimeout(this.timeout)
-			}
-			this.timeout = setTimeout(this.search, 200)
+			this.search()
 		},
 	},
 	methods: {
-		...mapActions(useSubscriptions, ['fetch']),
 		formatLocaleDate,
-		t,
-		toFeedUrl,
-		async addSubscription(url: string) {
+		toUrl,
+		async addSubscription(url) {
 			try {
 				await axios.post(
 					generateUrl('/apps/gpoddersync/subscription_change/create'),
@ -97,13 +87,17 @@ export default {
 				console.error(e)
 				showError(t('repod', 'Error while adding the feed'))
 			}
-			this.fetch()
+
+			this.$store.dispatch('subscriptions/fetch')
 		},
-		async search() {
+		isSubscribed(url) {
+			return this.$store.state.subscriptions.subscriptions.includes(url)
+		},
+		search: debounce(async function value() {
 			try {
 				this.loading = true
 				const currentSearch = this.value
-				const feeds = await axios.get<PodcastDataInterface[]>(
+				const feeds = await axios.get(
 					generateUrl('/apps/repod/search?q={value}', {
 						value: currentSearch,
 					}),
@ -121,7 +115,7 @@ export default {
 					this.loading = false
 				}
 			}
-		},
+		}, 200),
 	},
 }
 </script>
--- a/src/components/Discover/Toplist.vue
+++ b/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="toFeedUrl(top.link)">
+				<router-link :to="toUrl(top.link)">
 					<img :src="top.imageUrl" :title="top.author" />
 				</router-link>
 			</li>
@ -12,14 +12,12 @@
 	</div>
 </template>

-<script lang="ts">
+<script>
 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.ts'
-import { t } from '@nextcloud/l10n'
-import { toFeedUrl } from '../../utils/url.ts'
+import { showError } from '@nextcloud/dialogs'
+import { toUrl } from '../../utils/url.js'

 export default {
 	name: 'Toplist',
@ -32,10 +30,12 @@ export default {
 			required: true,
 		},
 	},
-	data: () => ({
-		loading: true,
-		tops: [] as PodcastDataInterface[],
-	}),
+	data() {
+		return {
+			loading: true,
+			tops: [],
+		}
+	},
 	computed: {
 		title() {
 			switch (this.type) {
@ -51,8 +51,8 @@ export default {
 	async mounted() {
 		try {
 			this.loading = true
-			const tops = await axios.get<PodcastDataInterface[]>(
-				generateUrl('/apps/repod/toplist/{type}', { type: this.type }),
+			const tops = await axios.get(
+				generateUrl(`/apps/repod/toplist/${this.type}`),
 			)
 			this.tops = tops.data
 		} catch (e) {
@ -63,7 +63,7 @@ export default {
 		}
 	},
 	methods: {
-		toFeedUrl,
+		toUrl,
 	},
 }
 </script>
--- a/src/components/Feed/Banner.vue
+++ b/src/components/Feed/Banner.vue
@ -1,13 +1,14 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
 	<div class="header">
-		<img class="background" :src="feed.imageUrl" />
+		<img class="background" :src="imageUrl" />
 		<div class="content">
 			<div>
 				<NcAvatar
-					:display-name="feed.author || feed.title"
+					:display-name="author || title"
 					:is-no-user="true"
 					:size="128"
-					:url="feed.imageUrl" />
+					:url="imageUrl" />
 				<a class="feed" :href="url" @click.prevent="copyFeed">
 					<RssIcon :size="20" />
 					<i>{{ t('repod', 'Copy feed') }}</i>
@ -15,15 +16,17 @@
 			</div>
 			<div class="inner">
 				<div class="infos">
-					<h2>{{ feed.title }}</h2>
-					<a :href="feed.link" target="_blank">
-						<i>{{ feed.author }}</i>
+					<h2>{{ title }}</h2>
+					<a :href="link" target="_blank">
+						<i>{{ author }}</i>
 					</a>
 					<br /><br />
-					<SafeHtml :source="feed.description || ''" />
+					<p>
+						<small v-html="strippedDescription" />
+					</p>
 				</div>
 				<NcAppNavigationNew
-					v-if="!getSubByUrl(url)"
+					v-if="!isSubscribed"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@ -35,19 +38,15 @@
 	</div>
 </template>

-<script lang="ts">
+<script>
 import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
-import { mapActions, mapState } from 'pinia'
-import { showError, showSuccess } from '../../utils/toast.ts'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 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.ts'
+import { cleanHtml } from '../../utils/text.js'
+import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
-import { t } from '@nextcloud/l10n'
-import { useSubscriptions } from '../../store/subscriptions.ts'

 export default {
 	name: 'Banner',
@ -56,23 +55,41 @@ export default {
 		NcAppNavigationNew,
 		PlusIcon,
 		RssIcon,
-		SafeHtml,
 	},
 	props: {
-		feed: {
-			type: Object as () => PodcastDataInterface,
+		author: {
+			type: String,
+			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, ['getSubByUrl']),
 		url() {
-			return decodeUrl(this.$route.params.url as string)
+			return decodeUrl(this.$route.params.url)
+		},
+		isSubscribed() {
+			return this.$store.state.subscriptions.subscriptions.includes(this.url)
+		},
+		strippedDescription() {
+			return cleanHtml(this.description)
 		},
 	},
 	methods: {
-		...mapActions(useSubscriptions, ['fetch']),
-		t,
 		async addSubscription() {
 			try {
 				await axios.post(
@ -86,11 +103,12 @@ export default {
 				console.error(e)
 				showError(t('repod', 'Error while adding the feed'))
 			}
-			this.fetch()
+
+			this.$store.dispatch('subscriptions/fetch')
 		},
 		copyFeed() {
 			window.navigator.clipboard.writeText(this.url)
-			showSuccess(t('repod', 'Link copied to the clipboard'))
+			showSuccess(t('repod', "Feed's link copied to the clipboard"))
 		},
 	},
 }
@ -129,13 +147,11 @@ export default {
 }

 .infos {
-	flex: 1;
 	overflow: auto;
 }

 .inner {
 	display: flex;
-	flex: 1;
 }

@media only screen and (max-width: 768px) {
--- a/src/components/Feed/Episode.vue
+++ b/src/components/Feed/Episode.vue
@ -1,221 +0,0 @@
-<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 }"
-		@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>
--- a/src/components/Feed/Episodes.vue
+++ b/src/components/Feed/Episodes.vue
@ -2,82 +2,212 @@
 	<div>
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
-			<Episode
+			<NcListItem
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
-				:episode="episode"
-				:url="url" />
+				:active="isCurrentEpisode(episode)"
+				:class="hasEnded(episode) ? 'ended' : ''"
+				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
+				:force-display-actions="true"
+				:name="episode.name"
+				:title="episode.description"
+				@click="modalEpisode = episode">
+				<template #actions>
+					<NcActionButton
+						v-if="!isCurrentEpisode(episode)"
+						:aria-label="t('repod', 'Play')"
+						:name="t('repod', 'Play')"
+						:title="t('repod', 'Play')"
+						@click="load(episode)">
+						<template #icon>
+							<PlayIcon :size="20" />
+						</template>
+					</NcActionButton>
+					<NcActionButton
+						v-if="isCurrentEpisode(episode)"
+						:aria-label="t('repod', 'Stop')"
+						:name="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"
+							: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 lang="ts">
-import { hasEnded, isListening } from '../../utils/status.ts'
-import Episode from './Episode.vue'
-import type { EpisodeInterface } from '../../utils/types.ts'
+<script>
+import {
+	NcActionButton,
+	NcActionLink,
+	NcActions,
+	NcAvatar,
+	NcListItem,
+	NcModal,
+	NcProgressBar,
+} from '@nextcloud/vue'
+import {
+	durationToSeconds,
+	formatEpisodeTimestamp,
+	formatLocaleDate,
+} from '../../utils/time.js'
+import DownloadIcon from 'vue-material-design-icons/Download.vue'
+import { EventBus } from '../../store/bus.js'
 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 { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
-import { mapState } from 'pinia'
-import { showError } from '../../utils/toast.ts'
-import { t } from '@nextcloud/l10n'
-import { usePlayer } from '../../store/player.ts'
-import { useSettings } from '../../store/settings.ts'
+import { showError } from '@nextcloud/dialogs'

 export default {
 	name: 'Episodes',
 	components: {
-		Episode,
+		DownloadIcon,
 		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']),
+		currentEpisode() {
+			return this.$store.state.player.episode
+		},
+		filters() {
+			return this.$store.state.settings.filters
+		},
 		filteredEpisodes() {
 			return this.episodes.filter((episode) => {
 				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 as string)
-		},
-	},
-	watch: {
-		episode() {
-			if (this.episode) {
-				this.episodes = this.episodes.map((e) =>
-					e.url === this.episode?.url ? this.episode : e,
-				)
-			}
+			return decodeUrl(this.$route.params.url)
 		},
 	},
 	async mounted() {
 		try {
 			this.loading = true
-			const episodes = await axios.get<EpisodeInterface[]>(
+			const episodes = await axios.get(
 				generateUrl('/apps/repod/episodes/list?url={url}', {
 					url: this.url,
 				}),
 			)
 			this.episodes = [...episodes.data].sort(
-				(a, b) =>
-					new Date(b.pubDate?.date || '').getTime() -
-					new Date(a.pubDate?.date || '').getTime(),
+				(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
 			)
+			EventBus.$on('updateEpisodesList', this.updateList)
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch episodes'))
@ -85,9 +215,72 @@ export default {
 			this.loading = false
 		}
 	},
+	destroyed() {
+		EventBus.$off('updateEpisodesList')
+	},
 	methods: {
-		hasEnded,
-		isListening,
+		formatLocaleDate,
+		hasEnded(episode) {
+			return (
+				episode.action &&
+				episode.action.position > 0 &&
+				episode.action.total > 0 &&
+				episode.action.position >= episode.action.total
+			)
+		},
+		isCurrentEpisode(episode) {
+			return this.currentEpisode && this.currentEpisode.url === episode.url
+		},
+		isListening(episode) {
+			return (
+				episode.action &&
+				episode.action.action.toLowerCase() === 'play' &&
+				!this.hasEnded(episode)
+			)
+		},
+		load(episode) {
+			this.$store.dispatch('player/load', 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],
+				)
+				this.updateList(episode)
+			} catch (e) {
+				console.error(e)
+				showError(t('repod', 'Could not change the status of the episode'))
+			} finally {
+				this.loadingAction = false
+			}
+		},
+		updateList(episode) {
+			this.episodes = this.episodes.map((e) =>
+				e.url === episode.url ? episode : e,
+			)
+		},
 	},
 }
 </script>
+
+<style scoped>
+.ended {
+	opacity: 0.4;
+}
+
+.progress {
+	margin-top: 0.4rem;
+}
+</style>
--- a/src/components/Feed/Favorite.vue
+++ b/src/components/Feed/Favorite.vue
@ -1,106 +0,0 @@
-<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>
--- a/src/components/Player/Bar.vue
+++ b/src/components/Player/Bar.vue
@ -1,10 +1,10 @@
 <template>
-	<div v-if="episode" class="footer">
-		<img class="background" :src="episode.image" />
-		<Loading v-if="!loaded" />
-		<ProgressBar v-if="loaded" />
-		<div v-if="loaded" class="player">
-			<img :src="episode.image" />
+	<div v-if="player.episode" class="footer">
+		<img class="background" :src="player.episode.image" />
+		<Loading v-if="!player.loaded" />
+		<ProgressBar v-if="player.loaded" />
+		<div v-if="player.loaded" class="player">
+			<img :src="player.episode.image" />
 			<Infos class="infos" />
 			<Controls class="controls" />
 			<Timer class="timer" />
@ -13,15 +13,13 @@
 	</div>
 </template>

-<script lang="ts">
+<script>
 import Controls from './Controls.vue'
 import Infos from './Infos.vue'
 import Loading from '../Atoms/Loading.vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
-import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.ts'

 export default {
 	name: 'Bar',
@ -34,7 +32,9 @@ export default {
 		Volume,
 	},
 	computed: {
-		...mapState(usePlayer, ['episode', 'loaded']),
+		player() {
+			return this.$store.state.player
+		},
 	},
 }
 </script>
@ -78,7 +78,7 @@ export default {

@media only screen and (max-width: 768px) {
 	.infos {
-		flex: 1;
+		flex: 2;
 	}

 	.timer,
--- a/src/components/Player/Controls.vue
+++ b/src/components/Player/Controls.vue
@ -1,53 +1,32 @@
 <template>
 	<div class="controls">
-		<Rewind10Icon
-			class="pointer rewind"
-			:size="20"
-			:title="t('repod', 'Rewind 10 seconds')"
-			@click="seek((currentTime ?? 0) - 10)" />
 		<PauseIcon
-			v-if="!paused"
+			v-if="!player.paused"
 			class="pointer"
 			:size="50"
-			:title="t('repod', 'Pause')"
-			@click="pause" />
+			@click="$store.dispatch('player/pause')" />
 		<PlayIcon
-			v-if="paused"
+			v-if="player.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)" />
+			@click="$store.dispatch('player/play')" />
 	</div>
 </template>

-<script lang="ts">
-import { mapActions, mapState } from 'pinia'
-import FastForward30Icon from 'vue-material-design-icons/FastForward30.vue'
+<script>
 import PauseIcon from 'vue-material-design-icons/Pause.vue'
 import PlayIcon from 'vue-material-design-icons/Play.vue'
-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, ['currentTime', 'paused']),
-	},
-	methods: {
-		...mapActions(usePlayer, ['play', 'pause', 'seek']),
-		t,
+		player() {
+			return this.$store.state.player
+		},
 	},
 }
 </script>
@ -55,17 +34,9 @@ export default {
 <style scoped>
 .controls {
 	display: flex;
-	gap: 0.5rem;
 }

 .pointer {
 	cursor: pointer;
 }
-
-@media only screen and (max-width: 768px) {
-	.forward,
-	.rewind {
-		display: none;
-	}
-}
 </style>
--- a/src/components/Player/Infos.vue
+++ b/src/components/Player/Infos.vue
@ -1,23 +1,28 @@
 <template>
-	<div v-if="episode && podcastUrl" class="root">
+	<div class="root">
 		<strong class="pointer" @click="modal = true">
-			{{ episode.name }}
+			{{ player.episode.name }}
 		</strong>
-		<router-link :to="toFeedUrl(podcastUrl)">
-			<i>{{ episode.title }}</i>
+		<router-link :to="hash">
+			<i>{{ player.episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
-			<Modal :episode="episode" />
+			<Modal
+				:description="player.episode.description"
+				:image="player.episode.image"
+				:link="player.episode.link"
+				:name="player.episode.name"
+				:size="player.episode.size"
+				:title="player.episode.title"
+				:url="player.episode.url" />
 		</NcModal>
 	</div>
 </template>

-<script lang="ts">
+<script>
 import Modal from '../Atoms/Modal.vue'
 import { NcModal } from '@nextcloud/vue'
-import { mapState } from 'pinia'
-import { toFeedUrl } from '../../utils/url.ts'
-import { usePlayer } from '../../store/player.ts'
+import { toUrl } from '../../utils/url.js'

 export default {
 	name: 'Infos',
@ -25,14 +30,18 @@ export default {
 		Modal,
 		NcModal,
 	},
-	data: () => ({
-		modal: false,
-	}),
-	computed: {
-		...mapState(usePlayer, ['episode', 'podcastUrl']),
+	data() {
+		return {
+			modal: false,
+		}
 	},
-	methods: {
-		toFeedUrl,
+	computed: {
+		player() {
+			return this.$store.state.player
+		},
+		hash() {
+			return toUrl(this.player.podcastUrl)
+		},
 	},
 }
 </script>
--- a/src/components/Player/ProgressBar.vue
+++ b/src/components/Player/ProgressBar.vue
@ -1,27 +1,20 @@
 <template>
 	<input
-		v-if="duration"
 		class="progress"
-		:max="duration"
+		:max="player.duration"
 		min="0"
 		type="range"
-		:value="currentTime"
-		@change="
-			(event) => seek(parseInt((event.target as HTMLInputElement).value))
-		" />
+		:value="player.currentTime"
+		@change="(event) => $store.dispatch('player/seek', event.target.value)" />
 </template>

-<script lang="ts">
-import { mapActions, mapState } from 'pinia'
-import { usePlayer } from '../../store/player.ts'
-
+<script>
 export default {
 	name: 'ProgressBar',
 	computed: {
-		...mapState(usePlayer, ['duration', 'currentTime']),
-	},
-	methods: {
-		...mapActions(usePlayer, ['seek']),
+		player() {
+			return this.$store.state.player
+		},
 	},
 }
 </script>
--- a/src/components/Player/Timer.vue
+++ b/src/components/Player/Timer.vue
@ -1,20 +1,20 @@
 <template>
-	<div v-if="currentTime && duration" class="root">
-		<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
+	<div>
+		<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
 		<span>/</span>
-		<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
+		<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
 	</div>
 </template>

-<script lang="ts">
-import { formatTimer } from '../../utils/time.ts'
-import { mapState } from 'pinia'
-import { usePlayer } from '../../store/player.ts'
+<script>
+import { formatTimer } from '../../utils/time.js'

 export default {
 	name: 'Timer',
 	computed: {
-		...mapState(usePlayer, ['duration', 'currentTime']),
+		player() {
+			return this.$store.state.player
+		},
 	},
 	methods: {
 		formatTimer,
@ -23,7 +23,7 @@ export default {
 </script>

 <style scoped>
-.root {
+div {
 	align-items: center;
 	display: flex;
 	gap: 5px;
--- a/src/components/Player/Volume.vue
+++ b/src/components/Player/Volume.vue
@ -1,50 +1,42 @@
 <template>
 	<div>
 		<VolumeHighIcon
-			v-if="volume > 0.7"
+			v-if="player.volume > 0.7"
 			class="pointer"
 			:size="30"
-			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeLowIcon
-			v-if="volume > 0 && volume <= 0.3"
+			v-if="player.volume > 0 && player.volume <= 0.3"
 			class="pointer"
 			:size="30"
-			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeMediumIcon
-			v-if="volume > 0.3 && volume <= 0.7"
+			v-if="player.volume > 0.3 && player.volume <= 0.7"
 			class="pointer"
 			:size="30"
-			:title="t('repod', 'Mute')"
 			@click="mute" />
 		<VolumeMuteIcon
-			v-if="volume === 0"
+			v-if="player.volume === 0"
 			class="pointer"
 			:size="30"
-			:title="t('repod', 'Unmute')"
-			@click="setVolume(volumeMuted)" />
+			@click="$store.dispatch('player/volume', volumeMuted)" />
 		<input
 			max="1"
 			min="0"
 			step="0.1"
 			type="range"
-			:value="volume"
+			:value="player.volume"
 			@change="
-				(event) =>
-					setVolume(parseFloat((event.target as HTMLInputElement).value))
+				(event) => $store.dispatch('player/volume', event.target.value)
 			" />
 	</div>
 </template>

-<script lang="ts">
-import { mapActions, mapState } from 'pinia'
+<script>
 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 { t } from '@nextcloud/l10n'
-import { usePlayer } from '../../store/player.ts'

 export default {
 	name: 'Volume',
@ -54,19 +46,21 @@ export default {
 		VolumeMediumIcon,
 		VolumeMuteIcon,
 	},
-	data: () => ({
-		volumeMuted: 0,
-	}),
+	data() {
+		return {
+			volumeMuted: 0,
+		}
+	},
 	computed: {
-		...mapState(usePlayer, ['volume']),
+		player() {
+			return this.$store.state.player
+		},
 	},
 	methods: {
-		...mapActions(usePlayer, ['setVolume']),
 		mute() {
-			this.volumeMuted = this.volume
-			this.setVolume(0)
+			this.volumeMuted = this.player.volume
+			this.$store.dispatch('player/volume', 0)
 		},
-		t,
 	},
 }
 </script>
--- a/src/components/Settings/Export.vue
+++ b/src/components/Settings/Export.vue
@ -8,11 +8,10 @@
 	</NcAppNavigationItem>
 </template>

-<script lang="ts">
+<script>
 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',
@ -22,7 +21,6 @@ export default {
 	},
 	methods: {
 		generateUrl,
-		t,
 	},
 }
 </script>
--- a/src/components/Settings/Filters.vue
+++ b/src/components/Settings/Filters.vue
@ -1,33 +1,44 @@
 <template>
 	<NcAppNavigationItem
+		:allow-collapse="true"
 		menu-placement="top"
 		:name="t('repod', 'Filtering episodes')">
 		<template #actions>
 			<NcActionCheckbox
+				:checked="all"
 				:disabled="all"
-				:model-value="all"
-				@change="
-					setFilters({
-						listened: true,
-						listening: true,
-						unlistened: true,
-					})
+				@update:checked="
+					(checked) =>
+						$store.commit('settings/filters', {
+							listened: checked,
+							listening: checked,
+							unlistened: checked,
+						})
 				">
 				{{ t('repod', 'Show all') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="filters.listened"
-				@change="setFilters({ listened: !filters.listened })">
+				:checked="filters.listened"
+				@update:checked="
+					(checked) =>
+						$store.commit('settings/filters', { listened: checked })
+				">
 				{{ t('repod', 'Listened') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="filters.listening"
-				@change="setFilters({ listening: !filters.listening })">
+				:checked="filters.listening"
+				@update:checked="
+					(checked) =>
+						$store.commit('settings/filters', { listening: checked })
+				">
 				{{ t('repod', 'Listening') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="filters.unlistened"
-				@change="setFilters({ unlistened: !filters.unlistened })">
+				:checked="filters.unlistened"
+				@update:checked="
+					(checked) =>
+						$store.commit('settings/filters', { unlistened: checked })
+				">
 				{{ t('repod', 'Unlistened') }}
 			</NcActionCheckbox>
 		</template>
@ -38,13 +49,10 @@
 	</NcAppNavigationItem>
 </template>

-<script lang="ts">
+<script>
 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 { t } from '@nextcloud/l10n'
-import { useSettings } from '../../store/settings.ts'

 export default {
 	name: 'Filters',
@ -55,7 +63,6 @@ export default {
 		NcActionCheckbox,
 	},
 	computed: {
-		...mapState(useSettings, ['filters']),
 		all() {
 			return (
 				this.filters.listened &&
@ -63,10 +70,12 @@ export default {
 				this.filters.unlistened
 			)
 		},
+		filters() {
+			return this.$store.state.settings.filters
+		},
 	},
-	methods: {
-		...mapActions(useSettings, ['setFilters']),
-		t,
+	mounted() {
+		this.$store.dispatch('settings/fetch')
 	},
 }
 </script>
--- a/src/components/Settings/Import.vue
+++ b/src/components/Settings/Import.vue
@ -29,13 +29,12 @@
 	</NcAppNavigationItem>
 </template>

-<script lang="ts">
+<script>
 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',
@ -45,19 +44,19 @@ export default {
 		NcAppNavigationItem,
 		NcModal,
 	},
-	data: () => ({
-		loading: false,
-		modal: false,
-	}),
+	data() {
+		return {
+			loading: false,
+			modal: false,
+		}
+	},
 	methods: {
 		generateUrl,
-		t,
-		async importOpml(event: Event) {
+		async importOpml(event) {
 			try {
-				const target = event.target as HTMLFormElement
-				const formData = new FormData(target)
-				this.loading = true
-				await axios.post(target.action, formData)
+				const formData = new FormData(event.target)
+				this.importLoading = true
+				await axios.post(event.target.action, formData)
 			} catch (e) {
 				console.error(e)
 			} finally {
--- a/src/components/Settings/Rate.vue
+++ b/src/components/Settings/Rate.vue
@ -8,10 +8,9 @@
 	</NcAppNavigationItem>
 </template>

-<script lang="ts">
+<script>
 import { NcAppNavigationItem } from '@nextcloud/vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
-import { t } from '@nextcloud/l10n'

 export default {
 	name: 'Rate',
@ -19,8 +18,5 @@ export default {
 		NcAppNavigationItem,
 		StarIcon,
 	},
-	methods: {
-		t,
-	},
 }
 </script>
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@ -1,7 +1,6 @@
 <template>
 	<NcAppNavigationSettings>
 		<Filters />
-		<Sleep />
 		<Speed />
 		<Import />
 		<Export />
@ -9,13 +8,12 @@
 	</NcAppNavigationSettings>
 </template>

-<script lang="ts">
+<script>
 import Export from './Export.vue'
 import Filters from './Filters.vue'
 import Import from './Import.vue'
 import { NcAppNavigationSettings } from '@nextcloud/vue'
 import Rate from './Rate.vue'
-import Sleep from './Sleep.vue'
 import Speed from './Speed.vue'

 export default {
@ -26,7 +24,6 @@ export default {
 		Import,
 		NcAppNavigationSettings,
 		Rate,
-		Sleep,
 		Speed,
 	},
 }
--- a/src/components/Settings/Sleep.vue
+++ b/src/components/Settings/Sleep.vue
@ -1,103 +0,0 @@
-<template>
-	<NcAppNavigationItem menu-placement="top" :name="t('repod', 'Sleep timer')">
-		<template #actions>
-			<NcActionInput
-				v-if="!sleep"
-				v-model="input"
-				:label="t('repod', 'Minutes')"
-				:label-outside="false"
-				type="number"
-				@submit="setTimer">
-				<template #icon>
-					<ClockVue :size="20" />
-				</template>
-			</NcActionInput>
-		</template>
-		<template #extra>
-			<div v-if="sleep" class="extra">
-				{{ label }}
-				<BellCancel class="pointer" :size="20" @click="stopTimer" />
-			</div>
-		</template>
-		<template #icon>
-			<BellSleepIcon v-if="sleep" :size="20" />
-			<BellSleepOutlineIcon v-if="!sleep" :size="20" />
-		</template>
-	</NcAppNavigationItem>
-</template>
-
-<script lang="ts">
-import { NcActionInput, NcAppNavigationItem } from '@nextcloud/vue'
-import { n, t } from '@nextcloud/l10n'
-import BellCancel from 'vue-material-design-icons/BellCancel.vue'
-import BellSleepIcon from 'vue-material-design-icons/BellSleep.vue'
-import BellSleepOutlineIcon from 'vue-material-design-icons/BellSleepOutline.vue'
-import ClockVue from 'vue-material-design-icons/Clock.vue'
-import { mapActions } from 'pinia'
-import { usePlayer } from '../../store/player.ts'
-
-export default {
-	name: 'Sleep',
-	components: {
-		BellCancel,
-		BellSleepIcon,
-		BellSleepOutlineIcon,
-		ClockVue,
-		NcActionInput,
-		NcAppNavigationItem,
-	},
-	data: () => ({
-		input: 10,
-		sleep: null as NodeJS.Timeout | null,
-		timer: 0,
-	}),
-	computed: {
-		label() {
-			if (this.timer > 60) {
-				return this.n(
-					'repod',
-					'%n min',
-					'%n mins',
-					Math.round(this.timer / 60),
-				)
-			} else {
-				return this.n('repod', '%n sec', '%n secs', this.timer)
-			}
-		},
-	},
-	methods: {
-		...mapActions(usePlayer, ['stop']),
-		n,
-		t,
-		setTimer() {
-			this.timer = this.input * 60
-			this.sleep = setInterval(() => {
-				if (this.timer > 0) {
-					this.timer--
-				} else if (this.sleep) {
-					this.stopTimer()
-					this.stop()
-				}
-			}, 1000)
-		},
-		stopTimer() {
-			if (this.sleep) {
-				clearTimeout(this.sleep)
-				this.sleep = null
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-.extra {
-	align-items: center;
-	display: flex;
-	gap: 0.5rem;
-}
-
-.pointer {
-	cursor: pointer;
-}
-</style>
--- a/src/components/Settings/Speed.vue
+++ b/src/components/Settings/Speed.vue
@ -3,28 +3,27 @@
 		<template #extra>
 			<div class="extra">
 				<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
-				<NcCounterBubble class="counter">x{{ rate }}</NcCounterBubble>
+				<NcCounterBubble class="counter">
+					x{{ player.rate }}
+				</NcCounterBubble>
 				<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
 			</div>
 		</template>
 		<template #icon>
-			<SpeedometerSlowIcon v-if="rate < 1" :size="20" />
-			<SpeedometerMediumIcon v-if="rate === 1" :size="20" />
-			<SpeedometerIcon v-if="rate > 1" :size="20" />
+			<SpeedometerSlowIcon v-if="player.rate < 1" :size="20" />
+			<SpeedometerMediumIcon v-if="player.rate === 1" :size="20" />
+			<SpeedometerIcon v-if="player.rate > 1" :size="20" />
 		</template>
 	</NcAppNavigationItem>
 </template>

-<script lang="ts">
+<script>
 import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
-import { mapActions, mapState } from 'pinia'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
 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 { t } from '@nextcloud/l10n'
-import { usePlayer } from '../../store/player.ts'

 export default {
 	name: 'Speed',
@ -38,14 +37,17 @@ export default {
 		SpeedometerSlowIcon,
 	},
 	computed: {
-		...mapState(usePlayer, ['rate']),
+		player() {
+			return this.$store.state.player
+		},
 	},
 	methods: {
-		...mapActions(usePlayer, ['setRate']),
-		t,
-		changeRate(diff: number) {
-			const newRate = parseFloat((this.rate + diff).toPrecision(2))
-			this.setRate(newRate > 0 ? newRate : this.rate)
+		changeRate(diff) {
+			const newRate = (this.player.rate + diff).toPrecision(2)
+			this.$store.dispatch(
+				'player/rate',
+				newRate > 0 ? newRate : this.player.rate,
+			)
 		},
 	},
 }
--- a/src/components/Sidebar/Item.vue
+++ b/src/components/Sidebar/Item.vue
@ -0,0 +1,106 @@
+<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 { showError } from '@nextcloud/dialogs'
+import { toUrl } from '../../utils/url.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: {
+		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.$store.dispatch('subscriptions/fetch')
+				}
+			}
+		},
+	},
+}
+</script>
--- a/src/components/Sidebar/Subscription.vue
+++ b/src/components/Sidebar/Subscription.vue
@ -1,149 +0,0 @@
-<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: () => ({
-		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>
--- a/src/components/Sidebar/Subscriptions.vue
+++ b/src/components/Sidebar/Subscriptions.vue
@ -2,7 +2,7 @@
 	<AppNavigation>
 		<template #list>
 			<NcAppContentList>
-				<router-link to="/discover">
+				<router-link to="/">
 					<NcAppNavigationNew :text="t('repod', 'Add a podcast')">
 						<template #icon>
 							<PlusIcon :size="20" />
@ -11,14 +11,10 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Subscription
-						v-for="sub of subs.filter((sub) => sub.isFavorite)"
-						:key="sub.metrics.url"
-						:url="sub.metrics.url" />
-					<Subscription
-						v-for="sub of subs.filter((sub) => !sub.isFavorite)"
-						:key="sub.metrics.url"
-						:url="sub.metrics.url" />
+					<Item
+						v-for="subscriptionUrl of subscriptions"
+						:key="subscriptionUrl"
+						:url="subscriptionUrl" />
 				</NcAppNavigationList>
 			</NcAppContentList>
 		</template>
@ -28,43 +24,44 @@
 	</AppNavigation>
 </template>

-<script lang="ts">
+<script>
 import {
 	NcAppContentList,
 	NcAppNavigationList,
 	NcAppNavigationNew,
 } 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 Subscription from './Subscription.vue'
-import { showError } from '../../utils/toast.ts'
-import { t } from '@nextcloud/l10n'
-import { useSubscriptions } from '../../store/subscriptions.ts'
+import { showError } from '@nextcloud/dialogs'

 export default {
 	name: 'Subscriptions',
 	components: {
 		AppNavigation,
+		Item,
 		Loading,
 		NcAppContentList,
 		NcAppNavigationList,
 		NcAppNavigationNew,
 		PlusIcon,
 		Settings,
-		Subscription,
 	},
-	data: () => ({
-		loading: true,
-	}),
+	data() {
+		return {
+			loading: true,
+		}
+	},
 	computed: {
-		...mapState(useSubscriptions, ['subs']),
+		subscriptions() {
+			return this.$store.state.subscriptions.subscriptions
+		},
 	},
 	async mounted() {
 		try {
-			await this.fetch()
+			await this.$store.dispatch('subscriptions/fetch')
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch subscriptions'))
@ -72,9 +69,5 @@ export default {
 			this.loading = false
 		}
 	},
-	methods: {
-		...mapActions(useSubscriptions, ['fetch']),
-		t,
-	},
 }
 </script>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,13 @@
+import { n, t } from '@nextcloud/l10n'
+import App from './App.vue'
+import Vue from 'vue'
+import router from './router.js'
+import store from './store/main.js'
+
+Vue.mixin({ methods: { t, n } })
+
+const View = Vue.extend(App)
+new View({
+	router,
+	store,
+}).$mount('#content')
--- a/src/main.ts
+++ b/src/main.ts
@ -1,12 +0,0 @@
-import '@formatjs/intl-segmenter/polyfill'
-import App from './App.vue'
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import router from './router.ts'
-
-const Vue = createApp(App)
-const pinia = createPinia()
-
-Vue.use(pinia)
-Vue.use(router)
-Vue.mount('#content')
--- a/src/router.js
+++ b/src/router.js
@ -0,0 +1,23 @@
+import Discover from './views/Discover.vue'
+import Feed from './views/Feed.vue'
+import Router from 'vue-router'
+import Vue from 'vue'
+import { generateUrl } from '@nextcloud/router'
+
+Vue.use(Router)
+
+const router = new Router({
+	base: generateUrl('apps/repod'),
+	routes: [
+		{
+			path: '/',
+			component: Discover,
+		},
+		{
+			path: '/:url',
+			component: Feed,
+		},
+	],
+})
+
+export default router
--- a/src/router.ts
+++ b/src/router.ts
@ -1,25 +0,0 @@
-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: createWebHistory(generateUrl('apps/repod')),
-	routes: [
-		{
-			path: '/',
-			component: Home,
-		},
-		{
-			path: '/discover',
-			component: Discover,
-		},
-		{
-			path: '/feed/:url',
-			component: Feed,
-		},
-	],
-})
-
-export default router
--- a/src/store/bus.js
+++ b/src/store/bus.js
@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const EventBus = new Vue()
--- a/src/store/main.js
+++ b/src/store/main.js
@ -0,0 +1,17 @@
+import Vuex, { Store } from 'vuex'
+import Vue from 'vue'
+import { player } from './player.js'
+import { settings } from './settings.js'
+import { subscriptions } from './subscriptions.js'
+
+Vue.use(Vuex)
+
+const store = new Store({
+	modules: {
+		player,
+		settings,
+		subscriptions,
+	},
+})
+
+export default store
--- a/src/store/player.js
+++ b/src/store/player.js
@ -0,0 +1,147 @@
+import { EventBus } from './bus.js'
+import axios from '@nextcloud/axios'
+import { decodeUrl } from '../utils/url.js'
+import { formatEpisodeTimestamp } from '../utils/time.js'
+import { generateUrl } from '@nextcloud/router'
+import router from '../router.js'
+import store from './main.js'
+
+const audio = new Audio()
+audio.ondurationchange = () => store.commit('player/duration', audio.duration)
+audio.onended = () => store.dispatch('player/stop')
+audio.onloadeddata = () => store.commit('player/loaded', true)
+audio.onplay = () => store.dispatch('player/play')
+audio.onpause = () => store.dispatch('player/pause')
+audio.onratechange = () => store.commit('player/rate', audio.playbackRate)
+audio.onseeked = () => store.commit('player/currentTime', audio.currentTime)
+audio.ontimeupdate = () => store.commit('player/currentTime', audio.currentTime)
+audio.onvolumechange = () => store.commit('player/volume', audio.volume)
+
+export const player = {
+	namespaced: true,
+	state: {
+		currentTime: null,
+		duration: null,
+		episode: null,
+		loaded: false,
+		paused: null,
+		podcastUrl: null,
+		volume: 1,
+		rate: 1,
+		started: 0,
+	},
+	mutations: {
+		action: (state, action) => {
+			state.episode.action = action
+
+			if (action && action.position && action.position < action.total) {
+				audio.currentTime = action.position
+				state.started = audio.currentTime
+			}
+		},
+		currentTime: (state, currentTime) => {
+			state.currentTime = currentTime
+		},
+		duration: (state, duration) => {
+			state.duration = duration
+		},
+		episode: (state, episode) => {
+			state.episode = episode
+
+			if (episode) {
+				state.podcastUrl = decodeUrl(router.currentRoute.params.url)
+				audio.src = episode.url
+				audio.load()
+				audio.play()
+
+				if (
+					episode.action &&
+					episode.action.position &&
+					episode.action.position < episode.action.total
+				) {
+					audio.currentTime = episode.action.position
+					state.started = audio.currentTime
+				}
+			} else {
+				state.loaded = false
+				state.podcastUrl = null
+				audio.src = ''
+			}
+		},
+		loaded: (state, loaded) => {
+			state.loaded = loaded
+		},
+		paused: (state, paused) => {
+			state.paused = paused
+		},
+		volume: (state, volume) => {
+			state.volume = volume
+		},
+		rate: (state, rate) => {
+			state.rate = rate
+		},
+		started: (state, started) => {
+			state.started = started
+		},
+	},
+	actions: {
+		load: async (context, episode) => {
+			context.commit('episode', episode)
+			try {
+				const action = await axios.get(
+					generateUrl('/apps/repod/episodes/action?url={url}', {
+						url: episode.url,
+					}),
+				)
+				context.commit('action', action.data)
+			} catch {}
+		},
+		pause: (context) => {
+			audio.pause()
+			context.commit('paused', true)
+			context.dispatch('time')
+		},
+		play: (context) => {
+			audio.play()
+			context.commit('paused', false)
+			context.commit('started', audio.currentTime)
+		},
+		seek: (context, currentTime) => {
+			audio.currentTime = currentTime
+			context.dispatch('time')
+		},
+		stop: (context) => {
+			context.dispatch('pause')
+			context.commit('episode', null)
+		},
+		time: async (context) => {
+			const episode = context.state.episode
+			episode.action = {
+				podcast: context.state.podcastUrl,
+				episode: context.state.episode.url,
+				guid: context.state.episode.guid,
+				action: 'play',
+				timestamp: formatEpisodeTimestamp(new Date()),
+				started: Math.round(context.state.started),
+				position: Math.round(audio.currentTime),
+				total: Math.round(audio.duration),
+			}
+			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
+				episode.action,
+			])
+			EventBus.$emit('updateEpisodesList', episode)
+		},
+		volume: (_, volume) => {
+			audio.volume = volume
+		},
+		rate: (_, rate) => {
+			audio.playbackRate = rate
+		},
+	},
+}
+
+setInterval(() => {
+	if (player.state.paused === false) {
+		store.dispatch('player/time')
+	}
+}, 40000)
--- a/src/store/player.ts
+++ b/src/store/player.ts
@ -1,137 +0,0 @@
-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.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 as number | null,
-		duration: null as number | null,
-		episode: null as EpisodeInterface | null,
-		loaded: false,
-		paused: true,
-		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)
-			audio.onpause = () => this.pause()
-			audio.onplay = () => this.play()
-			audio.onratechange = () => (this.rate = audio.playbackRate)
-			audio.onseeked = () => (this.currentTime = audio.currentTime)
-			audio.ontimeupdate = () => (this.currentTime = audio.currentTime)
-			audio.onvolumechange = () => (this.volume = audio.volume)
-
-			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<EpisodeActionInterface>(
-						generateUrl('/apps/repod/episodes/action?url={url}', {
-							url: this.episode.url,
-						}),
-					)
-
-					this.episode.action = action.data
-				} catch {}
-
-				if (
-					this.episode.action &&
-					this.episode.action.position < this.episode.action.total
-				) {
-					audio.currentTime = this.episode.action.position
-					this.started = audio.currentTime
-				}
-
-				audio.play()
-			} else {
-				this.loaded = false
-				this.podcastUrl = null
-				audio.src = ''
-			}
-		},
-		pause() {
-			audio.pause()
-			this.paused = true
-			this.time()
-		},
-		play() {
-			this.playCount++
-
-			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: number) {
-			audio.currentTime = currentTime
-			this.time()
-		},
-		stop() {
-			this.pause()
-			this.episode = null
-		},
-		time() {
-			if (!this.podcastUrl || !this.episode?.url) {
-				return
-			}
-
-			this.episode.action = {
-				podcast: this.podcastUrl,
-				episode: this.episode.url,
-				guid: this.episode.guid,
-				action: 'play',
-				timestamp: formatEpisodeTimestamp(new Date()),
-				started: Math.round(this.started),
-				position: Math.round(audio.currentTime),
-				total: Math.round(audio.duration),
-			}
-
-			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
-				this.episode.action,
-			])
-		},
-		setVolume(volume: number) {
-			audio.volume = volume
-			setCookie('repod.volume', volume.toString(), 365)
-		},
-		setRate(rate: number) {
-			audio.playbackRate = rate
-			setCookie('repod.rate', rate.toString(), 365)
-		},
-	},
-})
--- a/src/store/settings.js
+++ b/src/store/settings.js
@ -0,0 +1,28 @@
+import { getCookie, setCookie } from '../utils/cookies.js'
+
+export const settings = {
+	namespaced: true,
+	state: {
+		filters: {
+			listened: true,
+			listening: true,
+			unlistened: true,
+		},
+	},
+	mutations: {
+		filters: (state, filters) => {
+			state.filters = { ...state.filters, ...filters }
+			setCookie('repod.filters', JSON.stringify(state.filters), 365)
+		},
+	},
+	actions: {
+		fetch: (context) => {
+			try {
+				const filters = getCookie('repod.filters')
+				context.commit('filters', JSON.parse(filters))
+			} catch (e) {
+				// nothing
+			}
+		},
+	},
+}
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@ -1,37 +0,0 @@
-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)
-		},
-	},
-})
--- a/src/store/subscriptions.js
+++ b/src/store/subscriptions.js
@ -0,0 +1,28 @@
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export const subscriptions = {
+	namespaced: true,
+	state: {
+		subscriptions: [],
+	},
+	mutations: {
+		set: (state, subscriptions) => {
+			state.subscriptions = subscriptions
+		},
+	},
+	actions: {
+		fetch: async (context) => {
+			const metrics = await axios.get(
+				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
+			)
+			const subs = [...metrics.data.subscriptions].sort(
+				(a, b) => b.listenedSeconds - a.listenedSeconds,
+			)
+			context.commit(
+				'set',
+				subs.map((sub) => sub.url),
+			)
+		},
+	},
+}
--- a/src/store/subscriptions.ts
+++ b/src/store/subscriptions.ts
@ -1,59 +0,0 @@
-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,
-			)
-		},
-	},
-})
--- a/src/utils/cookies.js
+++ b/src/utils/cookies.js
@ -4,7 +4,7 @@
 * @param {string} name Nom du cookie à récupérer
 * @return {string|null}
 */
-export const getCookie = (name: string): string | null => {
+export const getCookie = (name) => {
 	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: string): string | null => {
 * @param {string} value Value du cookie
 * @param {number} days Durée de vie du cookie (en jours)
 */
-export const setCookie = (name: string, value: string, days: number) => {
+export const setCookie = (name, value, days) => {
 	const date = new Date()
 	date.setDate(date.getDate() + days)
 	document.cookie = `${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; SameSite=Strict;`
--- a/src/utils/debounce.js
+++ b/src/utils/debounce.js
@ -0,0 +1,12 @@
+// 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)
+	}
+}
--- a/src/utils/size.js
+++ b/src/utils/size.js
@ -1,8 +1,8 @@
 // https://stackoverflow.com/a/20732091
-export const humanFileSize = (size: number) => {
+export const humanFileSize = (size) => {
 	const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
 	return (
-		(size / Math.pow(1024, i)).toFixed(2) +
+		(size / Math.pow(1024, i)).toFixed(2) * 1 +
 		' ' +
 		['B', 'kB', 'MB', 'GB', 'TB'][i]
 	)
--- a/src/utils/status.ts
+++ b/src/utils/status.ts
@ -1,16 +0,0 @@
-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)
--- a/src/utils/text.js
+++ b/src/utils/text.js
@ -0,0 +1,7 @@
+// https://stackoverflow.com/a/5002618
+export const cleanHtml = (text) => {
+	const pre = document.createElement('pre')
+	pre.innerHTML = text.replace(/<br\s*\/?>/gm, '\n')
+	const strippedText = pre.textContent || pre.innerText || ''
+	return strippedText.replace(/\n/gm, '<br>')
+}
--- a/src/utils/time.js
+++ b/src/utils/time.js
@ -3,9 +3,9 @@
 * @param {Date} date The date
 * @return {string}
 */
-export const formatTimer = (date: Date): string => {
-	const minutes = date.getUTCMinutes().toString().padStart(2, '0')
-	const seconds = date.getUTCSeconds().toString().padStart(2, '0')
+export const formatTimer = (date) => {
+	const minutes = date.getUTCMinutes().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: Date): string => {
 * @param {Date} date The date
 * @return {string}
 */
-export const formatEpisodeTimestamp = (date: Date): string => {
+export const formatEpisodeTimestamp = (date) => {
 	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: Date): string => {
 * @param {Date} date The date
 * @return {string}
 */
-export const formatLocaleDate = (date: Date): string =>
+export const formatLocaleDate = (date) =>
 	date.toLocaleDateString(undefined, { dateStyle: 'medium' })

 /**
@ -44,23 +44,10 @@ export const formatLocaleDate = (date: Date): string =>
 * @param {string} duration The duration feed's entry
 * @return {number}
 */
-export const durationToSeconds = (duration: string): number => {
+export const durationToSeconds = (duration) => {
 	const splitDuration = duration.split(':').reverse()
 	let seconds = parseInt(splitDuration[0])
 	seconds += splitDuration.length > 1 ? parseInt(splitDuration[1]) * 60 : 0
 	seconds += splitDuration.length > 2 ? parseInt(splitDuration[2]) * 60 * 60 : 0
 	return seconds
 }
-
-/**
- * Convert splitted time to seconds
- * @param {number} hours The number of seconds
- * @param {number} minutes The number of seconds
- * @param {number} seconds The number of seconds
- * @return {number}
- */
-export const timeToSeconds = (
-	hours: number,
-	minutes: number,
-	seconds: number,
-): number => hours * 3600 + minutes * 60 + seconds
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@ -1,14 +0,0 @@
-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)')
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@ -1,73 +0,0 @@
-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
-}
--- a/src/utils/url.js
+++ b/src/utils/url.js
@ -0,0 +1,3 @@
+export const encodeUrl = (url) => encodeURIComponent(btoa(url))
+export const decodeUrl = (url) => atob(decodeURIComponent(url))
+export const toUrl = (url) => `/${encodeUrl(url)}`
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@ -1,5 +0,0 @@
-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()
--- a/src/views/Discover.vue
+++ b/src/views/Discover.vue
@ -1,9 +1,7 @@
 <template>
-	<AppContent class="padding">
-		<NcTextField v-model="search" :label="t('repod', 'Find a podcast')">
-			<template #icon>
-				<Magnify :size="20" />
-			</template>
+	<AppContent class="main">
+		<NcTextField :label="t('repod', 'Find a podcast')" :value.sync="search">
+			<Magnify :size="20" />
 		</NcTextField>
 		<Search v-if="search" :value="search" />
 		<Toplist v-if="!search" type="hot" />
@ -12,14 +10,13 @@
 	</AppContent>
 </template>

-<script lang="ts">
+<script>
 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',
@ -31,17 +28,16 @@ export default {
 		Search,
 		Toplist,
 	},
-	data: () => ({
-		search: '',
-	}),
-	methods: {
-		t,
+	data() {
+		return {
+			search: '',
+		}
 	},
 }
 </script>

 <style scoped>
-.padding {
+.main {
 	padding: 15px 51px;
 }
 </style>
--- a/src/views/Feed.vue
+++ b/src/views/Feed.vue
@ -1,28 +1,35 @@
 <template>
 	<AppContent>
 		<Loading v-if="loading" />
-		<EmptyContent v-if="failed" :name="t('repod', 'Error loading feed')">
+		<NcEmptyContent
+			v-if="failed"
+			class="error"
+			:name="t('repod', 'Error loading feed')">
 			<template #icon>
 				<Alert />
 			</template>
-		</EmptyContent>
-		<Banner v-if="feed" :feed="feed" />
+		</NcEmptyContent>
+		<Banner
+			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 lang="ts">
+<script>
 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 type { PodcastDataInterface } from '../utils/types.ts'
+import { NcEmptyContent } from '@nextcloud/vue'
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../utils/url.ts'
+import { decodeUrl } from '../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
-import { t } from '@nextcloud/l10n'

 export default {
 	name: 'Feed',
@ -30,24 +37,25 @@ 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 as string)
+			return decodeUrl(this.$route.params.url)
 		},
 	},
 	async mounted() {
 		try {
-			this.loading = true
-			const podcastData = await axios.get<PodcastDataInterface>(
+			const podcastData = await axios.get(
 				generateUrl('/apps/repod/podcast?url={url}', { url: this.url }),
 			)
 			this.feed = podcastData.data
@ -58,8 +66,11 @@ export default {
 			this.loading = false
 		}
 	},
-	methods: {
-		t,
-	},
 }
 </script>
+
+<style scoped>
+.error {
+	margin: 2rem;
+}
+</style>
--- a/src/views/GPodder.vue
+++ b/src/views/GPodder.vue
@ -1,6 +1,6 @@
 <template>
-	<AppContent>
-		<EmptyContent :name="t('repod', 'Missing required app')">
+	<NcAppContent class="content">
+		<NcEmptyContent :name="t('repod', 'Missing required app')">
 			<template #action>
 				<NcButton :href="gPodderSyncUrl">
 					{{ t('repod', 'Install GPodder Sync') }}
@ -9,33 +9,27 @@
 			<template #icon>
 				<Alert />
 			</template>
-		</EmptyContent>
-	</AppContent>
+		</NcEmptyContent>
+	</NcAppContent>
 </template>

-<script lang="ts">
+<script>
+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,
-		AppContent,
-		EmptyContent,
+		NcAppContent,
 		NcButton,
+		NcEmptyContent,
 	},
 	computed: {
 		gPodderSyncUrl() {
 			return generateUrl('/settings/apps/installed/gpoddersync')
 		},
 	},
-	methods: {
-		t,
-	},
 }
 </script>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,55 +0,0 @@
-<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>
--- a/stubs/OCA/GPodderSync/Core/EpisodeAction/EpisodeActionReader.php
+++ b/stubs/OCA/GPodderSync/Core/EpisodeAction/EpisodeActionReader.php
@ -7,10 +7,8 @@ namespace OCA\GPodderSync\Core\EpisodeAction;
 class EpisodeActionReader
 {
 	/**
-	 * @param array $episodeActionsArray []
-	 *
+	 * @param  array                     $episodeActionsArray []
 	 * @return EpisodeAction[]
-	 *
 	 * @throws \InvalidArgumentException
 	 */
 	public function fromArray(array $episodeActionsArray) {}
--- a/stubs/OCA/GPodderSync/Core/PodcastData/PodcastData.php
+++ b/stubs/OCA/GPodderSync/Core/PodcastData/PodcastData.php
@ -29,8 +29,7 @@ class PodcastData implements \JsonSerializable

 	/**
 	 * @return PodcastData
-	 *
-	 * @throws \Exception if the XML data could not be parsed
+	 * @throws \Exception  if the XML data could not be parsed
 	 */
 	public static function parseRssXml(string $xmlString, ?int $fetchedAtUnix = null) {}

@ -82,8 +81,7 @@ class PodcastData implements \JsonSerializable
 	public function jsonSerialize(): mixed {}

 	/**
-	 * @param PodcastDataType $data
-	 *
+	 * @param  PodcastDataType $data
 	 * @return PodcastData
 	 */
 	public static function fromArray(array $data) {}
--- a/Show More
+++ b/Show More