diff --git a/index.html b/index.html
index e0d4b81..0f7dc7d 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
                     // Transform available levels into an array of integers (height values).
                     const availableQualities = hls.levels.map((l) => l.height);
                     availableQualities.unshift(0);
+                    app.ports.nowHasQualities.send(availableQualities);
                 });
 
                 hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
diff --git a/src/Main.elm b/src/Main.elm
index 44f7fc9..61c9269 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -20,7 +20,7 @@ main =
         { init = \_ _ _ -> init
         , update = update
         , view = view
-        , subscriptions = \_ -> Sub.none
+        , subscriptions = \_ -> nowHasQualities NowHasQualities
         , onUrlChange = \_ -> Noop
         , onUrlRequest = \_ -> Noop
         }
@@ -35,6 +35,7 @@ type alias Model =
     , volume : Float
     , muted : Bool
     , isFullscreen : Bool
+    , qualities : List Int
     }
 
 
@@ -51,6 +52,7 @@ type Msg
     | NowAtVolume Float Bool
     | NowLoaded (List ( Float, Float ))
     | NowIsFullscreen Bool
+    | NowHasQualities (List Int)
 
 
 init : ( Model, Cmd Msg )
@@ -64,6 +66,7 @@ init =
         1.0
         False
         False
+        []
     , initVideo ()
     )
 
@@ -107,6 +110,9 @@ update msg model =
         NowIsFullscreen fullscreen ->
             ( { model | isFullscreen = fullscreen }, Cmd.none )
 
+        NowHasQualities qualities ->
+            ( { model | qualities = qualities }, Cmd.none )
+
 
 view : Model -> Browser.Document Msg
 view model =
@@ -400,3 +406,6 @@ port requestFullscreen : () -> Cmd msg
 
 
 port exitFullscreen : () -> Cmd msg
+
+
+port nowHasQualities : (List Int -> msg) -> Sub msg