use MIHYTVideoPlayer on long press of tile

Frontend/lib/mih_components/mih_layout/mih_tile.dart

@@ -1,13 +1,11 @@
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_yt_video_player.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import '../../main.dart';
-import 'package:youtube_player_flutter/youtube_player_flutter.dart';
-
 import 'mih_window.dart';
 
 class MIHTile extends StatefulWidget {
   final String tileName;
-  final String? videoYTLink;
+  final String? videoID;
   final Widget tileIcon;
   final void Function() onTap;
   // final Widget tileIcon;
@@ -18,7 +16,7 @@ class MIHTile extends StatefulWidget {
     super.key,
     required this.onTap,
     required this.tileName,
-    this.videoYTLink,
+    this.videoID,
     required this.tileIcon,
     required this.p,
     required this.s,
@@ -31,28 +29,9 @@ class MIHTile extends StatefulWidget {
 class _MIHTileState extends State<MIHTile> {
   late Color mainC;
   late Color secondC;
-  late YoutubePlayerController videoController;
-
-  String getVideID() {
-    if (widget.videoYTLink != null) {
-      return YoutubePlayer.convertUrlToId(widget.videoYTLink!) as String;
-    } else {
-      return "";
-    }
-  }
-
-  // void listener() {
-  //   if (_isPlayerReady && mounted && !videoController.value.isFullScreen) {
-  //     setState(() {
-  //       _playerState = videoController.value.playerState;
-  //       _videoMetaData = videoController.metadata;
-  //     });
-  //   }
-  // }
 
   @override
   void dispose() {
-    videoController.dispose();
     super.dispose();
   }
 
@@ -60,19 +39,11 @@ class _MIHTileState extends State<MIHTile> {
   void initState() {
     mainC = widget.p;
     secondC = widget.s;
-
-    videoController = YoutubePlayerController(
-        initialVideoId: getVideID(),
-        flags: YoutubePlayerFlags(
-          autoPlay: false,
-          mute: true,
-          isLive: false,
-        ));
     super.initState();
   }
 
   void displayHint() {
-    if (widget.videoYTLink != null) {
+    if (widget.videoID != null) {
       showDialog(
         context: context,
         builder: (context) {
@@ -84,20 +55,7 @@ class _MIHTileState extends State<MIHTile> {
               Navigator.pop(context);
             },
             windowBody: [
-              YoutubePlayerBuilder(
-                player: YoutubePlayer(
-                  controller: videoController,
-                  showVideoProgressIndicator: true,
-                  progressIndicatorColor: Colors.amber,
-                  progressColors: ProgressBarColors(
-                    playedColor: Colors.amber,
-                    handleColor: Colors.amberAccent,
-                  ),
-                ),
-                builder: (context, player) {
-                  return player;
-                },
-              ),
+              MIHYTVideoPlayer(videoYTLink: widget.videoID!),
             ],
           );
         },
@@ -131,9 +89,9 @@ class _MIHTileState extends State<MIHTile> {
                 borderRadius: BorderRadius.circular(80),
                 // ho
                 onTap: widget.onTap,
-                // onLongPress: () {
-                //   displayHint();
-                // },
+                onLongPress: () {
+                  displayHint();
+                },
                 // hoverDuration: ,
                 splashColor:
                     MzanziInnovationHub.of(context)!.theme.highlightColor(),
@@ -143,26 +101,6 @@ class _MIHTileState extends State<MIHTile> {
               ),
             ),
           ),
-          // Material(
-          //   color: mainC,
-          //   borderRadius: BorderRadius.circular(80),
-          //   child: Ink(
-          //     // width: 200,
-          //     // height: 200,
-          //     padding: const EdgeInsets.all(20),
-          //     child: InkWell(
-          //       onTap: widget.onTap,
-          //       hoverDuration: Duration(seconds: 2),
-          //       highlightColor:
-          //           MzanziInnovationHub.of(context)!.theme.messageTextColor(),
-          //       child: SizedBox(
-          //         height: 200,
-          //         width: 200,
-          //         child: widget.tileIcon,
-          //       ),
-          //     ),
-          //   ),
-          // ),
           const SizedBox(height: 10),
           SizedBox(
             width: 300,