video360kaltura 0.0.1

Kaltura Player Plugin for Flutter

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video360kaltura/Video360Kaltura.dart';
import 'dart:ui';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: HomePage(),
        ),
      ),
    );
  }
}

//play
//pause
//full screen
//

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  Video360PlayerController viewPlayerController;
  AnimationController animationController;
  Animation<double> animation;
  bool isShowingBar = false;
  bool isPlaying = false;
  bool isFullScreen = false;
  bool videoEnded = false;
  double playerWidth;
  double playerHeight;
  String duration;
  int intDuration;
  bool videoLoading;
  bool videoReady;
  String currentPosition;
  double seekPosition = 0.0;

  @override
  void initState() {
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1)
    );
    animation = Tween(
      begin: 0.0,
      end: 1.0
    ).animate(animationController);
    showingBar();
    super.initState();
  }

  showingBar(){
    isShowingBar = !isShowingBar;
    if(isShowingBar){
      animationController.forward();
    } else {
      animationController.reverse();
    }
  }

  // var serverURL: String = "https://cdnapisec.kaltura.com"
  // var partnerId: Int = 1424501 //Int64(self.partnerId!)!
  // var kalturaSessionToken: String? = nil
  // var entryId: String = "0_a54foq3g"//arguments as? String

  @override
  Widget build(BuildContext context) {
    playerWidth = MediaQuery.of(context).size.width;
    playerHeight = isFullScreen ? MediaQuery.of(context).size.height : playerWidth * 9.0 / 16.0;

    return GestureDetector(
      onTap: (){
        print('REVERSE ANIMATION');
        showingBar();
      },
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          Video360Kaltura(
            x: 0,
            y: 0,
            onCreated: onViewPlayerCreated,
            width: playerWidth,
            height: playerHeight,
            // partnerId: "2215841",
            partnerId: "1424501",
            ovpServerUrl: "https://cdnapisec.kaltura.com"
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: FadeTransition(
              opacity: animation,
              child: Container(
                color: Colors.black,
                child: Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(
                        this.videoEnded ? Icons.replay : isPlaying ? Icons.pause : Icons.play_arrow,
                        color: Colors.white,
                      ), 
                      onPressed: playAndPause
                    ),
                    Text(
                      currentPosition?.toString() ?? '00:00',
                      style: TextStyle(
                        color: Colors.white
                      ),
                    ),
                    Expanded(
                      child: SliderTheme(
                        data: SliderTheme.of(context).copyWith(
                          activeTrackColor: Colors.amberAccent,
                          inactiveTrackColor: Colors.grey,
                          trackHeight: 5.0,
                          thumbColor: Colors.white,
                          thumbShape: RoundSliderThumbShape(enabledThumbRadius: 8.0),
                          overlayColor: Colors.purple.withAlpha(32),
                          overlayShape: RoundSliderOverlayShape(overlayRadius: 14.0),
                        ), child: Slider(
                        value: seekPosition,
                        max: intDuration == null ? 0.0 : intDuration.toDouble(),
                        onChanged: (value){
                          viewPlayerController.seekTo(value.toInt());
                          onChangePosition(value.toInt());
                        }
                        ),
                      ),
                    ),
                    Text(
                      duration?.toString() ?? '99:99',
                      style: TextStyle(
                        color: Colors.white
                      ),
                    ),
                    IconButton(
                      icon: Icon(
                        isFullScreen ? Icons.fullscreen_exit : Icons.fullscreen, 
                        color: Colors.white,
                      ), 
                      onPressed: fullScreenPressed
                    ),
                    isFullScreen ?
                    IconButton(
                        icon: Image.asset('assets/icons/cardboard.png', color: Colors.white),
                        onPressed: cardBoardPressed
                    ) : Container(),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  void cardBoardPressed() {
    this.viewPlayerController.toggleVRMode();
  }

  void fullScreenPressed() async {
    await this.viewPlayerController.fullScreen();
    setState(() {
      isFullScreen = !isFullScreen;
    });

    if(isFullScreen) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
      ]);
      SystemChrome.setEnabledSystemUIOverlays([]);
    } else {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    }
  }

  void playAndPause() async {
    if (this.videoEnded) {
      await viewPlayerController.seekTo(0);
    }

    if(isPlaying){
      await viewPlayerController.pause();
    }else {
      await viewPlayerController.play();
    }

    setState(() {
      isPlaying = !isPlaying;
      this.videoEnded = false;
    });
  }

  void onViewPlayerCreated(Video360PlayerController controller, Video360PlayerObserver observer) {
    this.viewPlayerController = controller;
    observer.handleStateChange(this.onReceiveState);
    observer.handleDurationChange(this.onReceiveDuration);
    observer.handlePositionChange(this.onReceivePosition);
    observer.handleEndedChange(this.onReceiveEnded);
    // this.viewPlayerController.loadVideo("1_w9zx2eti");
    this.viewPlayerController.loadVideo("0_a54foq3g");
  }

  void onReceiveState(Map event) {
    switch (event["state"]) {
      case 0: {
        setState(() {
          this.videoLoading = true;
        });
        break;
      }
      case 1: {
        setState(() {
          this.videoLoading = false;
          this.videoReady = true;
        });
        break;
      }
      case 2: {
        // buffering
        break;
      }
    }
  }

  void onReceiveDuration(Map event) {
    setState(() {
      intDuration = event['duration'];
      this.duration = milisecondsToDateTime(event['duration']);
    });
  }

  void onReceivePosition(Map event) {
    onChangePosition(event['currentPosition']);
  }

  void onChangePosition(position) {
    setState(() {
      this.currentPosition = milisecondsToDateTime(position);
      seekPosition = position.toDouble();
    });
  }

  void onReceiveEnded(Map event) {
    setState(() {
      this.videoEnded = event["ended"] ?? false;
    });
  }

  String milisecondsToDateTime(int miliseconds) => setDurationText(Duration(milliseconds: miliseconds));
  
  String setDurationText(Duration duration){
    String twoDigits(int n) {
      if (n >= 10) return "$n";
      return "0$n";
    }
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    return "${twoDigits(duration.inHours)}:$twoDigitMinutes:$twoDigitSeconds";
  }

  @override
  void dispose() {
    super.dispose();
  }
}