Make player animations smoother (#720)

SRGSSR · Jan 6, 2024 · f28eac7 · f28eac7
1 parent 4c04c49
commit f28eac7
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 28 deletions.
diff --git a/Demo/Sources/Players/PlaybackView.swift b/Demo/Sources/Players/PlaybackView.swift
@@ -120,7 +120,7 @@ private struct MainView: View {
                     .supportsPictureInPicture(supportsPictureInPicture)
             }
         }
-        .animation(.easeInOut(duration: 0.2), values: player.mediaType, player.isExternalPlaybackActive)
+        .animation(.easeIn(duration: 0.2), values: player.mediaType, player.isExternalPlaybackActive)
     }
 
     @ViewBuilder
@@ -478,15 +478,11 @@ private struct PlaybackButton: View {
         if player.canReplay() {
             return "arrow.counterclockwise.circle.fill"
         }
+        else if player.rate == 0 {
+            return "play.circle.fill"
+        }
         else {
-            switch player.playbackState {
-            case .playing:
-                return "pause.circle.fill"
-            case .paused:
-                return "play.circle.fill"
-            default:
-                return nil
-            }
+            return "pause.circle.fill"
         }
     }
 

diff --git a/Demo/Sources/Players/SimplePlayerView.swift b/Demo/Sources/Players/SimplePlayerView.swift
@@ -37,7 +37,7 @@ struct SimplePlayerView: View {
     @ViewBuilder
     private func playbackButton() -> some View {
         Button(action: player.togglePlayPause) {
-            Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+            Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 50)

diff --git a/Demo/Sources/Showcase/Multi/SingleView.swift b/Demo/Sources/Showcase/Multi/SingleView.swift
@@ -44,7 +44,7 @@ struct SingleView: View {
     @ViewBuilder
     private func playbackButton(player: Player) -> some View {
         Button(action: player.togglePlayPause) {
-            Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+            Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 50)

diff --git a/README.md b/README.md
@@ -54,20 +54,11 @@ struct PlayerView: View {
         item: .simple(url: URL(string: "https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8")!)
     )
 
-    private var buttonImage: String {
-        switch player.playbackState {
-        case .playing:
-            return "pause.circle.fill"
-        default:
-            return "play.circle.fill"
-        }
-    }
-
     var body: some View {
         ZStack {
             VideoView(player: player)
             Button(action: player.togglePlayPause) {
-                Image(systemName: buttonImage)
+                Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                     .resizable()
                     .frame(width: 80, height: 80)
             }

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-1-6.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-1-6.swift
@@ -10,7 +10,7 @@ struct ContentView: View {
         ZStack {
             VideoView(player: player)
             Button(action: player.togglePlayPause) {
-                Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                     .resizable()
                     .aspectRatio(contentMode: .fit)
                     .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-1.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-1.swift
@@ -11,7 +11,7 @@ struct ContentView: View {
             VideoView(player: player)
             HStack(spacing: 20) {
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-2.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-2.swift
@@ -17,7 +17,7 @@ struct ContentView: View {
                         .frame(width: 30)
                 }
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-3.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-3.swift
@@ -17,7 +17,7 @@ struct ContentView: View {
                         .frame(width: 30)
                 }
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-4.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-4.swift
@@ -17,7 +17,7 @@ struct ContentView: View {
                         .frame(width: 30)
                 }
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-5.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-5.swift
@@ -18,7 +18,7 @@ struct ContentView: View {
                         .frame(width: 30)
                 }
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)

diff --git a/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-6.swift b/...ayer.docc/Tutorials/creating-basic-user-interface/creating-basic-user-interface-2-6.swift
@@ -18,7 +18,7 @@ struct ContentView: View {
                         .frame(width: 30)
                 }
                 Button(action: player.togglePlayPause) {
-                    Image(systemName: player.playbackState == .playing ? "pause.circle.fill" : "play.circle.fill")
+                    Image(systemName: player.rate == 0 ? "play.circle.fill" : "pause.circle.fill")
                         .resizable()
                         .aspectRatio(contentMode: .fit)
                         .frame(width: 50)