3 files changed, 74 insertions, 16 deletions

diff --git a/lib/homescreen.dart b/lib/homescreen.dart
index b78a5d2..8e4eb48 100644
--- a/lib/homescreen.dart
+++ b/lib/homescreen.dart
@@ -137,7 +137,7 @@ class _HomescreenState extends State<Homescreen> with TickerProviderStateMixin {
       case 1:
         return DashboardPage(key: ValueKey(selectedIndex));
       case 2:
-        return HVACPage(key: ValueKey(selectedIndex));
+        return HVACPageContainer(key: ValueKey(selectedIndex));
       case 3:
         return MediaPage(key: ValueKey(selectedIndex));
       default:
diff --git a/lib/page_hvac.dart b/lib/page_hvac.dart
index 230233d..76e3178 100644
--- a/lib/page_hvac.dart
+++ b/lib/page_hvac.dart
@@ -3,20 +3,20 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:numberpicker/numberpicker.dart';
 
-class HVACPage extends StatelessWidget {
-  const HVACPage({Key? key}) : super(key: key);
+class HVACPageContainer extends StatelessWidget {
+  const HVACPageContainer({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context) {
     return Container(
       constraints: BoxConstraints.expand(),
       alignment: Alignment.center,
-      child: const MainPage(title: 'AGL - Flutter HVAC'),
+      child: const HVACPage(title: 'AGL - Flutter HVAC'),
     );
   }
 }
 
 class _TemperatureSelector extends StatefulWidget {
-double referenceFontSize = 24;
+final double referenceFontSize = 24;
 
   _TemperatureSelector({Key? key, referenceFontSize}) : super(key: key);
 
@@ -79,20 +79,20 @@ class _HVACFanSpeedState extends State<HVACFanSpeed> {
   }
 }
 
-class MainPage extends StatefulWidget {
-  const MainPage({Key? key, required this.title}) : super(key: key);
+class HVACPage extends StatefulWidget {
+  const HVACPage({Key? key, required this.title}) : super(key: key);
 
   final String title;
 
   @override
-  State<MainPage> createState() => _MyHomePageState();
+  State<HVACPage> createState() => _HVACPageState();
 }
 
 String chairOn = 'images/HMI_HVAC_Left_Chair_ON.png';
 String chairOff = 'images/HMI_HVAC_Right_Chair_ON.png';
 bool selected = true; // Get from API
 
-class _MyHomePageState extends State<MainPage> {
+class _HVACPageState extends State<HVACPage> {
   final double fanSpeed = 20;
 
   Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
diff --git a/lib/page_media.dart b/lib/page_media.dart
index 9b61bea..65ebaf1 100644
--- a/lib/page_media.dart
+++ b/lib/page_media.dart
@@ -1,19 +1,77 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 
 class MediaPage extends StatelessWidget {
-
   const MediaPage({Key? key}) : super(key: key);
 
-  @override
-  Widget build(BuildContext context) {
+  Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
+    // describe the layout in terms of fractions of the container size
+    double mainDimension = max(constraints.maxWidth, constraints.maxHeight);
+    //double minDimension = min(constraints.maxWidth, constraints.maxHeight);
+    double iconSize = mainDimension / 16.0;
+
     return Container(
-      color: Colors.deepPurple.shade50,
+      color: Colors.blueGrey.shade900,
       constraints: BoxConstraints.expand(),
       alignment: Alignment.center,
-      child: Text(
-        'Media',
-        style: Theme.of(context).textTheme.headline1,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          AspectRatio(
+            aspectRatio: 16 / 9,
+            child: Container(
+              decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                      begin: Alignment.bottomLeft,
+                      end: Alignment.topRight,
+                      colors: [
+                    Colors.blueGrey.shade700,
+                    Colors.blueGrey.shade400
+                  ])),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              _createMediaButton(Icons.skip_previous, iconSize, () {}),
+              _createMediaButton(Icons.play_arrow, iconSize, () {}),
+              _createMediaButton(Icons.skip_next, iconSize, () {}),
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _createMediaButton(
+      IconData icon, double iconSize, Null Function() onPressed) {
+    return Padding(
+      padding: EdgeInsets.all(iconSize / 8),
+      child: ElevatedButton(
+        onPressed: onPressed,
+        child: Icon(
+          icon,
+          color: Colors.blueGrey.shade700,
+          size: iconSize,
+        ),
+        style: ElevatedButton.styleFrom(
+          shape: CircleBorder(),
+          padding: EdgeInsets.all(iconSize / 8),
+          primary: Colors.blueGrey.shade100,
+          onPrimary: Colors.white,
         ),
+      ), 
     );
   }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.deepPurple.shade50,
+        child: Center(
+            child: LayoutBuilder(
+          builder: _buildLayout,
+        )));
+  }
 }