diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 88a15aca..a1bab30d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,18 +1,18 @@ name: Build and Lint on: - pull_request: - push: + pull_request: + push: jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2.4.0 - - name: Setup Node.js - uses: actions/setup-node@v2.5.1 - with: - cache: "yarn" - - run: yarn install --prefer-offline - - run: yarn build - - run: yarn lint --no-fix + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2.4.0 + - name: Setup Node.js + uses: actions/setup-node@v2.5.1 + with: + cache: "yarn" + - run: yarn install --prefer-offline + - run: yarn build + - run: yarn lint --no-fix diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml index a122deb9..2d1ef523 100644 --- a/.github/workflows/docker-build.yml +++ b/.github/workflows/docker-build.yml @@ -1,38 +1,38 @@ name: Docker Multi-Architecture Build on: - push: - paths-ignore: - - "**.md" - branches: - - master + push: + paths-ignore: + - "**.md" + branches: + - master jobs: - build-docker-image: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2.4.0 - with: - fetch-depth: 0 - - name: Set up QEMU - uses: docker/setup-qemu-action@v1.2.0 - with: - platforms: all - - name: Set up Docker Buildx - id: buildx - uses: docker/setup-buildx-action@v1.6.0 - with: - version: latest - - name: Login to DockerHub - uses: docker/login-action@v1.12.0 - with: - username: ${{ secrets.DOCKER_USERNAME }} - password: ${{ secrets.DOCKER_PASSWORD }} - - name: Build and push - uses: docker/build-push-action@v2.7.0 - with: - context: . - file: ./Dockerfile - platforms: linux/amd64,linux/arm64 - push: true - tags: 1337kavin/piped-frontend:latest + build-docker-image: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2.4.0 + with: + fetch-depth: 0 + - name: Set up QEMU + uses: docker/setup-qemu-action@v1.2.0 + with: + platforms: all + - name: Set up Docker Buildx + id: buildx + uses: docker/setup-buildx-action@v1.6.0 + with: + version: latest + - name: Login to DockerHub + uses: docker/login-action@v1.12.0 + with: + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} + - name: Build and push + uses: docker/build-push-action@v2.7.0 + with: + context: . + file: ./Dockerfile + platforms: linux/amd64,linux/arm64 + push: true + tags: 1337kavin/piped-frontend:latest diff --git a/.github/workflows/build.yml b/.github/workflows/ipfs-build.yml similarity index 93% rename from .github/workflows/build.yml rename to .github/workflows/ipfs-build.yml index 5ed2a109..d39576d9 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/ipfs-build.yml @@ -15,9 +15,9 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v2.5.1 with: - cache: 'yarn' + cache: "yarn" - run: yarn install --prefer-offline - - run: yarn build && sed -i 's/fonts.gstatic.com/fonts.kavin.rocks/g' dist/css/*.css + - run: yarn build && sed -i 's/fonts.gstatic.com/fonts.kavin.rocks/g' dist/assets/*.css - uses: aquiladev/ipfs-action@v0.1.6 id: ipfs-add with: diff --git a/Dockerfile b/Dockerfile index 8150f771..b7889ded 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,7 +8,7 @@ RUN yarn install --prefer-offline COPY . . -RUN yarn build && sed -i 's/fonts.gstatic.com/fonts.kavin.rocks/g' dist/css/*.css +RUN yarn build && sed -i 's/fonts.gstatic.com/fonts.kavin.rocks/g' dist/assets/*.css FROM nginx:alpine diff --git a/index.html b/index.html new file mode 100644 index 00000000..8e22d715 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + Piped + + + + + + + + +
+ + diff --git a/package.json b/package.json index c47bc284..b5a13eb7 100644 --- a/package.json +++ b/package.json @@ -3,42 +3,42 @@ "version": "0.1.0", "private": true, "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "serve": "vite", + "build": "vite build", + "preview": "vite preview", + "lint": "eslint --fix --color --ignore-path .gitignore --ext .js,.vue ." }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/vue-fontawesome": "^3.0.0-5", - "core-js": "3.20.1", - "css-loader": "^6.5.1", + "buffer": "^6.0.3", "dompurify": "^2.3.4", "hotkeys-js": "^3.8.7", "javascript-time-ago": "^2.3.10", "mux.js": "^6.0.1", - "register-service-worker": "^1.7.1", "shaka-player": "3.3.0", - "uikit": "3.9.4", + "stream": "^0.0.2", "vue": "^3.2.26", "vue-i18n": "^9.2.0-beta.25", "vue-router": "^4.0.12", "xml-js": "^1.6.11" }, "devDependencies": { - "@intlify/vue-i18n-loader": "^4.1.0", - "@vue/cli-plugin-babel": "^4.5.15", - "@vue/cli-plugin-eslint": "^4.5.15", - "@vue/cli-plugin-pwa": "^4.5.15", - "@vue/cli-service": "^4.5.15", + "@intlify/vite-plugin-vue-i18n": "^3.2.1", + "@vitejs/plugin-vue": "^2.0.1", "@vue/compiler-sfc": "3.2.26", "babel-eslint": "^10.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^7.20.0", - "vue-cli-plugin-i18n": "^2.3.1" + "prettier": "^2.5.1", + "vite": "^2.7.9", + "vite-plugin-eslint": "^1.3.0", + "vite-plugin-pwa": "^0.11.12", + "vite-plugin-windicss": "^1.6.1" }, "eslintConfig": { "root": true, diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 48498aed..00000000 --- a/public/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - <%= htmlWebpackPlugin.options.title %> - - - - - - - - -
- - - diff --git a/src/App.vue b/src/App.vue index a5fa1e81..e0c339a7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,9 +1,5 @@ - - diff --git a/src/components/Player.vue b/src/components/Player.vue index 6696f8a5..f33a2e55 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -1,18 +1,12 @@ @@ -81,103 +75,103 @@ export default { .then(hotkeys => { this.hotkeys = hotkeys; var self = this; - hotkeys("f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.", function( - e, - handler, - ) { - const videoEl = self.$refs.videoEl; - console.log(handler.key); - switch (handler.key) { - case "f": - self.$ui.getControls().toggleFullScreen(); - e.preventDefault(); - break; - case "m": - videoEl.muted = !videoEl.muted; - e.preventDefault(); - break; - case "j": - videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0); - e.preventDefault(); - break; - case "l": - videoEl.currentTime = videoEl.currentTime + 15; - e.preventDefault(); - break; - case "c": - self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible()); - e.preventDefault(); - break; - case "k": - case "space": - if (videoEl.paused) videoEl.play(); - else videoEl.pause(); - e.preventDefault(); - break; - case "up": - videoEl.volume = Math.min(videoEl.volume + 0.05, 1); - e.preventDefault(); - break; - case "down": - videoEl.volume = Math.max(videoEl.volume - 0.05, 0); - e.preventDefault(); - break; - case "left": - videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0); - e.preventDefault(); - break; - case "right": - videoEl.currentTime = videoEl.currentTime + 5; - e.preventDefault(); - break; - case "0": - videoEl.currentTime = 0; - e.preventDefault(); - break; - case "1": - videoEl.currentTime = videoEl.duration * 0.1; - e.preventDefault(); - break; - case "2": - videoEl.currentTime = videoEl.duration * 0.2; - e.preventDefault(); - break; - case "3": - videoEl.currentTime = videoEl.duration * 0.3; - e.preventDefault(); - break; - case "4": - videoEl.currentTime = videoEl.duration * 0.4; - e.preventDefault(); - break; - case "5": - videoEl.currentTime = videoEl.duration * 0.5; - e.preventDefault(); - break; - case "6": - videoEl.currentTime = videoEl.duration * 0.6; - e.preventDefault(); - break; - case "7": - videoEl.currentTime = videoEl.duration * 0.7; - e.preventDefault(); - break; - case "8": - videoEl.currentTime = videoEl.duration * 0.8; - e.preventDefault(); - break; - case "9": - videoEl.currentTime = videoEl.duration * 0.9; - e.preventDefault(); - break; - case "shift+,": - self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25)); - break; - case "shift+.": - self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2)); - break; - } - }); + hotkeys( + "f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.", + function (e, handler) { + const videoEl = self.$refs.videoEl; + console.log(handler.key); + switch (handler.key) { + case "f": + self.$ui.getControls().toggleFullScreen(); + e.preventDefault(); + break; + case "m": + videoEl.muted = !videoEl.muted; + e.preventDefault(); + break; + case "j": + videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0); + e.preventDefault(); + break; + case "l": + videoEl.currentTime = videoEl.currentTime + 15; + e.preventDefault(); + break; + case "c": + self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible()); + e.preventDefault(); + break; + case "k": + case "space": + if (videoEl.paused) videoEl.play(); + else videoEl.pause(); + e.preventDefault(); + break; + case "up": + videoEl.volume = Math.min(videoEl.volume + 0.05, 1); + e.preventDefault(); + break; + case "down": + videoEl.volume = Math.max(videoEl.volume - 0.05, 0); + e.preventDefault(); + break; + case "left": + videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0); + e.preventDefault(); + break; + case "right": + videoEl.currentTime = videoEl.currentTime + 5; + e.preventDefault(); + break; + case "0": + videoEl.currentTime = 0; + e.preventDefault(); + break; + case "1": + videoEl.currentTime = videoEl.duration * 0.1; + e.preventDefault(); + break; + case "2": + videoEl.currentTime = videoEl.duration * 0.2; + e.preventDefault(); + break; + case "3": + videoEl.currentTime = videoEl.duration * 0.3; + e.preventDefault(); + break; + case "4": + videoEl.currentTime = videoEl.duration * 0.4; + e.preventDefault(); + break; + case "5": + videoEl.currentTime = videoEl.duration * 0.5; + e.preventDefault(); + break; + case "6": + videoEl.currentTime = videoEl.duration * 0.6; + e.preventDefault(); + break; + case "7": + videoEl.currentTime = videoEl.duration * 0.7; + e.preventDefault(); + break; + case "8": + videoEl.currentTime = videoEl.duration * 0.8; + e.preventDefault(); + break; + case "9": + videoEl.currentTime = videoEl.duration * 0.9; + e.preventDefault(); + break; + case "shift+,": + self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25)); + break; + case "shift+.": + self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2)); + break; + } + }, + ); }); }, deactivated() { @@ -194,12 +188,30 @@ export default { videoEl.setAttribute("poster", this.video.thumbnailUrl); if (this.$route.query.t) { - videoEl.currentTime = this.$route.query.t; + const time = this.$route.query.t; + let start = 0; + if (/^[\d]*$/g.test(time)) { + start = time; + } else { + const hours = /([\d]*)h/gi.exec(time)?.[1]; + const minutes = /([\d]*)m/gi.exec(time)?.[1]; + const seconds = /([\d]*)s/gi.exec(time)?.[1]; + if (hours) { + start += parseInt(hours) * 60 * 60; + } + if (minutes) { + start += parseInt(minutes) * 60; + } + if (seconds) { + start += parseInt(seconds); + } + } + videoEl.currentTime = start; } else if (window.db) { var tx = window.db.transaction("watch_history", "readonly"); var store = tx.objectStore("watch_history"); var request = store.get(this.video.id); - request.onsuccess = function(event) { + request.onsuccess = function (event) { var video = event.target.result; if (video && video.currentTime) { videoEl.currentTime = video.currentTime; @@ -228,10 +240,9 @@ export default { mime = "application/x-mpegURL"; } else if (this.video.audioStreams.length > 0 && !lbry && MseSupport) { if (!this.video.dash) { - const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats( - streams, - this.video.duration, - ); + const dash = ( + await import("@/utils/DashUtils.js").then(mod => mod.default) + ).generate_dash_file_from_formats(streams, this.video.duration); uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash); } else uri = this.video.dash; @@ -484,7 +495,7 @@ export default { var tx = window.db.transaction("watch_history", "readwrite"); var store = tx.objectStore("watch_history"); var request = store.get(this.video.id); - request.onsuccess = function(event) { + request.onsuccess = function (event) { var video = event.target.result; if (video) { video.currentTime = time; diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue index 4622bde1..ad714bd0 100644 --- a/src/components/Playlist.vue +++ b/src/components/Playlist.vue @@ -2,34 +2,36 @@
-

- - {{ playlist.name }} -

+

- - - {{ playlist.uploader }} - -
- {{ playlist.videos }} {{ $t("video.videos") }} -
- +
+
+ + + + +
+
+
+ +
+ + + +
+
-
-
+ - -
+ :video="video" + height="94" + width="168" + />
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue index 08629529..8de22e04 100644 --- a/src/components/Preferences.vue +++ b/src/components/Preferences.vue @@ -1,205 +1,169 @@ @@ -326,7 +281,14 @@ export default { this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true); if (localStorage.getItem("selectedSkip") !== null) { var skipList = localStorage.getItem("selectedSkip").split(","); - this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false; + this.skipSponsor = + this.skipIntro = + this.skipOutro = + this.skipPreview = + this.skipInteraction = + this.skipSelfPromo = + this.skipMusicOffTopic = + false; skipList.forEach(skip => { switch (skip) { case "sponsor": @@ -373,10 +335,8 @@ export default { this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false); if (this.selectedLanguage != "en") { try { - this.CountryMap = await import("@/utils/CountryMaps/" + this.selectedLanguage + ".json").then( - val => { - this.countryMap = val; - }, + this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then( + val => val.default, ); } catch (e) { console.error("Countries not translated into " + this.selectedLanguage); diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue index 074cea56..4642e472 100644 --- a/src/components/RegisterPage.vue +++ b/src/components/RegisterPage.vue @@ -1,30 +1,28 @@