Play button in TV guide.

src/video.js

@@ -329,8 +329,8 @@ function video( channelDB , db) {
 
 
     router.get('/m3u8',  async (req, res) => {
-        res.type('application/vnd.apple.mpegurl')
-        
+        //res.type('application/vnd.apple.mpegurl')
+        res.type("application/x-mpegURL");
 
         // Check if channel queried is valid
         if (typeof req.query.channel === 'undefined') {
@@ -414,5 +414,26 @@ function video( channelDB , db) {
 
         res.send(data)
     })
+
+    router.get('/media-player/:number.m3u', async (req, res) => {
+        try {
+            let channelNum = parseInt(req.params.number, 10);
+            let channel = await channelCache.getChannelConfig(channelDB, channelNum );
+            if (channel.length === 0) {
+                res.status(404).send("Channel not found.");
+                return;
+            }
+            res.type('video/x-mpegurl');
+            let path ="video";
+            if (req.query.fast==="1") {
+                path ="m3u8";
+            }
+            res.status(200).send(`#EXTM3U\n${req.protocol}://${req.get('host')}/${path}?channel=${channelNum}\n\n`);
+        } catch(err) {
+            console.error(err);
+            res.status(500).send("There was an error.");
+        }
+    });
+
     return router
 }

web/public/style.css

@@ -218,6 +218,13 @@ table.tvguide {
   background: #414141;
 }
 
+.tvguide td .play-channel {
+  top:25%;
+  left:25%;
+  width:50%;
+  height:50%
+}
+
 .tv-guide-now {
   width:0.2em;
   height: 100%;

web/public/views/guide.html

@@ -26,12 +26,19 @@
             </th>
         </tr>
 
-        <tr ng-repeat="channelNumber in channelNumbers track by $index" ng-Class="{'even' : ($index % 2==0), 'odd' : ($index % 2==1) }" >
+        <tr ng-mouseover="channels[channelNumber].mouse=true" ng-mouseleave="channels[channelNumber].mouse=false"  ng-repeat="channelNumber in channelNumbers track by $index" ng-Class="{'even' : ($index % 2==0), 'odd' : ($index % 2==1) }" >
             <td title='{{channels[channelNumber].altTitle}}' class='even channel-number' colspan="{{channelNumberColspan}}" >
-                <div>{{channels[channelNumber].number}}</div>
+                <div>
+                    <a role="button" href='/media-player/{{channelNumber}}.m3u' title="Attempt to play channel: '{{channels[channelNumber].altTitle}}' in local media player" class='btn btn-sm btn-outline-primary play-channel'  ng-show='channels[channelNumber].mouse'>
+                        <span class='fa fa-play'></span>
+                    </a>
+                    <span ng-hide='channels[channelNumber].mouse' >
+                        {{channels[channelNumber].number}}
+                    </span>
+                </div>
             </td>
             <td title='{{channels[channelNumber].altTitle}}' class='even channel-icon' colspan="{{channelIconColspan}}" >
-                <img src='{{channels[channelNumber].icon}}' alt='{{channels[channelNumber].name}}'></img>
+                <img src='{{channels[channelNumber].icon}}' alt='{{channels[channelNumber].name}}' ng-click='channels[channelNumber].mouse=true'  ></img>
             </td>
 
             <td class='odd program' colspan="{{totalSpan}}" ng-if="channels[channelNumber].loading">