├── views
    ├── partials
    │   └── footer.ejs
    └── pages
    │   └── index.ejs
├── package.json
├── config
    ├── config.json
    └── sample config.json
├── app.js
├── README.md
└── services
    └── plex.js


/views/partials/footer.ejs:
--------------------------------------------------------------------------------
1 | <p class="text-center text-muted">&copy;Test Footer</p>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "plex-overlays",
 3 |   "version": "0.1.0",
 4 |   "dependencies": {
 5 |     "ejs": "^3.1.8",
 6 |     "express": "^4.18.1",
 7 |     "fs": "^0.0.1-security",
 8 |     "http": "^0.0.1-security",
 9 |     "multer": "^1.4.5-lts.1",
10 |     "nodemon": "^2.0.20",
11 |     "request": "^2.88.2",
12 |     "xml2js": "^0.4.23"
13 |   },
14 |   "scripts": {
15 |     "start": "nodemon ./app.js"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/config/config.json:
--------------------------------------------------------------------------------
1 | { 
2 |     "plexToken": "<Plex X-Token here in quotes, no spaces and no < or > in any of this>",
3 |     "tvIp": "<IP address of your TV here, with quotes>",
4 |     "tvPort": <list the port where PiPupTransparent is running, get this from opening the app on your TV, no quotes>,
5 |     "plexServerIp": "<the IP address of the PC where you're running the node app, likely 192.168.blah.blah>",
6 |     "webhookPort": <the port where you send your webhook, done in PMS settings, no quotes>,
7 |     "tvdbToken": "<tvdb token, its free, just register for dev token, this may change in the future - in quotes>" 
8 | }


--------------------------------------------------------------------------------
/config/sample config.json:
--------------------------------------------------------------------------------
1 | { 
2 |     "plexToken": "xxipxusYqxxxxxxxxxxxx",               //also referred to as X-Plex-Token - https://www.plexopedia.com/plex-media-server/general/plex-token/
3 |     "tvIp": "192.168.1.27",                             //open PiPup on your Android device, put that ip here, without the port or http prefix 
4 |     "tvPort": 7979,                                     //open PiPup on your Android device, put the port here, without the ip or prefix
5 |     "plexServerIp": "192.168.1.209",                    //this is the ip where you're running the node app, so whatever computer you're editing this on, not the TV ip. This has to match the webhook ip you use in Plex settings
6 |     "webhookPort": 8400,                                //pick an open port on your computer, this has to match the webhook port you setup in Plex settings
7 |     "tvdbToken": "xxe4979fe9421549e6exxxxxxxxxxxxxx"    //get it here https://www.themoviedb.org/settings/api, this is the shorter v3 key, NOT the long v4 key
8 | }


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs'),
  2 | 	express = require('express'),
  3 |     multer  = require('multer'),
  4 |     plex = require('./services/plex'),
  5 |     app = express(),
  6 |     http = require('http'),
  7 |     request = require('request');
  8 | 
  9 | app.use(express.static(__dirname+'/storage'));
 10 | app.set('view engine', 'ejs');
 11 | config = JSON.parse(fs.readFileSync('./config/config.json'));
 12 | upload = multer({ dest: './storage/multer/' });	
 13 | 
 14 | let plexData;
 15 | let nowPlaying = '';
 16 | 
 17 | 
 18 | 
 19 | /*Known issues and todos:
 20 |  - PiPup server seems to crash randomly, and needs to be manually restarted - we might be able to kick off the service and/or check status with ADB - do disable power/battery saving
 21 |  - config needs user/player info for TV - right now, if someone else is using the PMS on a different device (eg. mobile phone), their webhooks will trigger the overlays on the TV
 22 |  	-- need to test with shared users vs guest vs local users to see where we need to detect...or maybe IP based
 23 |  - need to test with local auth/secure connection enforcement on/off - ideally should be able to run with 'secure connection (always)' enabled - need to add PMS ip to "List of IP addresses and networks that are allowed without auth" in Settings > Network
 24 |  - video (face-api.js, in progress)
 25 |  - last.fm + nowplaying notification (small)
 26 |  - not sure if we can do anything about 'plex pass only'
 27 |  - need a way to remove the overlay when it gets 'stuck' showing for whatever reason (pipup service crash, or plex webhook misfires/delays)
 28 | */
 29 | 
 30 | 
 31 | function startRouter(){
 32 | 	
 33 | 	app.get('/', (req, res) =>{
 34 | 		updatePage(res);	
 35 | 	});
 36 | 
 37 | 
 38 | 	app.post(['/plex', '/tasker'], upload.single('thumb'), async function (req, res, next) {
 39 | 		switch(req.url){
 40 | 			case "/plex":
 41 | 				console.log(timeStamp(),'=========================================================\n');
 42 | 				plexData = await plex.processPayload(config, req);
 43 | 				//console.log('got back w/ :', plexData);
 44 | 				plexData.tvdbToken = config.tvdbToken;
 45 | 				//if we're on a new media, update overlay with new content
 46 | 				if(plexData.title != nowPlaying){ //need to check with a movie
 47 | 					nowPlaying = plexData.title;
 48 | 					//setPageInfo	
 49 | 					console.log('Now Playing Change: ', nowPlaying);
 50 | 					updatePage(res);
 51 | 				}
 52 | 
 53 | 				///move all this somewhere else
 54 | 				if(plexData.event == 'media.pause'){
 55 | 					postOverlay(9999);			
 56 | 				}
 57 | 				else{ //might need to change to capture other events and filter...we don't want to send bunch of requests if user is ffwd'ing, etc.
 58 | 					//remove overlay, contents don't matter, just want duration 0
 59 | 					postOverlay(0);
 60 | 				}
 61 | 				break;
 62 | 		}
 63 | 	});
 64 | 	app.listen(config.webhookPort, config.plexServerIp);
 65 | 	console.log('listening on '+config.plexServerIp+':'+config.webhookPort+'...');
 66 | 
 67 | 
 68 | }
 69 | startRouter();
 70 | 
 71 | 
 72 | 
 73 | 
 74 | function updatePage(res){
 75 | 	res.render('pages/index',{
 76 | 		plexData: plexData
 77 | 	});
 78 | }
 79 | 
 80 | 
 81 | function timeStamp(){
 82 | 	var today = new Date();
 83 | 	var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
 84 | 	var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
 85 | 	return date+' '+time;
 86 | }
 87 | 
 88 | 
 89 | 
 90 | function postOverlay(dur){
 91 | 	var clientServerOptions = {
 92 |         uri: 'http://'+config.tvIp+':'+config.tvPort+'/notify',
 93 |         body: '{"duration": '+dur+', "position": 0, "backgroundColor": "#00ffffff", "media": { "web": { "uri": "http://'+config.plexServerIp+':'+config.webhookPort+'", "width": 1920, "height": 1080}}}',
 94 |         method: 'POST',
 95 |         headers: {
 96 |             'Content-Type': 'application/json'
 97 |         }
 98 |     }
 99 |     //comment out this request to test locally
100 |     request(clientServerOptions, function (error, response) {
101 |         //console.log(error,response);
102 |         return;
103 |     });	
104 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WebsUpTV 
 2 | 
 3 | ![](https://i.ibb.co/q5Hy7x4/foto-no-exif-1.jpg)
 4 | ![](https://i.ibb.co/crkwTnF/foto-no-exif.jpg)
 5 | 
 6 | [Reddit Community](https://www.reddit.com/r/WebsUpTV)
 7 | 
 8 | A Node.js application that displays various web widgets over any Android TV OS application.
 9 | 
10 | State of development - the application is in early development and is not yet suggested for daily use, currently working through PlexUp integration
11 | 
12 | ## Requirements 
13 | - Windows PC - Tested with Windows 10, should work on other OSs running PMS, but not yet tested
14 |   - Install [Node.js](https://nodejs.org/en/download/)
15 |   - Install Node NPM
16 |   - Download and configure WebsUpTV
17 | - Android TV - Tested with NVIDIA Shield TV (v2015)
18 |   - Mouse higly recommended to access all features
19 |   - Install [PiPupTransparent](https://github.com/my-ugly-code/PiPupTransparent/releases) - allow permission to 'Display over other apps'.
20 | 
21 | ## Features
22 | - [PlexUp](https://github.com/my-ugly-code/WebsUpTV/blob/main/README.md#plexup) - shows actors/roles from your now-playing [Plex](https://play.google.com/store/apps/details?id=com.plexapp.android&hl=en_US&gl=US) media, either on-demand, or automatically when you pause.
23 | - Coming Next - Song Id, Sports, Weather, News, Security Cameras...what else should we add?
24 | 
25 | ## Feature Requirements
26 | - PlexUp - PlexPass ($$), Plex Media Server, TMDB api key (free)
27 | 
28 | ## Setup
29 | I'll try to get a better guide here soon, but here's the quick setup guide. If you get stuck, post in the subreddit and I'll try to help get you going. 
30 | - Configure Plex
31 |   - Plex Settings > Settings > Network - Check 'Enable Webhooks' (bottom of page), and set Secure connections to "Preferred" (top of page) - hoping we can find a way around this, but it's a must for now. You can add your TV (and any PCs you are dev'ing on) to the "List of IP addresses and networks that are allowed without auth" whitelist on the same page. I also disabled "Allow media deletion" when I set this, but those are optional.
32 |   - Plex Settings > Webhooks - create a webhook in the format http://<WebsUpTV PC IP>:8400/plex. Eg. http://192.168.1.209:8400/plex
33 |  
34 | - Configure WebsUpTV
35 |   - Pull this repo, or download and unzip. Open the config/config.json file in Notepad or another editor, complete the config file and save. There is a sample config file in the config folder, this includes some additional notes on how to set this up and what the end result should look like.
36 |   - From the root directory of WebsUpTV, Open a PowerShell window (shift + right click), and run "npm install". If everything installs correctly, run "npm start" next. If this doesn't work, be sure you have NPM installed correctly.
37 |   
38 |  ## FAQ
39 |  There's a list of FAQs [here](https://github.com/my-ugly-code/WebsUpTV/wiki/FAQ). This covers general questions and some setup troubleshooting. Don't see your answer here? Just ask!
40 |   
41 |   
42 |  ### Misc Notes - odd bugs, how to use, troubleshoot, etc.
43 |   - Please check back for updates often, there is no auto update feature currently in place. To update, you can save your config.json file for reference, but note the changelog as the config.json file will expand in future releases.
44 |   - The overlay is currently triggered when you're playing media from YOUR library. This will not work with 'Plex Movies & TV', trailers, Live TV, etc.
45 |   - The overlay will also trigger on your config'd TV if someone else is playing media on your server - you can stop the application to prevent this. It's a simple fix, but I wanted to get the working version in place for now. Player IP (your TV IP in the config file) is sent in the plex payload.
46 |   - When actors are visible, use your mouse to hover over a card, click the button on the card back to display movie/TV credits for that actor.
47 |   - If the overlay is 'stuck' on your TV, move the cursor to the top-left corner of your screen and click the red triange that appears.
48 |   - If the overlay stops displaying, 1) you can stop the application in PowerShell by typing Ctrl+C a few times - run 'npm start' to restart.
49 |   - It might be helpful to disable any power/battery saving on the PiPup Android application - done in Android settings.
50 |   - You can view the overlay data on any other local browser - the urls are displayed in PowerShell when the application starts or restarts.
51 |   - You can manually trigger the overlay by sending a http request to PiPup directly, totally optional - this can be done in apps like Button Mapper or Tasker. You can set the duration value to whatever you'd like, if you need to remove the overlay before the duration timer expires, use the red triangle (top-left corner) or send another request with duration set to 0. The first step of displaying the overlay is to clear any existing overlays.
52 |   - The app uses no highly complex code - feel free to play around, make it look different, add more info. Show me what you've done and we can merge in anything cool that maintains existing functionality!! I wrote the application in Sublime Text, you don't need any fancy IDEs to play with these files. If you're trying to do something and can't figure it out, drop me a line and I can try to help or learn with you.
53 |   - Bug reporting - if you have a reoccuring issue, and want to collect helpful information for debugging, please copy/paste your PowerShell output to a .txt file, then find/replace Plex and TMDB tokens and include that file with your report. Please do not share your Plex or other tokens, it's putting yourself at risk.
54 |   - Want to help? https://github.com/my-ugly-code/WebsUpTV/issues there's stuff in there for all skill levels, even if you've never coded before :)
55 |   
56 | 


--------------------------------------------------------------------------------
/services/plex.js:
--------------------------------------------------------------------------------
  1 | parseString = require('xml2js').parseString;
  2 | request = require('request'); //there's probably a way to not have this duplicated here and app.js...besides passing request into processPayload()
  3 | 
  4 | 
  5 | var Plex = module.exports = {
  6 |      processPayload: async function(config, req) {
  7 |           //console.log('in with....');
  8 |           //console.log(req.body);
  9 |           let usefulData = await cleanData(config, req);
 10 |           console.log('usefulData.type:', usefulData.type);
 11 |           if(usefulData.type == 'episode'){ //so we call that twice? need to sort out promises
 12 |             let gParent = await getParentMedia(usefulData.topKey);
 13 |             console.log('got parent: ', JSON.stringify(gParent));
 14 |             //console.log(gParent.MediaContainer.$.librarySectionTitle)
 15 |             usefulData.parent = gParent;
 16 |             try{
 17 |               usefulData.parentRec = gParent.MediaContainer.Directory[0].$;
 18 |             }
 19 |             catch(e){
 20 |               console.log('did not get episode parent, ok if not episode');
 21 |             }
 22 |             usefulData.roles = await getRolesFromParent(gParent); //want these to fit in like movie roles
 23 |           }
 24 |           console.log('returning: ', usefulData);
 25 |           return usefulData;
 26 |     }/*,
 27 |     somethingelse: function() {
 28 |         console.log('something else');
 29 |     }*/
 30 | }
 31 | 
 32 | 
 33 | 
 34 | function getRolesFromParent(parent){
 35 |   let roles = [];
 36 |   return new Promise(resolve => {
 37 |     if(parent && parent.MediaContainer){
 38 |       parent.MediaContainer.Directory[0].Role.forEach(function(role){
 39 |         var pRole = role.$;
 40 |         pRole.randColor = colorGen()
 41 |         //console.log('ROLE:', role);
 42 |         roles.push(pRole);
 43 |       });
 44 |     }
 45 | 
 46 |     //console.log('GOT PARENT ROLES: ', roles);
 47 |     resolve(roles);
 48 |   });
 49 | }
 50 | 
 51 | 
 52 | function cleanData(config, req){
 53 |   return new Promise(resolve => {
 54 |       let payload = JSON.parse(req.body.payload);
 55 |       console.log('PLEX WEBHOOK PAYLOAD::::: ',JSON.stringify(payload));
 56 | 
 57 |       //for episodes, some things are pulled from parent/grandparent - eg. roles, art
 58 |       if(payload.Metadata.grandparentThumb == undefined){
 59 |         payload.Metadata.grandparentThumb = payload.Metadata.thumb;
 60 |       }
 61 |       var usefulData = {
 62 |           roles: payload.Metadata.Role, //empty if type = episode
 63 |           title: payload.Metadata.title,
 64 |           rating: payload.Metadata.contentRating,
 65 |           summary: payload.Metadata.summary,
 66 |           posterurl: 'http://'+config.plexServerIp+':32400'+payload.Metadata.grandparentThumb+'?X-Plex-Token='+config.plexToken,
 67 |           type: payload.Metadata.type, //episode, clip (trailer), movie
 68 |           show: payload.Metadata.grandparentTitle,
 69 |           topKey: payload.Metadata.grandparentKey,
 70 |           event: payload.event,
 71 |           releaseDate: payload.Metadata.originallyAvailableAt
 72 |       };
 73 | 
 74 | 
 75 |      resolve(usefulData); 
 76 |   });
 77 | }
 78 | 
 79 | 
 80 | 
 81 | 
 82 | function colorGen(){
 83 |   return 'rgb('+getRandomInt(110,175)+' '+getRandomInt(110,175)+' '+getRandomInt(110,175)+')';
 84 | }
 85 | function getRandomInt(min, max) {
 86 |   min = Math.ceil(min);
 87 |   max = Math.floor(max);
 88 |   return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive
 89 | }
 90 | 
 91 | 
 92 | 
 93 | //for type episode, need to look at grandparent, sample for media below
 94 | // http://config.plexServerIp:32400/library/metadata/7744?X-Plex-Token=config.plexToken
 95 | function getParentMedia(key){
 96 |   return new Promise(resolve => {
 97 | 
 98 | 
 99 |     console.log('KEY???', key);    ///should be in format /library/metadata/12345
100 | 
101 |       var clientServerOptions = {
102 |           uri: 'http://'+config.plexServerIp+':32400'+key+'?X-Plex-Token='+config.plexToken,
103 |           method: 'GET'
104 |       }
105 |       request(clientServerOptions, function (error, response, body) {
106 |           parseString(body, function (err, result) {
107 |             resolve(result);
108 |           });
109 |       });
110 |   });
111 | 
112 |   
113 |   //console.log('test test test');
114 | }
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | ////SAMPLE EPISODE JSON/////
122 | /*
123 | {
124 |   "event": "media.resume",
125 |   "user": true,
126 |   "owner": true,
127 |   "Account": {
128 |     "id": 924920,
129 |     "thumb": "https://plex.tv/users/80xxxxxxxxxxxxxxad/avatar?c=16xxxxxxxxx54",
130 |     "title": "Allison_Wonderland"
131 |   },
132 |   "Server": {
133 |     "title": "Plex Main",
134 |     "uuid": "e90xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxe14"
135 |   },
136 |   "Player": {
137 |     "local": true,
138 |     "publicAddress": "XXX.XXX.XXX.179",
139 |     "title": "Chrome",
140 |     "uuid": "lbxxxxxxxxxxxxxxxxxxxxxe5"
141 |   },
142 |   "Metadata": {
143 |     "librarySectionType": "show",
144 |     "ratingKey": "8150",
145 |     "key": "/library/metadata/8150",
146 |     "parentRatingKey": "7751",
147 |     "grandparentRatingKey": "7744",
148 |     "guid": "plex://episode/60341406ae8595002c187924",
149 |     "parentGuid": "plex://season/602e774fc96042002d099b4d",
150 |     "grandparentGuid": "plex://show/5d9f40086fc551001ef8e688",
151 |     "type": "episode",
152 |     "title": "Palm Beach County, FL 11",
153 |     "grandparentKey": "/library/metadata/7744",
154 |     "parentKey": "/library/metadata/7751",
155 |     "librarySectionTitle": "TV Shows",
156 |     "librarySectionID": 3,
157 |     "librarySectionKey": "/library/sections/3",
158 |     "grandparentTitle": "Cops",
159 |     "parentTitle": "Season 14",
160 |     "contentRating": "TV-MA",
161 |     "summary": "",
162 |     "index": 1,
163 |     "parentIndex": 14,
164 |     "viewOffset": 336000,
165 |     "viewCount": 1,
166 |     "lastViewedAt": 1665187453,
167 |     "thumb": "/library/metadata/8150/thumb/1633852677",
168 |     "art": "/library/metadata/7744/art/1652409778",
169 |     "parentThumb": "/library/metadata/7751/thumb/1633852676",
170 |     "grandparentThumb": "/library/metadata/7744/thumb/1652409778",
171 |     "grandparentArt": "/library/metadata/7744/art/1652409778",
172 |     "grandparentTheme": "/library/metadata/7744/theme/1652409778",
173 |     "duration": 1500000,
174 |     "originallyAvailableAt": "2001-09-01",
175 |     "addedAt": 1469122046,
176 |     "updatedAt": 1633852677,
177 |     "Guid": [
178 |       {
179 |         "id": "tvdb://445575"
180 |       }
181 |     ]
182 |   }
183 | }
184 | */


--------------------------------------------------------------------------------
/views/pages/index.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  4 | 
  5 |   <style>
  6 |     thing.closer {
  7 |         width: 0px;
  8 |         height: 0px;
  9 |         border: 50px solid transparent;
 10 |         position: fixed;
 11 |         top: -50px;
 12 |         left: -50px;
 13 |         transform: rotate(315deg);
 14 |         cursor: pointer;
 15 |     }
 16 |     .closer:hover{
 17 |         border-bottom-color: red;
 18 |     }
 19 |     body{
 20 |         margin: 0px; 
 21 |         font-family: Open Sans Semibold,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
 22 |         width: 1920px;
 23 |         height: 1080px;
 24 |         color: #efeef3;
 25 |         background: linear-gradient(237deg, #00000066, #00000026);
 26 |         background-repeat: no-repeat;
 27 |         background-attachment: fixed;
 28 |         outline: 3px solid red;
 29 |     }
 30 |     .rightPanel{
 31 |         float: right;
 32 |         width: 675px;
 33 |         margin: 25px 25px;
 34 |         background: linear-gradient(225deg, #00000078, #00000036);
 35 |         padding: 25px 30px;
 36 |     }
 37 |     img.poster {
 38 |         width: 290px;
 39 |         float: right;
 40 |         box-shadow: 2px 2px 9px 0px #00010799;
 41 |         border-radius: 4px;
 42 |     }
 43 |     .title {
 44 |         font-size: 32px;
 45 |         font-weight: 700;
 46 |         line-height: 37px;
 47 |     }
 48 |     .detailsText {
 49 |         padding: 0 10px 0 0;
 50 |         display: inline-block;
 51 |         width: 350px;
 52 |         margin-top: -6px;
 53 |         font-weight: 400;
 54 |         font-size: 20px;
 55 |     }
 56 |     img.tmdbLogo {
 57 |         float: right;
 58 |         height: 14px;
 59 |         position: relative;
 60 |         top: 8px;
 61 |     }
 62 |     .parentTitle {
 63 |         font-size: 24px;
 64 |         line-height: 22px;
 65 |         font-weight: 100;
 66 |         padding-bottom: 12px;
 67 |     }
 68 |     .summary{
 69 |         padding-top: 12px;
 70 |     }
 71 | 
 72 | 
 73 | 
 74 | 
 75 | 
 76 |     .scroller {
 77 |         height: 670px;
 78 |         overflow-y: scroll;
 79 |         width: 1137px;
 80 |         display: inline-block;
 81 |         margin-top: 20px;
 82 |         position: fixed;
 83 |     }
 84 |     .scroller::-webkit-scrollbar {
 85 |         display: none;
 86 |     }
 87 |     .faces {
 88 |         float: left;
 89 |         width: 1070px;
 90 |         display: grid;
 91 |         gap: 4px;
 92 |         grid-template-columns: auto auto auto auto auto auto auto;
 93 |         margin: 0px 20px;
 94 |     }
 95 | 
 96 |     .faceCard {
 97 |         width: 145px;
 98 |         height: 200px;
 99 |         background: linear-gradient(130deg, #00000078, #00000036);
100 |         margin: 5px;
101 |         padding: 10px 0 0 0;
102 |         border-radius: 4px;
103 |     }
104 |     .faceCard:hover {
105 |         /*cursor: pointer;
106 |         width: 500px;
107 |         height: 600px;
108 |         background-color: #000000a6;
109 |         transition: background-color 4s cubic-bezier(.47,1.64,.41,.8), width 2s, height 3s;
110 |         position: fixed;
111 |         z-index: 1;*/
112 |     }
113 |     .faceCard img {
114 |         width: 150px;
115 |         height: auto;
116 |         display: inline;
117 |         margin: 0 auto;
118 |         height: auto;
119 |         width: 100%;
120 |         position: relative;
121 |     }
122 |     span.cropper {
123 |         box-shadow: 2px 2px 9px 0px #00010799;
124 |         width: 100px;
125 |         height: 100px;
126 |         position: relative;
127 |         overflow: hidden;
128 |         border-radius: 50%;
129 |         display: inline-block;
130 |     }
131 |     .actorBadge {
132 |         font-weight: 700;
133 |         font-size: 65px;
134 |         display: block;
135 |         -webkit-text-stroke: 2px #8c8c8c;
136 |         width: 100px;
137 |         height: 100px;
138 |         position: absolute;
139 |         line-height: 95px;
140 |     }
141 |     .actorName {
142 |         font-weight: 500;
143 |         font-size: 18px;
144 |         padding: 8px 6px;
145 |         line-height: 18px;
146 |         overflow: hidden;
147 |         display: flex;
148 |         align-items: center;
149 |         justify-content: center;
150 |         flex-direction: column;
151 |         height: 80px;
152 |     }
153 |     .role {
154 |         font-weight: 400;
155 |         font-size: 17px;
156 |         padding-top: 10px;
157 |     }
158 | 
159 |     /*card flip stuff*/
160 |     .cardContent {
161 |       position: absolute;
162 |       width: 100%;
163 |       height: 100%;
164 |       box-shadow: 0 0 15px rgba(0,0,0,0.1);
165 | 
166 |       transition: transform 1s;
167 |       transform-style: preserve-3d;
168 |     }
169 |     .faceCard {
170 |       perspective: 500px;
171 |     }
172 | 
173 |     .faceCard:hover .cardContent {
174 |       transform: rotateY( 180deg ) ;
175 |       transition: transform 0.5s;
176 |     }
177 | 
178 |     .cardFront,
179 |     .cardBack {
180 |       text-align: center;
181 |       backface-visibility: hidden;
182 |     }
183 | 
184 |     .cardBack {
185 |       transform: rotateY( 180deg );
186 |       position: relative;
187 |       bottom: 200px;
188 |       font-size: 20px;
189 |       padding: 10px;
190 |     }
191 |     .cardButton {
192 |         background: #0000003b;
193 |         padding: 4px 4px 6px 4px;
194 |         margin-top: 10px;
195 |         border: 3px solid #dddce0;
196 |         border-radius: 25px;
197 |         font-size: 16px;
198 |         pointer: cursor;
199 |         cursor:  pointer;
200 |     }
201 | 
202 | 
203 |     /*details modal*/
204 |     .modal {
205 |       display: none; /* Hidden by default */
206 |       position: fixed; /* Stay in place */
207 |       z-index: 1; /* Sit on top */
208 |       left: 0;
209 |       top: 0;
210 |       width: 100%; /* Full width */
211 |       height: 100%; /* Full height */
212 |       overflow: auto; /* Enable scroll if needed */
213 |       background-color: rgb(0,0,0); /* Fallback color */
214 |       background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
215 |     }
216 | 
217 |     /* Modal Content/Box */
218 |     .modal-content {
219 |         background-color: #d9d9d9;
220 |         margin: 2% auto;
221 |         padding: 20px;
222 |         left: 160px;
223 |         position: relative;
224 |         border: 1px solid #888;
225 |         color: #747474;
226 |         font-size: 25px;
227 |         font-weight: normal;
228 |         width: 60%;
229 |     }
230 |     .modalBody img {
231 |         position: fixed;
232 |         left: 170px;
233 |         width: 330px;
234 |         border: 7px solid white;
235 |         transform: rotate(-2deg);
236 |         box-shadow: 1px 1px 9px #414141db;
237 |     }
238 |     .roleThumb img {
239 |         height: 100px;
240 |         width: auto;
241 |         position: inherit;
242 |         border: none;
243 |     }
244 |     .roleCard {
245 |         width: 340px;
246 |         margin: 10px;
247 |         padding: 10px;
248 |         background-color: #ffffff85;
249 |         box-shadow: 1px 1px 5px #41414140;
250 |         font-size: 24px;
251 |     }
252 | 
253 |     .roleGrid {
254 |         display: inline-flex;
255 |         flex-flow: wrap;
256 |     }
257 | 
258 |     span.roleThumb {
259 |         float: left;
260 |         height: 100px;
261 |         margin-right: 14px;
262 |     }
263 | 
264 |     span.roleTitle {font-weight: 700;}
265 | 
266 |     span.roleYear {
267 |         padding: 0 7px;
268 |         font-weight: 100;
269 |     }
270 | 
271 |     span.roleCharacter {
272 |         display: block;
273 |         padding-top: 5px;
274 |     }
275 |     img.tmdbLogo2 {
276 |         float: left;
277 |         height: 15px;
278 |         position: relative;
279 |         top: 8px;
280 |     }
281 |     /* The Close Button */
282 |     .close {
283 |       color: #aaa;
284 |       float: right;
285 |       font-size: 28px;
286 |       font-weight: bold;
287 |     }
288 | 
289 |     .close:hover,
290 |     .close:focus {
291 |       color: black;
292 |       text-decoration: none;
293 |       cursor: pointer;
294 |     }
295 | 
296 | 
297 |   </style>
298 | 
299 | 
300 |   <body>
301 |     <div class="scroller">
302 |         <div class="faces leftPanel"> <!--can move a lot of this to partials later-->
303 |           <% if (plexData && plexData.roles) { %>
304 |             <% for(var i=0; i < plexData.roles.length && i < 51; i++) {%>
305 |               <center>
306 | 
307 |                 <div class="faceCard">
308 |                     <div class="cardContent">
309 |                         <div class="cardFront">
310 |                   <span class="cropper" style="background: <%= plexData.roles[i].randColor %>">
311 |                     <span class="actorBadge">
312 |                       <%= plexData.roles[i].tag.substring(0,1) %>
313 |                     </span>
314 |                     <img src="<%= plexData.roles[i].thumb %>"/>
315 |                   </span>
316 |                   <br/>
317 |                   <span class="actorName">
318 |                     <%= plexData.roles[i].tag %><br/>
319 |                     <span class="role">
320 |                       <%= plexData.roles[i].role %>
321 |                     </span>
322 |                   </span>
323 |               </div>
324 |               <div class="cardBack">
325 |                 <%= plexData.roles[i].tag %><br/>
326 |                 <div class="cardButton" onclick="getActorDetails('<%= plexData.roles[i].tag %>')"> View Details </div>
327 |             </div>
328 | 
329 | 
330 |                 </div>
331 |             </div>
332 |               </center>
333 |             <% } %>
334 |           <% } %>
335 |         </div>
336 |     </div>
337 |     <div class="rightPanel">
338 |       <% if (plexData) { %>
339 |       <div class="posterWrapper">
340 |         <img class="poster" src="<%= plexData.posterurl %>"/> 
341 |       </div>
342 |         <div class="detailsText">
343 |           <div class="title">
344 |             <%= plexData.title %>
345 |           </div>
346 |           <div class="parentTitle">
347 |             <%= plexData.show %>
348 |           </div>
349 |           <div class="dateLogoLine">
350 | 
351 |             <span class="releaseDate">
352 |                 <%= plexData.releaseDate %>
353 |             </span>
354 |             <img class="tmdbLogo" src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_short-8e7b30f73a4020692ccca9c88bafe5dcb6f8a62a4c6bc55cd9ba82bb2cd95f6c.svg"/>
355 |           </div>
356 |           <div class="summary">
357 |             <%= plexData.summary %>
358 |             <% if(plexData.summary == '' && plexData.parentRec != undefined){ %>
359 |                 <%= plexData.parentRec.summary %>
360 |                 <% if(plexData.parentRec.summary == ''){ %>
361 |                 There is no summary provided for this episode or series. 
362 |                 <% } %>
363 |             <% } %>
364 |           </div>
365 |         </div>
366 |       <% } %>
367 |     </div>
368 | 
369 | 
370 | 
371 | 
372 |     <!--details modal-->
373 |     <div id="myModal" class="modal">
374 |       <div class="modal-content">
375 |         <span class="close">&times;</span>
376 |         <span><img class="tmdbLogo2" src="https://www.themoviedb.org/assets/2/v4/logos/v2/blue_short-8e7b30f73a4020692ccca9c88bafe5dcb6f8a62a4c6bc55cd9ba82bb2cd95f6c.svg"/></span>
377 |         <p class="modalBody">Loading...</p>
378 |         <div class="fixResults TODO" style="display: none;">
379 |           Wrong <span class="fixName"></span>? Click here to select another...
380 |         </div>
381 |       </div>
382 |       
383 | 
384 |     </div>
385 | 
386 | 
387 | 
388 | 
389 | 
390 | 
391 | 
392 |     <thing class="closer" onclick="javascript:$('body')[0].innerHTML = '';"/>
393 |   </body> 
394 | </html>
395 | 
396 | 
397 | 
398 | <script> /*<!--TODO: add all this to backend-->*/
399 | 
400 | var modal = document.getElementById("myModal");
401 | 
402 | function getActorDetails(name){
403 |     console.log('Getting details for:', name);
404 |     modal.style.display = "block";
405 |     $('.modalBody').html('Loading role history for '+ name + '...');
406 |     var modalHtml = '';
407 |     $('.fixName').html(name);
408 |     //search for person...
409 |     $.get("https://api.themoviedb.org/3/search/person?api_key=<%= plexData.tvdbToken %>&language=en-US&query="+name+"&page=1&include_adult=false&region=US", function(data, status){
410 |         console.log("Data: " , data , "\nStatus: " , status);
411 |         let personId = 'UNSET';
412 |         if(status == 'success'){
413 |             data.results.forEach(function (person) {
414 |                 if(personId == 'UNSET' && person.known_for_department == 'Acting'){ //only set this once for now
415 |                     console.log('found actor...');
416 |                     personId = person.id;  ///could add these to array to allow cycling ids if first is mismatch
417 |                 }
418 |             });
419 |             //then call for details/roles....
420 |             $.get("https://api.themoviedb.org/3/person/"+personId+"?api_key=<%= plexData.tvdbToken %>&language=en-US&&append_to_response=combined_credits", function(data, status){
421 |                 console.log('got person data: ', data);
422 |                 if(data.deathday == null){
423 |                     data.deathday = '';
424 |                 }
425 |                 else{
426 |                     data.deathday = ' - '+data.deathday;
427 |                 }
428 |                 //poster prefix - https://image.tmdb.org/t/p/w500/
429 |                 if(data.profile_path != null){
430 |                     modalHtml += '<img src="https://image.tmdb.org/t/p/w500'+data.profile_path+'">';
431 |                 }
432 |                 modalHtml += '<em style="float:right; font-size: 20px;">'+data.birthday+data.deathday+'</em><h3>'+name+'</h3><h5>'+data.biography+'</h5>';
433 |                 if(data.combined_credits && data.combined_credits.cast){
434 |                     
435 |                     modalHtml += '<div class="roleGrid">';
436 |                     data.combined_credits.cast.forEach(function (role){
437 |                         var posterTag = '';
438 |                         if(role.release_date == null){
439 |                             if(role.first_air_date == null){
440 |                                 role.first_air_date = '';
441 |                             }
442 |                             role.release_date = role.first_air_date;
443 |                         }
444 |                         if(role.poster_path != null){
445 |                             posterTag = '<img src="https://image.tmdb.org/t/p/w500'+role.poster_path+'"/>'
446 |                         }
447 |                         if(role.original_name == undefined || role.original_name == null){
448 |                             if(role.original_title == undefined || role.original_title == null){
449 |                                 role.original_title = role.title;
450 |                             }
451 |                             role.original_name = role.original_title;
452 |                         }
453 | 
454 | 
455 |                         modalHtml += '<div class="roleCard"><span class="roleThumb">'+posterTag+'</span><span class="roleTitle">'+role.original_name+'</span><span class="roleYear">'+role.release_date.substring(0,4)+'</span><span class="roleCharacter">'+role.character+'</span></div>';
456 |                     });
457 |                     modalHtml += '</div>';
458 |                 }
459 | 
460 | 
461 |                 $('.modalBody').html(modalHtml);
462 | 
463 |             });
464 |             //https://api.themoviedb.org/3/person/{person_id}?api_key=<<api_key>>&language=en-US
465 |         }
466 |         else{
467 |             alert('Could not get role details. Check your tvdb token in config.json');
468 |         }
469 |     });
470 |     
471 | }
472 | 
473 | 
474 | // Get the <span> element that closes the modal
475 | var span = document.getElementsByClassName("close")[0];
476 | 
477 | 
478 | // When the user clicks on <span> (x), close the modal
479 | span.onclick = function() {
480 |   modal.style.display = "none";
481 |   $('.modalBody').html('');
482 |   $('.fixName').html('actor');
483 | 
484 | }
485 | 
486 | // When the user clicks anywhere outside of the modal, close it
487 | window.onclick = function(event) {
488 |   if (event.target == modal) {
489 |     modal.style.display = "none";
490 |     $('.modalBody').html('');
491 |     $('.fixName').html('actor');
492 |   }
493 | }
494 | 
495 | 
496 | </script>
497 | 
498 | 
499 | 
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 


--------------------------------------------------------------------------------