new categorie page
better folder structure more info on video info page
This commit is contained in:
130
lib/preview/preview_grid.dart
Normal file
130
lib/preview/preview_grid.dart
Normal file
@ -0,0 +1,130 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
|
||||
import 'package:openmediacentermobile/platform.dart';
|
||||
import 'package:openmediacentermobile/preview/preview_tile.dart';
|
||||
import 'package:openmediacentermobile/screen_loading.dart';
|
||||
|
||||
class PreviewGrid extends StatefulWidget {
|
||||
const PreviewGrid(
|
||||
{Key? key,
|
||||
required this.videoLoader,
|
||||
this.headerBuilder,
|
||||
this.footerBuilder})
|
||||
: super(key: key);
|
||||
|
||||
final Future<List<VideoT>> Function() videoLoader;
|
||||
final Widget Function(_PreviewGridState state)? footerBuilder;
|
||||
final Widget Function(_PreviewGridState state)? headerBuilder;
|
||||
|
||||
@override
|
||||
State<PreviewGrid> createState() => _PreviewGridState();
|
||||
}
|
||||
|
||||
class _PreviewGridState extends State<PreviewGrid> {
|
||||
late Future<List<VideoT>> _data;
|
||||
Image? _previewImage;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
loadData();
|
||||
}
|
||||
|
||||
void loadData() {
|
||||
setState(() {
|
||||
_data = widget.videoLoader();
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final double width = MediaQuery.of(context).size.width;
|
||||
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
loadData();
|
||||
await Future.delayed(Duration(milliseconds: 600));
|
||||
},
|
||||
triggerMode: RefreshIndicatorTriggerMode.anywhere,
|
||||
color: Colors.purple,
|
||||
child: FutureBuilder<List<VideoT>>(
|
||||
future: _data,
|
||||
builder:
|
||||
(BuildContext context, AsyncSnapshot<List<VideoT>> snapshot) {
|
||||
if (snapshot.hasError) {
|
||||
return Text("Error");
|
||||
} else if (snapshot.hasData) {
|
||||
return _mainGrid(snapshot.data!, width);
|
||||
} else {
|
||||
return ScreenLoading();
|
||||
}
|
||||
},
|
||||
));
|
||||
}
|
||||
|
||||
Widget _mainGrid(List<VideoT> data, double width) {
|
||||
return Stack(
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
if (widget.headerBuilder != null) widget.headerBuilder!(this),
|
||||
Expanded(
|
||||
child: MasonryGridView.count(
|
||||
// every tile should be at max 330 pixels long...
|
||||
crossAxisCount: isTV() ? width ~/ 200 : width ~/ 275,
|
||||
// crossAxisCount: isTV() ? width ~/ 200 : width ~/ 330,
|
||||
itemCount: data.length,
|
||||
mainAxisSpacing: 4,
|
||||
crossAxisSpacing: 4,
|
||||
padding: EdgeInsets.all(5),
|
||||
itemBuilder: (context, index) {
|
||||
return PreviewTile(
|
||||
dta: data[index],
|
||||
onLongPress: (img) {
|
||||
setState(() {
|
||||
_previewImage = img;
|
||||
});
|
||||
},
|
||||
onLongPressEnd: () {
|
||||
setState(() {
|
||||
_previewImage = null;
|
||||
});
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
if (widget.footerBuilder != null) widget.footerBuilder!(this),
|
||||
],
|
||||
),
|
||||
if (_previewImage != null) ..._buildPreviewImage(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> _buildPreviewImage() {
|
||||
return [
|
||||
BackdropFilter(
|
||||
filter: ImageFilter.blur(
|
||||
sigmaX: 5.0,
|
||||
sigmaY: 5.0,
|
||||
),
|
||||
child: Container(
|
||||
color: Colors.white.withOpacity(0.6),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 50),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
child: _previewImage!),
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
156
lib/preview/preview_tile.dart
Normal file
156
lib/preview/preview_tile.dart
Normal file
@ -0,0 +1,156 @@
|
||||
import 'dart:convert';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:openmediacentermobile/video_screen/videoscreen_desktop.dart'
|
||||
if (dart.library.html) 'package:openmediacentermobile/video_screen/videoscreen_web.dart'
|
||||
if (dart.library.io) 'package:openmediacentermobile/video_screen/videoscreen_desktop.dart';
|
||||
|
||||
import '../api/api.dart';
|
||||
import '../platform.dart';
|
||||
|
||||
// todo put this type in sperate class!
|
||||
class VideoT {
|
||||
int id;
|
||||
String title;
|
||||
double ratio;
|
||||
|
||||
VideoT(this.title, this.id, this.ratio);
|
||||
|
||||
factory VideoT.fromJson(dynamic json) {
|
||||
return VideoT(json['MovieName'] as String, json['MovieId'] as int,
|
||||
(json['Ratio'] as num).toDouble());
|
||||
}
|
||||
}
|
||||
|
||||
class PreviewTile extends StatefulWidget {
|
||||
const PreviewTile(
|
||||
{Key? key, required this.dta, this.onLongPress, this.onLongPressEnd})
|
||||
: super(key: key);
|
||||
final VideoT dta;
|
||||
final Function(Image img)? onLongPress;
|
||||
final Function? onLongPressEnd;
|
||||
|
||||
@override
|
||||
_PreviewTileState createState() => _PreviewTileState();
|
||||
}
|
||||
|
||||
class _PreviewTileState extends State<PreviewTile> {
|
||||
late Future<Image> _preview;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_preview = loadData();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(PreviewTile oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
|
||||
if (oldWidget.dta != widget.dta) {
|
||||
setState(() {
|
||||
_preview = loadData();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<Image> loadData() async {
|
||||
final data =
|
||||
await API.query("video", "readThumbnail", {'Movieid': widget.dta.id});
|
||||
|
||||
final img = Image.memory(
|
||||
base64Decode(data.substring(23)),
|
||||
width: double.infinity,
|
||||
fit: BoxFit.fitWidth,
|
||||
);
|
||||
|
||||
// precache image to avoid loading time to render image
|
||||
await precacheImage(img.image, context);
|
||||
|
||||
return img;
|
||||
}
|
||||
|
||||
Widget _buildLoader() {
|
||||
return Column(children: const <Widget>[
|
||||
SizedBox(height: 50),
|
||||
SizedBox(
|
||||
width: 60,
|
||||
height: 60,
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(top: 16),
|
||||
child: Text('Awaiting result...'),
|
||||
),
|
||||
SizedBox(height: 50),
|
||||
]);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FutureBuilder<Image>(
|
||||
future: _preview, // a previously-obtained Future<String> or null
|
||||
builder: (BuildContext context, AsyncSnapshot<Image> snapshot) {
|
||||
if (snapshot.connectionState != ConnectionState.done) {
|
||||
return _buildLoader();
|
||||
}
|
||||
|
||||
if (snapshot.hasError) {
|
||||
return Text("Error");
|
||||
} else if (snapshot.hasData) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
widget.dta.title,
|
||||
style: TextStyle(fontSize: isTV() ? 8 : 10.5),
|
||||
overflow: TextOverflow.clip,
|
||||
maxLines: 1,
|
||||
),
|
||||
snapshot.data!
|
||||
],
|
||||
),
|
||||
color: Color(0x6a94a6ff),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.translucent,
|
||||
onLongPress: () {
|
||||
if (widget.onLongPress != null)
|
||||
widget.onLongPress!(snapshot.data!);
|
||||
},
|
||||
onLongPressEnd: (details) {
|
||||
if (widget.onLongPressEnd != null)
|
||||
widget.onLongPressEnd!();
|
||||
},
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) =>
|
||||
VideoScreen(metaData: widget.dta),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return _buildLoader();
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user