new video player complete version

This commit is contained in:
MohammadTaha Basiri 2022-04-04 18:16:03 +04:30
parent 00f108710a
commit a7c0fcf6f0
14 changed files with 198 additions and 217 deletions

View File

@ -9,7 +9,8 @@ class OverviewData {
final int? timeToRead;
final int? duration;
final String? reference;
final String? media;
final String? link;
final String? iframe;
final bool forManagers;
final String createdAt;
final String type;
@ -27,7 +28,8 @@ class OverviewData {
required this.marked,
required this.comments,
required this.forManagers,
this.media,
this.link,
this.iframe,
this.duration,
this.timeToRead,
this.reference,
@ -51,7 +53,8 @@ class OverviewData {
duration: json['duration'],
type: json['type'] ?? '',
marked: json['marked'] ?? true,
media: json['media'],
link: json['link'],
iframe: json['iframe'],
categories: json['categories'] != null
? List<CategoryData>.from(
json['categories'].map(

View File

@ -2,26 +2,25 @@ class SliderData {
final int id;
final String title;
final String image;
final String media;
final String link;
const SliderData({
required this.id,
required this.title,
required this.image,
required this.media,
required this.link,
});
factory SliderData.fromJson(Map<String, dynamic> json) => SliderData(
id: json['id'],
title: json['title'],
image: json['image'],
media: json['media'],
link: json['link'],
);
Map<String, dynamic> toJson() => {
'id': id,
'title': title,
'image': image,
'media': media,
};
}

View File

@ -7,7 +7,8 @@ class StudioDetailsData {
final String title;
final String description;
final String image;
final String media;
final String link;
final String? iframe;
final String createdAt;
final int order;
bool marked;
@ -21,7 +22,8 @@ class StudioDetailsData {
required this.title,
required this.description,
required this.image,
required this.media,
required this.link,
required this.iframe,
required this.createdAt,
required this.order,
required this.marked,
@ -36,7 +38,8 @@ class StudioDetailsData {
title: json['title'],
description: json['description'],
image: json['image'],
media: json['media'],
link: json['link'],
iframe: json['iframe'],
createdAt: json['createdAt'],
order: json['order'],
marked: json['marked'],
@ -51,7 +54,6 @@ class StudioDetailsData {
'title': title,
'description': description,
'image': image,
'media': media,
'createdAt': createdAt,
'order': order,
'marked': marked,

View File

@ -180,8 +180,15 @@ class RouteGenerator {
final shortestSide = MediaQuery.of(context).size.shortestSide;
final bool useMobileLayout = shortestSide < 600;
if (kIsWeb && !useMobileLayout) {
final deviceSize = MediaQuery.of(context).size;
return MediaQuery(
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
data: MediaQuery.of(context).copyWith(
textScaleFactor: 1.0,
size: Size(
deviceSize.width / 16 * 9,
deviceSize.height,
),
),
child: Container(
color: Theme.of(context).colorScheme.background,
alignment: Alignment.center,

View File

@ -80,7 +80,9 @@ class ActionSheetUtils {
isScrollControlled: true,
context: context,
builder: (context) => Container(
padding: data.hasPadding ? const EdgeInsets.all(20) : EdgeInsets.zero,
padding: data.hasPadding
? const EdgeInsets.all(20).copyWith(top: 0)
: EdgeInsets.zero,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: const BorderRadius.vertical(

View File

@ -126,7 +126,7 @@ class _StudioState extends State<Studio> {
emptyState: EmptyResult(
onNewSearch: () => _focusNode.requestFocus(),
),
centerEmptyState: false,
centerEmptyState: true,
enableEmptyState: state.studios.isEmpty,
placeholder: state.videosSelected
? VideoOverview.placeHolder

View File

@ -1,10 +1,7 @@
import 'dart:io';
import 'package:better_player/better_player.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/services/media/media.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/details_tab_bar.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/studio_details_widget.dart';
import 'package:didvan/views/home/widgets/bookmark_button.dart';
import 'package:didvan/views/widgets/didvan/app_bar.dart';
@ -12,8 +9,6 @@ import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
class StudioDetails extends StatefulWidget {
final Map<String, dynamic> pageData;
@ -24,7 +19,8 @@ class StudioDetails extends StatefulWidget {
}
class _StudioDetailsState extends State<StudioDetails> {
final _scrollController = ScrollController();
int _currentlyPlayingId = 0;
late BetterPlayerController _betterPlayerController;
@override
void initState() {
@ -34,15 +30,12 @@ class _StudioDetailsState extends State<StudioDetails> {
Duration.zero,
() => state.getStudioDetails(widget.pageData['id']),
);
if (Platform.isAndroid) WebView.platform = AndroidWebView();
super.initState();
}
@override
Widget build(BuildContext context) {
final d = MediaQuery.of(context);
return Consumer<StudioDetailsState>(
builder: (context, state, child) => StateHandler<StudioDetailsState>(
state: state,
@ -54,6 +47,32 @@ class _StudioDetailsState extends State<StudioDetails> {
}
},
builder: (context, state) {
if (_currentlyPlayingId != state.studio.id) {
BetterPlayerDataSource betterPlayerDataSource =
BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
state.studio.link,
);
_betterPlayerController = BetterPlayerController(
BetterPlayerConfiguration(
aspectRatio: 16 / 9,
showPlaceholderUntilPlay: true,
controlsConfiguration: BetterPlayerControlsConfiguration(
enablePlaybackSpeed: false,
enableSubtitles: false,
enableAudioTracks: false,
progressBarPlayedColor:
Theme.of(context).colorScheme.secondary,
progressBarHandleColor:
Theme.of(context).colorScheme.secondary,
),
fit: BoxFit.contain,
fullScreenAspectRatio: 16 / 9,
),
betterPlayerDataSource: betterPlayerDataSource,
);
_currentlyPlayingId = state.studio.id;
}
return WillPopScope(
onWillPop: () async {
if (MediaService.currentPodcast != null) {
@ -63,7 +82,6 @@ class _StudioDetailsState extends State<StudioDetails> {
},
child: SafeArea(
child: Scaffold(
key: ValueKey(state.studio.id),
backgroundColor: Theme.of(context).colorScheme.surface,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(56),
@ -84,43 +102,34 @@ class _StudioDetailsState extends State<StudioDetails> {
),
),
),
body: Column(
body: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: SizedBox(
height: d.size.height - d.padding.top - 56,
child: Column(
children: [
Directionality(
textDirection: TextDirection.ltr,
child: BetterPlayer.network(
'https://studio-didvan.arvanvod.com/Vz01Bxq2bQ/nylPWJ4B63/h_,144_200,240_400,360_800,480_1215,720_1215,k.mp4.list/master.m3u8',
betterPlayerConfiguration:
const BetterPlayerConfiguration(
aspectRatio: 16 / 9,
controlsConfiguration:
BetterPlayerControlsConfiguration(
enablePlaybackSpeed: false,
enableSubtitles: false,
enableAudioTracks: false,
),
autoDetectFullscreenAspectRatio: true,
autoDetectFullscreenDeviceOrientation: true,
fullScreenAspectRatio: 16 / 9,
),
),
),
const DetailsTabBar(
isVideo: true,
),
BetterPlayer(controller: _betterPlayerController),
Expanded(
child: StudioDetailsWidget(
onMarkChanged: (id, value) =>
widget.pageData['onMarkChanged'](id, value, true),
onMarkChanged: (id, value) => widget
.pageData['onMarkChanged'](id, value, true),
),
),
],
),
),
),
),
),
);
},
),
);
}
// @override
// void dispose() {
// _betterPlayerController.dispose();
// super.dispose();
// }
}

View File

@ -1,16 +1,13 @@
import 'dart:ui' as ui;
import 'package:didvan/config/design_config.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/services/media/media.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/details_tab_bar.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/studio_details_widget.dart';
import 'package:didvan/views/home/widgets/bookmark_button.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/didvan/app_bar.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:universal_html/html.dart' as html;
@ -24,8 +21,6 @@ class StudioDetails extends StatefulWidget {
}
class _StudioDetailsState extends State<StudioDetails> {
bool _isFullScreen = false;
@override
void initState() {
final state = context.read<StudioDetailsState>();
@ -34,42 +29,12 @@ class _StudioDetailsState extends State<StudioDetails> {
Duration.zero,
() => state.getStudioDetails(widget.pageData['id']),
);
super.initState();
}
Future<void> _changeFullSceen(bool value) async {
if (value) {
await SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [],
);
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
systemNavigationBarColor: Colors.black,
),
);
await SystemChrome.setPreferredOrientations(
[DeviceOrientation.landscapeLeft],
);
} else {
await SystemChrome.setEnabledSystemUIMode(
SystemUiMode.manual,
overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top],
);
await SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp],
);
DesignConfig.updateSystemUiOverlayStyle();
}
setState(() {
_isFullScreen = value;
});
}
@override
Widget build(BuildContext context) {
final ds = MediaQuery.of(context).size;
final d = MediaQuery.of(context);
return Consumer<StudioDetailsState>(
builder: (context, state, child) => StateHandler<StudioDetailsState>(
state: state,
@ -82,66 +47,61 @@ class _StudioDetailsState extends State<StudioDetails> {
..allowFullscreen = true
..src = Uri.dataFromString(
'<style>*{padding: 0 ; margin: 0; background: black;}</style>' +
state.studio.media,
state.studio.iframe!,
mimeType: 'text/html',
).toString()
..style.border = 'none',
);
return WillPopScope(
onWillPop: () async {
if (_isFullScreen) {
await _changeFullSceen(false);
return false;
}
if (MediaService.currentPodcast != null) {
state.studio = MediaService.currentPodcast!;
}
return true;
},
child: DidvanScaffold(
padding: EdgeInsets.zero,
appBarData: _isFullScreen
? null
: AppBarData(
isSmall: true,
title: state.studio.title,
child: SafeArea(
child: Scaffold(
backgroundColor: Theme.of(context).colorScheme.surface,
appBar: PreferredSize(
preferredSize: const Size.fromHeight(56),
child: DidvanAppBar(
appBarData: AppBarData(
trailing: BookmarkButton(
itemId: state.studio.id,
type: 'video',
value: state.studio.marked,
onMarkChanged: (value) => widget
.pageData['onMarkChanged'](state.studio.id, value),
onMarkChanged: (value) {
widget.pageData['onMarkChanged'](
state.studio.id, value);
},
gestureSize: 48,
),
isSmall: true,
title: state.studio.title,
),
showSliversFirst: true,
slivers: [
SliverAppBar(
automaticallyImplyLeading: false,
pinned: true,
elevation: 0,
toolbarHeight:
(_isFullScreen ? ds.height : ds.width * 9 / 16) +
72 -
MediaQuery.of(context).padding.top,
flexibleSpace: Column(
children: const [
AspectRatio(
),
),
body: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: SizedBox(
height: d.size.height - d.padding.top - 56,
child: Column(
children: [
const AspectRatio(
aspectRatio: 16 / 9,
child: HtmlElementView(viewType: 'video'),
),
DetailsTabBar(
isVideo: true,
),
],
Expanded(
child: StudioDetailsWidget(
onMarkChanged: (id, value) => widget
.pageData['onMarkChanged'](id, value, true),
),
),
],
children: [
StudioDetailsWidget(
onMarkChanged: widget.pageData['onMarkChanged'],
),
],
),
),
),
),
);
},

View File

@ -111,7 +111,7 @@ class StudioDetailsState extends CoreProvier {
MediaService.currentPodcast = studio;
MediaService.podcastPlaylistArgs = args;
await MediaService.handleAudioPlayback(
audioSource: studio.media,
audioSource: studio.link,
id: studio.id,
isVoiceMessage: false,
);

View File

@ -16,7 +16,7 @@ class DetailsTabBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final state = context.read<StudioDetailsState>();
final state = context.watch<StudioDetailsState>();
return WillPopScope(
onWillPop: () async {
state.selectedDetailsIndex = 0;
@ -35,10 +35,6 @@ class DetailsTabBar extends StatelessWidget {
)
],
),
child: FittedBox(
fit: BoxFit.scaleDown,
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
_TabItem(
@ -67,8 +63,6 @@ class DetailsTabBar extends StatelessWidget {
],
),
),
),
),
);
}
}
@ -106,6 +100,7 @@ class _TabItem extends StatelessWidget {
child: Container(
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,

View File

@ -1,4 +1,5 @@
import 'package:didvan/config/design_config.dart';
import 'dart:math';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/enums.dart';
@ -28,38 +29,34 @@ class StudioDetailsWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ds = MediaQuery.of(context).size;
return SafeArea(
bottom: true,
child: Consumer<StudioDetailsState>(
builder: (context, state, child) {
bool isVideo = state.studio.media.contains('iframe');
bool isVideo = state.studio.iframe != null;
return Container(
color: Theme.of(context).colorScheme.surface,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (!isVideo)
DetailsTabBar(
isVideo: isVideo,
),
const SizedBox(height: 16),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: isVideo
? double.infinity
: ds.height -
height: max(
ds.height -
ds.width * 9 / 16 -
144 -
72 -
MediaQuery.of(context).padding.top,
),
0),
color: Theme.of(context).colorScheme.surface,
child: Stack(
children: [
Positioned(
top: 72,
left: 0,
right: 0,
bottom: 0,
child: StateHandler<StudioDetailsState>(
onRetry: () {},
state: state,
builder: (context, state) {
if (state.selectedDetailsIndex == 0) {
return SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -128,6 +125,11 @@ class StudioDetailsWidget extends StatelessWidget {
if (state.selectedDetailsIndex == 1) {
return ChangeNotifierProvider<CommentsState>(
create: (context) => CommentsState(),
child: SizedBox(
height: ds.height -
ds.width * 9 / 16 -
172 -
MediaQuery.of(context).padding.top,
child: Comments(
pageData: {
'id': state.studio.id,
@ -137,10 +139,10 @@ class StudioDetailsWidget extends StatelessWidget {
'isPage': false,
},
),
),
);
}
return SingleChildScrollView(
child: Column(
return Column(
children: [
if (state.studio.relatedContents.isEmpty)
for (var i = 0; i < 3; i++)
@ -167,11 +169,13 @@ class StudioDetailsWidget extends StatelessWidget {
),
),
],
),
);
},
),
),
DetailsTabBar(
isVideo: isVideo,
),
],
),
);
@ -202,7 +206,7 @@ class _StudioPreview extends StatelessWidget {
}) : super(key: key);
String get _previewTitle {
if (studio.media.contains('iframe')) {
if (studio.iframe != null) {
return 'ویدئو ${isNext ? 'بعدی' : 'قبلی'} ';
}
return 'پادکست ${isNext ? 'بعدی' : 'قبلی'} ';

View File

@ -129,7 +129,7 @@ class AudioPlayerWidget extends StatelessWidget {
stream: MediaService.audioPlayer.playingStream,
builder: (context, snapshot) {
return _PlayPouseAnimatedIcon(
audioSource: podcast.media,
audioSource: podcast.link,
id: podcast.id,
);
},

View File

@ -83,7 +83,7 @@ class PodcastOverview extends StatelessWidget {
const Spacer(),
if (!kIsWeb) ...[
if (state.appState == AppState.idle ||
!state.downloadQueue.contains(podcast.media))
!state.downloadQueue.contains(podcast.link))
DidvanIconButton(
gestureSize: 28,
color: _isDownloaded
@ -97,11 +97,11 @@ class PodcastOverview extends StatelessWidget {
: () => state.download(
fileName: 'podcast-${podcast.id}.mp3',
isVideo: false,
url: podcast.media!,
url: podcast.link!,
),
),
if (state.appState == AppState.busy &&
state.downloadQueue.contains(podcast.media))
state.downloadQueue.contains(podcast.link))
const SizedBox(
width: 18,
height: 18,

View File

@ -248,7 +248,7 @@ class _PlayerNavBar extends StatelessWidget {
);
}
MediaService.handleAudioPlayback(
audioSource: MediaService.currentPodcast!.media,
audioSource: MediaService.currentPodcast!.link,
id: MediaService.currentPodcast!.id,
isVoiceMessage: false,
);