Better UI Changes (#594)

* Better UI Changes * Update ci.yml * Feature/july changes (#598) * Fixed play after seeking issue on iOS * Fixed audio track selection issue on iOS/Android * Fixed issue where speed which couldn't be applied on iOS was saved in player state. * Added support for D-pad navigation using a Android TV remote control (#586) * Exposes all active eventListener (#585) * Updated changelog * Added docs * Updated documentation * Updated documentation * Added BetterPlayerMultipleGestureDetector, general refactor * General refactor Co-authored-by: Daniel Zarins <74965667+danielz-nenda@users.noreply.github.com> Co-authored-by: Letalus <41230136+Letalus@users.noreply.github.com> * Updated docs * Updated docs * Updated docs * Updated docs * fixed conflicts * Duplicated named argument 'onLongPress' removed * Better UI Changes * Feature/july changes (#598) * Fixed play after seeking issue on iOS * Fixed audio track selection issue on iOS/Android * Fixed issue where speed which couldn't be applied on iOS was saved in player state. * Added support for D-pad navigation using a Android TV remote control (#586) * Exposes all active eventListener (#585) * Updated changelog * Added docs * Updated documentation * Updated documentation * Added BetterPlayerMultipleGestureDetector, general refactor * General refactor Co-authored-by: Daniel Zarins <74965667+danielz-nenda@users.noreply.github.com> Co-authored-by: Letalus <41230136+Letalus@users.noreply.github.com> * fixed conflicts Co-authored-by: Jakub <jhomlala@gmail.com> Co-authored-by: Daniel Zarins <74965667+danielz-nenda@users.noreply.github.com> Co-authored-by: Letalus <41230136+Letalus@users.noreply.github.com>
jhomlala · Aug 15, 2021 · c55358e · c55358e
1 parent 45eb10d
commit c55358e
Show file tree

Hide file tree

Showing 9 changed files with 455 additions and 218 deletions.
diff --git a/docs/media/logo.png b/docs/media/logo.png
diff --git a/docs/media/style.css b/docs/media/style.css
@@ -0,0 +1,53 @@
+
+body .app-nav {
+  color: #34495e !important;
+}
+.cover {
+  color: #34495e !important;
+}
+
+.cover #better-player .anchor span {
+    color: #34495e !important;
+}
+
+section.cover {
+  min-height: 100vh;
+  height: auto !important;
+  padding: 2em 0.5em;
+}
+
+section.cover .cover-main {
+  z-index: 0;
+}
+
+section.cover .cover-main > .buttons a {
+  border-radius: 2rem;
+  border: 1px solid var(--theme-color, #42b983);
+  box-sizing: border-box;
+  color: var(--theme-color, #42b983);
+  display: inline-block;
+  font-size: 1.05rem;
+  letter-spacing: 0.1rem;
+  margin: 0.5rem 1rem;
+  padding: 0.75em 2rem;
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+section.cover .cover-main > .buttons a:last-child {
+  background-color: var(--theme-color, #42b983);
+  color: #fff;
+}
+section.cover .cover-main > .buttons a:last-child:hover {
+  color: inherit;
+  opacity: 0.8;
+}
+section.cover .cover-main > .buttons a:hover {
+  color: inherit;
+}
+section.cover blockquote > .buttons > a {
+  border-bottom: 2px solid var(--theme-color, #42b983);
+  transition: color 0.3s;
+}
+section.cover blockquote > .buttons > a:hover {
+  color: var(--theme-color, #42b983);
+}
diff --git a/example/lib/pages/hls_subtitles_page.dart b/example/lib/pages/hls_subtitles_page.dart
@@ -12,10 +12,42 @@ class _HlsSubtitlesPageState extends State<HlsSubtitlesPage> {
 
   @override
   void initState() {
+    BetterPlayerControlsConfiguration controlsConfiguration =
+    BetterPlayerControlsConfiguration(
+      controlBarColor: Colors.black26,
+      iconsColor: Colors.white,
+      playIcon: Icons.play_arrow_outlined,
+      progressBarPlayedColor: Colors.indigo,
+      progressBarHandleColor: Colors.indigo,
+      skipBackIcon: Icons.replay_10_outlined,
+      skipForwardIcon: Icons.forward_10_outlined,
+      backwardSkipTimeInMilliseconds: 10000,
+      forwardSkipTimeInMilliseconds: 10000,
+      enableSkips: true,
+      enableFullscreen: true,
+      enablePip: true,
+      enablePlayPause: true,
+      enableMute: true,
+      enableAudioTracks: true,
+      enableProgressText: true,
+      enableSubtitles: true,
+      showControlsOnInitialize: true,
+      enablePlaybackSpeed: true,
+      controlBarHeight: 40,
+      loadingColor: Colors.red,
+      overflowModalColor: Colors.black54,
+      overflowModalTextColor: Colors.white,
+      overflowMenuIconsColor: Colors.white,
+    );
+
     BetterPlayerConfiguration betterPlayerConfiguration =
         BetterPlayerConfiguration(
+          controlsConfiguration: controlsConfiguration,
       aspectRatio: 16 / 9,
       fit: BoxFit.contain,
+            subtitlesConfiguration: BetterPlayerSubtitlesConfiguration(
+              fontSize: 16.0,
+            )
     );
     BetterPlayerDataSource dataSource = BetterPlayerDataSource(
         BetterPlayerDataSourceType.network, Constants.hlsPlaylistUrl,
@@ -31,22 +63,24 @@ class _HlsSubtitlesPageState extends State<HlsSubtitlesPage> {
       appBar: AppBar(
         title: Text("HLS subtitles"),
       ),
-      body: Column(
-        children: [
-          const SizedBox(height: 8),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16),
-            child: Text(
-              "Player with HLS stream which loads subtitles from HLS."
-              " You can choose subtitles by using overflow menu (3 dots in right corner).",
-              style: TextStyle(fontSize: 16),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            const SizedBox(height: 8),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Text(
+                "Player with HLS stream which loads subtitles from HLS."
+                " You can choose subtitles by using overflow menu (3 dots in right corner).",
+                style: TextStyle(fontSize: 16),
+              ),
+            ),
+            AspectRatio(
+              aspectRatio: 16 / 9,
+              child: BetterPlayer(controller: _betterPlayerController),
             ),
-          ),
-          AspectRatio(
-            aspectRatio: 16 / 9,
-            child: BetterPlayer(controller: _betterPlayerController),
-          ),
-        ],
+          ],
+        ),
       ),
     );
   }

diff --git a/example/lib/pages/playlist_page.dart b/example/lib/pages/playlist_page.dart
@@ -30,7 +30,7 @@ class _PlaylistPageState extends State<PlaylistPage> {
     );
     _betterPlayerPlaylistConfiguration = BetterPlayerPlaylistConfiguration(
       loopVideos: true,
-      nextVideoDelay: Duration(seconds: 1),
+      nextVideoDelay: Duration(seconds: 3),
     );
   }
 

diff --git a/lib/src/configuration/better_player_controls_configuration.dart b/lib/src/configuration/better_player_controls_configuration.dart
@@ -1,4 +1,5 @@
 // Dart imports:
+import 'dart:io';
 import 'dart:ui';
 
 // Flutter imports:
@@ -172,14 +173,14 @@ class BetterPlayerControlsConfiguration {
       {this.controlBarColor = Colors.black87,
       this.textColor = Colors.white,
       this.iconsColor = Colors.white,
-      this.playIcon = Icons.play_arrow,
-      this.pauseIcon = Icons.pause,
-      this.muteIcon = Icons.volume_up,
-      this.unMuteIcon = Icons.volume_mute,
-      this.fullscreenEnableIcon = Icons.fullscreen,
-      this.fullscreenDisableIcon = Icons.fullscreen_exit,
-      this.skipBackIcon = Icons.fast_rewind,
-      this.skipForwardIcon = Icons.fast_forward,
+      this.playIcon = Icons.play_arrow_outlined,
+      this.pauseIcon = Icons.pause_outlined,
+      this.muteIcon = Icons.volume_up_outlined,
+      this.unMuteIcon = Icons.volume_off_outlined,
+      this.fullscreenEnableIcon = Icons.fullscreen_outlined,
+      this.fullscreenDisableIcon = Icons.fullscreen_exit_outlined,
+      this.skipBackIcon = Icons.replay_10_outlined,
+      this.skipForwardIcon = Icons.forward_10_outlined,
       this.enableFullscreen = true,
       this.enableMute = true,
       this.enableProgressText = true,
@@ -206,15 +207,15 @@ class BetterPlayerControlsConfiguration {
       this.enablePip = true,
       this.enableRetry = true,
       this.overflowMenuCustomItems = const [],
-      this.overflowMenuIcon = Icons.more_vert,
-      this.pipMenuIcon = Icons.picture_in_picture,
-      this.playbackSpeedIcon = Icons.shutter_speed,
-      this.qualitiesIcon = Icons.hd,
-      this.subtitlesIcon = Icons.text_fields,
-      this.audioTracksIcon = Icons.audiotrack,
+      this.overflowMenuIcon = Icons.more_vert_outlined,
+      this.pipMenuIcon = Icons.picture_in_picture_outlined,
+      this.playbackSpeedIcon = Icons.shutter_speed_outlined,
+      this.qualitiesIcon = Icons.hd_outlined,
+      this.subtitlesIcon = Icons.closed_caption_outlined,
+      this.audioTracksIcon = Icons.audiotrack_outlined,
       this.overflowMenuIconsColor = Colors.black,
-      this.forwardSkipTimeInMilliseconds = 15000,
-      this.backwardSkipTimeInMilliseconds = 15000,
+      this.forwardSkipTimeInMilliseconds = 10000,
+      this.backwardSkipTimeInMilliseconds = 10000,
       this.loadingColor = Colors.white,
       this.loadingWidget,
       this.backgroundColor = Colors.black,
@@ -234,9 +235,12 @@ class BetterPlayerControlsConfiguration {
 
   factory BetterPlayerControlsConfiguration.cupertino() {
     return const BetterPlayerControlsConfiguration(
-        fullscreenEnableIcon: CupertinoIcons.fullscreen,
-        fullscreenDisableIcon: CupertinoIcons.fullscreen_exit,
-        playIcon: CupertinoIcons.play_arrow_solid,
-        pauseIcon: CupertinoIcons.pause_solid);
+      fullscreenEnableIcon: CupertinoIcons.arrow_up_left_arrow_down_right,
+      fullscreenDisableIcon: CupertinoIcons.arrow_down_right_arrow_up_left,
+      playIcon: CupertinoIcons.play_arrow_solid,
+      pauseIcon: CupertinoIcons.pause_solid,
+      skipBackIcon: CupertinoIcons.gobackward_15,
+      skipForwardIcon: CupertinoIcons.goforward_15,
+    );
   }
 }
diff --git a/lib/src/controls/better_player_controls_state.dart b/lib/src/controls/better_player_controls_state.dart
@@ -1,4 +1,5 @@
 // Dart imports:
+import 'dart:io';
 import 'dart:math';
 
 // Project imports:
@@ -11,6 +12,7 @@ import 'package:better_player/src/video_player/video_player.dart';
 
 // Flutter imports:
 import 'package:collection/collection.dart' show IterableExtension;
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 ///Base class for both material and cupertino controls
@@ -123,6 +125,7 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
         child: Row(
           children: [
+            const SizedBox(width: 8),
             Icon(
               icon,
               color: betterPlayerControlsConfiguration.overflowMenuIconsColor,
@@ -164,6 +167,14 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
         child: Row(
           children: [
+            SizedBox(width: isSelected ? 8 : 16),
+            Visibility(
+                visible: isSelected,
+                child: Icon(
+                  Icons.check_outlined,
+                  color:
+                      betterPlayerControlsConfiguration.overflowModalTextColor,
+                )),
             const SizedBox(width: 16),
             Text(
               "$value x",
@@ -233,6 +244,14 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
         child: Row(
           children: [
+            SizedBox(width: isSelected ? 8 : 16),
+            Visibility(
+                visible: isSelected,
+                child: Icon(
+                  Icons.check_outlined,
+                  color:
+                      betterPlayerControlsConfiguration.overflowModalTextColor,
+                )),
             const SizedBox(width: 16),
             Text(
               subtitlesSource.type == BetterPlayerSubtitlesSourceType.none
@@ -292,8 +311,9 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
     final int height = track.height ?? 0;
     final int bitrate = track.bitrate ?? 0;
     final String mimeType = (track.mimeType ?? '').replaceAll('video/', '');
-    final String trackName = preferredName ??
-        "${width}x$height ${BetterPlayerUtils.formatBitrate(bitrate)} $mimeType";
+    final String trackName =
+        preferredName ?? '${width > height ? height : width}p';
+    /*"${width}x$height ${BetterPlayerUtils.formatBitrate(bitrate)} $mimeType";*/
 
     final BetterPlayerAsmsTrack? selectedTrack =
         betterPlayerController!.betterPlayerAsmsTrack;
@@ -308,6 +328,14 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
         child: Row(
           children: [
+            SizedBox(width: isSelected ? 8 : 16),
+            Visibility(
+                visible: isSelected,
+                child: Icon(
+                  Icons.check_outlined,
+                  color:
+                      betterPlayerControlsConfiguration.overflowModalTextColor,
+                )),
             const SizedBox(width: 16),
             Text(
               trackName,
@@ -331,6 +359,14 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
         child: Row(
           children: [
+            SizedBox(width: isSelected ? 8 : 16),
+            Visibility(
+                visible: isSelected,
+                child: Icon(
+                  Icons.check_outlined,
+                  color:
+                      betterPlayerControlsConfiguration.overflowModalTextColor,
+                )),
             const SizedBox(width: 16),
             Text(
               name,
@@ -382,6 +418,14 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
         child: Row(
           children: [
+            SizedBox(width: isSelected ? 8 : 16),
+            Visibility(
+                visible: isSelected,
+                child: Icon(
+                  Icons.check_outlined,
+                  color:
+                      betterPlayerControlsConfiguration.overflowModalTextColor,
+                )),
             const SizedBox(width: 16),
             Text(
               audioTrack.label!,
@@ -396,20 +440,68 @@ abstract class BetterPlayerControlsState<T extends StatefulWidget>
   TextStyle _getOverflowMenuElementTextStyle(bool isSelected) {
     return TextStyle(
       fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
-      color: betterPlayerControlsConfiguration.overflowModalTextColor,
+      color: isSelected
+          ? betterPlayerControlsConfiguration.overflowModalTextColor
+          : betterPlayerControlsConfiguration.overflowModalTextColor
+              .withOpacity(0.7),
     );
   }
 
   void _showModalBottomSheet(List<Widget> children) {
+    Platform.isAndroid
+        ? _showMaterialBottomSheet(children)
+        : _showCupertinoModalBottomSheet(children);
+  }
+
+  void _showCupertinoModalBottomSheet(List<Widget> children) {
+    showCupertinoModalPopup<void>(
+      barrierColor: Colors.transparent,
+      context: context,
+      builder: (context) {
+        return SafeArea(
+          top: false,
+          child: SingleChildScrollView(
+            physics: BouncingScrollPhysics(),
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+              decoration: BoxDecoration(
+                color: betterPlayerControlsConfiguration.overflowModalColor,
+                /*shape: RoundedRectangleBorder(side: Bor,borderRadius: 24,)*/
+                borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(24.0),
+                    topRight: Radius.circular(24.0)),
+              ),
+              child: Column(
+                children: children,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _showMaterialBottomSheet(List<Widget> children) {
     showModalBottomSheet<void>(
-      backgroundColor: betterPlayerControlsConfiguration.overflowModalColor,
+      backgroundColor: Colors.transparent,
       context: context,
       builder: (context) {
         return SafeArea(
           top: false,
           child: SingleChildScrollView(
-            child: Column(
-              children: children,
+            physics: BouncingScrollPhysics(),
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+              decoration: BoxDecoration(
+                color: betterPlayerControlsConfiguration.overflowModalColor,
+                /*shape: RoundedRectangleBorder(side: Bor,borderRadius: 24,)*/
+                borderRadius: BorderRadius.only(
+                    topLeft: Radius.circular(24.0),
+                    topRight: Radius.circular(24.0)),
+              ),
+              child: Column(
+                children: children,
+              ),
             ),
           ),
         );