Add changes to support apple tv apps

Gemfile

@@ -1,2 +1,5 @@
 source "https://rubygems.org"
-gem 'github-pages'
+gem 'github-pages'
+gem "jekyll", "~> 3.9"
+
+gem "webrick", "~> 1.7"

README.md

@@ -53,6 +53,7 @@ Things you can customise in `_config.yml`:
 - Link to Website
 - Social Links and Contact Info
 - Feature List (Title, text, icon)
+- Apple TV App mode
 
 
 

_config.yml

@@ -17,6 +17,8 @@ app_description                           : Write a short tagline for your app.
 
 enable_smart_app_banner                   : true                                      # Set to true to show a smart app banner at top of page on mobile devices.
 
+# Apple TV
+enable_apple_tv_mode                      : true                                     # Set to true to hide the iphone preview and show a tv preview instead.
 
 
 # Information About Yourself

_includes/tvscreen.html

@@ -0,0 +1,50 @@
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+{% if site.enable_apple_tv_mode %}
+    {% for file in site.static_files %}
+        {% if file.path contains 'assets/screenshot/' %}
+            <script>
+                $(function() {
+                    $(".tvScreen").attr('src', '{{ site.github.baseurl }}{{ file.path }}');
+                    $(".tvScreen").removeClass("hidden");
+                    console.log("{{ file.path }}");
+                });
+            </script>
+        {% elsif file.path contains 'assets/videos/' %}
+            {% unless file.path contains 'assets/videos/Place-video-files-here.txt' %}
+                <script>
+                    $(function() {
+                        $(".tvScreen").addClass("hidden");
+                        console.log("remove screenshot");
+                    });
+                </script>
+            {% endunless %}
+            {% if file.extname == ".mov" or file.extname == ".mp4" %}
+                <script>
+                    $(function() {
+                        $(".tvVideoContainer").removeClass("hidden");
+                        $(".screenvideo").append('<source src="{{ site.github.baseurl }}{{ file.path }}" type="video/mp4">');
+                        console.log("{{ file.path }}");
+                    });
+                </script>
+            {% elsif file.extname == ".ogg" %}
+                <script>
+                    $(function() {
+                        $(".tvVideoContainer").removeClass("hidden");
+                        $(".screenvideo").append('<source src="{{ site.github.baseurl }}{{ file.path }}" type="video/ogg">');
+                        console.log("{{ file.path }}");
+                    });
+                </script>
+            {% elsif file.extname == ".webm" %}
+            <script>
+                $(function() {
+                    $(".tvVideoContainer").removeClass("hidden");
+                    $(".screenvideo").append('<source src="{{ site.github.baseurl }}{{ file.path }}" type="video/webm">');
+                    console.log("{{ file.path }}");
+                });
+            </script>
+            {% endif %}
+        {% endif %}
+    {% endfor %} 
+{% endif %}

_layouts/default.html

@@ -8,6 +8,20 @@
             <div class="headerBackground">
                 <div class="container">
                     {% include header.html %}
+
+                    {% if site.enable_apple_tv_mode %}
+                    <div class="tvPreview">                        	
+                        <div class="tvVideoContainer hidden">
+                            <video loop class="screenvideo" autoplay="autoplay" >
+                            </video>
+                        </div>  
+
+                        <img class="tvScreen hidden" src="" alt="">
+                        {% include tvscreen.html %}
+                    </div>
+
+                    {% else %}
+
                     <div class="iphonePreview">
 
                         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 0 0" style="position: absolute;">
@@ -24,8 +38,10 @@
                         <img class="iphoneScreen hidden" src="" alt="">
 
                         {% include screencontent.html %}
-
                     </div>
+
+                    {% endif %}
+
                     <div class="appInfo">
                         <div class="appIconShadow">
                             <svg width="0" height="0">

_sass/layout.scss

@@ -394,6 +394,7 @@ nav > ul li a:active {
 	margin-top: 23px;
 }
 
+
 .videoContainer {
 	width: 349px;
 	height: 755px;
@@ -408,6 +409,38 @@ nav > ul li a:active {
 	height: 755px;
 }
 
+// Apple TV Device Preview
+
+.tvPreview {
+	grid-area: p;
+	background-image: url($tv-image);
+	background-size: 450px auto;
+	background-repeat: no-repeat;
+	margin-top: 100px;
+	grid-area: p;
+}
+
+.tvScreen {
+	width: 401px;	
+	height: 226px;
+	margin-left: 11px;
+	margin-top: 12px;
+}
+
+.tvVideoContainer {
+	width: 550px;
+	height: 400px;
+	-webkit-clip-path: url(#screenMask);
+	clip-path: url(#screenMask);
+	margin-left: 11px;
+}
+
+.tvVideoContainer > video {
+	width: 402px;
+	height: auto;
+	margin-top: 12.5px;
+}
+
 @media only screen and (max-width: 1070px) {
 
 	.iphonePreview {
@@ -431,6 +464,29 @@ nav > ul li a:active {
 		width: 322px;
 		height: 698px;
 	}
+
+	// Apple TV Device Preview
+
+	.tvPreview {		
+		background-size: 370px auto;
+	}
+
+	.tvScreen {
+		width: 328px;
+		height: 184px;
+	}	
+
+	.tvVideoContainer {
+		width: 546px;
+		height: 394px;
+	}
+
+	.tvVideoContainer > video {
+		width: 330px;
+		height: auto;
+		margin-left: -2px;
+		margin-top: 11px;
+	}
 
 } 
 
@@ -465,7 +521,36 @@ nav > ul li a:active {
 		width: 226px;
 		height: 488px;
 	}
-
+
+	.tvPreview {
+		display: flex;
+		background-size: 260px auto;
+		background-position: center 0;
+		margin-top: 47px;
+		justify-content: center;
+		padding-bottom: 75px;
+	}
+
+	.tvScreen {
+		width: 230px;
+		height: 129px;
+		margin-right: 26px;				
+		margin-top: 8px;
+	} 
+
+	.tvVideoContainer {
+		width: 226px;
+		height: 488px;
+		margin-left: 0px;
+		margin-top: 17px;
+	}
+
+	.tvVideoContainer > video {
+		width: 232px;
+		height: auto;
+		margin-left: -11px;
+		margin-top: -10px;
+	}
 } 
 
 

main.scss

@@ -6,6 +6,7 @@ $body-color: {{ site.body_background_color }};
 
 $header-image: "{{ site.cover_image }}";
 $device-color: "assets/{{ site.device_color }}.png";
+$tv-image: "assets/tv.png";
 
 $accent-color: {{ site.link_color }};