Merge pull request #37 from cnbeining/fix-websocket-wss

Fix WebSocket protocol detecton under HTTPS

.github/workflows/docker-image.yml

@@ -22,6 +22,5 @@ jobs:
       with:
         version: latest
     - name: Build the Docker image
-      run: docker buildx build . --file Dockerfile --tag ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest --platform linux/amd64,linux/arm/v7,linux/arm64
+      run: docker buildx build . --file Dockerfile --tag ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest --push --platform linux/amd64,linux/arm/v7,linux/arm64
-    - name: Publish the Docker image
+
-      run: docker push ${{secrets.DOCKER_HUB_USERNAME}}/yt-dlp-webui:latest

.github/workflows/docker-publish.yml

@@ -1,4 +1,4 @@
-name: Docker
+name: Docker (ghcr.io)
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by
@@ -6,14 +6,13 @@ name: Docker
 # documentation.
 
 on:
-#  schedule:
-#    - cron: '39 13 * * *'
   release:
     branches: [ master ]
-    # Publish semver tags as releases.
     tags: [ 'v*.*.*' ]
-#  pull_request:
+  push:
-#    branches: [ master ]
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
 
 env:
   # Use docker.io for Docker Hub if empty

Dockerfile

@@ -6,24 +6,30 @@ FROM alpine:3.17 AS build
 WORKDIR /usr/src/yt-dlp-webui
 # install core dependencies
 RUN apk update && \
-    apk add curl wget psmisc ffmpeg nodejs yarn go yt-dlp
+    apk add nodejs npm go
 # copia la salsa
 COPY . .
 # build frontend
 WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN yarn install && \
+RUN npm install
-    yarn build
+RUN npm run build
 # build backend + incubator
 WORKDIR /usr/src/yt-dlp-webui
 RUN go build -o yt-dlp-webui
 
+# but here yes :)
+FROM alpine:edge
 
-FROM alpine:3.17
+WORKDIR /downloads
-
-WORKDIR /usr/src/yt-dlp-webui/downloads
 VOLUME /downloads
 
-COPY --from=build /usr/src/yt-dlp-webui /usr/bin/yt-dlp-webui
+WORKDIR /app
+
+RUN apk update && \
+    apk add psmisc ffmpeg yt-dlp
+
+COPY --from=build /usr/src/yt-dlp-webui /app
+RUN chmod +x /app/yt-dlp-webui
 
 EXPOSE 3033
-CMD [ "/usr/bin/yt-dlp-webui" , "--out", "/downloads" ]
+CMD [ "./yt-dlp-webui" , "--out", "/downloads" ]

README.md

@@ -9,8 +9,11 @@ Developed to be as lightweight as possible (because my server is basically an in
 
 The bottleneck remains yt-dlp startup time.
 
-**I strongly recomend the ghcr build instead of docker hub one.**
+**Docker images are available on [Docker Hub](https://hub.docker.com/r/marcobaobao/yt-dlp-webui) or [ghcr.io](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui)**.
 
+```sh
+docker pull marcobaobao/yt-dlp-webui:latest
+```
 ```sh
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
@@ -86,6 +89,8 @@ Future releases will have:
 ```sh
 # recomended for ARM and x86 devices 
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
+# or
+# docker pull marcobaobao/yt-dlp-webui:latest
 docker run -d -p 3033:3033 -v <your dir>:/downloads ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 
 # or even

frontend/src/Home.tsx

@@ -335,7 +335,7 @@ export default function Home({ socket }: Props) {
                   disabled={url === ''}
                   onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
                 >
-                  {i18n.t('startButton')}
+                  {settings.formatSelection ? i18n.t('selectFormatButton') : i18n.t('startButton')}
                 </Button>
               </Grid>
               <Grid item>
@@ -387,6 +387,7 @@ export default function Home({ socket }: Props) {
                       setPickedAudioFormat('')
                     }}>
                     {downloadFormats.best.format_note || downloadFormats.best.format_id} - {downloadFormats.best.vcodec}+{downloadFormats.best.acodec}
+                    &nbsp;({downloadFormats.best.resolution}{(downloadFormats.best.filesize_approx>0)?", ~"+Math.round(downloadFormats.best.filesize_approx/1024/1024)+" MiB":""})
                   </Button>
                 </Grid>
                 {/* video only */}
@@ -411,6 +412,7 @@ export default function Home({ socket }: Props) {
                         disabled={pickedVideoFormat === format.format_id}
                       >
                         {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                        &nbsp;({format.resolution}{(format.filesize_approx>0)?", ~"+Math.round(format.filesize_approx/1024/1024)+" MiB":""})
                       </Button>
                     </Grid>
                   ))
@@ -436,6 +438,7 @@ export default function Home({ socket }: Props) {
                         disabled={pickedAudioFormat === format.format_id}
                       >
                         {format.format_note} - {format.vcodec === 'none' ? format.acodec : format.vcodec}
+                        {(format.filesize_approx>0)?" (~"+Math.round(format.filesize_approx/1024/1024)+" MiB)":""}
                       </Button>
                     </Grid>
                   ))

frontend/src/assets/i18n.yaml

@@ -4,6 +4,7 @@ languages:
     urlInput: YouTube or other supported service video URL
     statusTitle: Status
     statusReady: Ready
+    selectFormatButton: Select format
     startButton: Start
     abortAllButton: Abort All
     updateBinButton: Update yt-dlp binary

frontend/src/types.d.ts

@@ -59,4 +59,5 @@ export interface IDLFormat {
   resolution: string,
   vcodec: string,
   acodec: string,
+  filesize_approx: number,
 }

frontend/src/utils.ts

@@ -74,7 +74,8 @@ export function toFormatArgs(codes: string[]): string {
 }
 
 export function getWebSocketEndpoint() {
-    return `ws://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/ws-rpc`
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+    return `${protocol}://${localStorage.getItem('server-addr') || window.location.hostname}:${localStorage.getItem('server-port') || window.location.port}/ws-rpc`
 }
 
 export function getHttpRPCEndpoint() {

server/types.go

@@ -36,6 +36,7 @@ type Format struct {
 	Resolution  string  `json:"resolution"`
 	VCodec      string  `json:"vcodec"`
 	ACodec      string  `json:"acodec"`
+	Size        float32 `json:"filesize_approx"`
 }
 
 // struct representing the response sent to the client