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

Fix WebSocket protocol detecton under HTTPS

Dockerfile

@@ -17,8 +17,8 @@ RUN npm run build
 WORKDIR /usr/src/yt-dlp-webui
 RUN go build -o yt-dlp-webui
 
-
+# but here yes :)
-FROM alpine:3.17
+FROM alpine:edge
 
 WORKDIR /downloads
 VOLUME /downloads

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