https://sensehack.github.io/miscellaneous/traktShows.html

1<!DOCTYPE html>
2<html>
3
4<body>
5
6
7    <p>Hello SensehacK</p>
8
9    <img id="output1">
10    <p id="showTitle1"> </p>
11    <p id="showEpTitle1"> </p>
12    <img id="output2">
13    <p id="showTitle2"> </p>
14    <p id="showEpTitle2"> </p>
15    <img id="output3">
16    <p id="showTitle3"> </p>
17    <p id="showEpTitle3"> </p>
18    <img id="output4">
19    <p id="showTitle4"> </p>
20    <p id="showEpTitle4"> </p>
21    <img id="output5">
22    <p id="showTitle5"> </p>
23    <p id="showEpTitle5"> </p>
24    <img id="output6">
25    <p id="showTitle6"> </p>
26    <p id="showEpTitle6"> </p>
27    <img id="output7">
28    <p id="showTitle7"> </p>
29    <p id="showEpTitle7"> </p>
30    <img id="output8">
31    <p id="showTitle8"> </p>
32    <p id="showEpTitle8"> </p>
33    <!-- output will go here -->
34
35
36    <p id="kautilya"> Get my recent shows History</p>
37
38
39    <button type="submit" onclick="showTrakt()">Search</button>
40    <button type="submit" onclick="imageDisplay()">Images</button>
41    <button type="submit" onclick="displayshowDetails()">shows</button>
42
43
44
45    

45<script>
46        var showImgsPath = []
47        var showIDsPath = []
48        var showTitleArr = []
49        var showEpTitleArr = []
50
51        var outputStrNo = 1;
52        var showTitleStrNo = 1;
53        var showEpTitleStrNo = 1;
54
55        function showTrakt() {
56            var request = new XMLHttpRequest();
57
58            var getRecentShowsHistory = "https://api.trakt.tv/users/sensehack/history/shows/"
59
60            var getRecentshowsHistory = "https://api.trakt.tv/users/sensehack/history/shows/"
61
62            // call url
63            request.open('GET', getRecentShowsHistory);
64
65
66            request.setRequestHeader('Content-Type', 'application/json');
67            request.setRequestHeader('trakt-api-version', '2');
68
69            // Client ID of Trial 2 cors.io
70            request.setRequestHeader('trakt-api-key',
71                'e76f84733301c6380989637d3c7cc0394f58ae5046b94649d9d65f18e31e43fa');
72
73
74            request.onreadystatechange = function () {
75
76                if (this.readyState === 4) {
77                    console.log('Status:', this.status);
78                    console.log('Headers:', this.getAllResponseHeaders());
79                    console.log('Body:', this.responseText);
80
81
82                    //Converting responseText String JSON to Javascript Object JSON.
83                    var traktJSON = this.responseText;
84                    var showIDTr = ""
85                    var traktObj = JSON.parse(traktJSON)
86
87
88                    //Accessing 8 json elements overall
89                    for (var i = 0; i < 8; i++) {
90                        console.log("Printing iteration number", i)
91
92                        // Trying to access show titles & EpTitle details  
93                        console.log("traktObj[i].id")
94                        console.log(traktObj[i].id)
95
96                        // Accessing show title
97                        var showTitle = traktObj[i].show.title
98                        console.log("accessing show title")
99                        console.log(showTitle)
100
101                        // Accessing show episode title
102                        var showEpTitle = traktObj[i].episode.title
103                        console.log("accessing show EpTitle")
104                        console.log(showEpTitle)
105
106                        // Accessing show title
107                        console.log("accessing .traktObj[i].show.id.tmdb")
108                        var showTmdbId = traktObj[i].show.ids.tmdb
109                        console.log(showTmdbId)
110                        showIDTr = showTmdbId
111
112                        // Storing show ID's in array
113                        showIDsPath.push(showIDTr)
114                        showTitleArr.push(showTitle)
115                        showEpTitleArr.push(showEpTitle)
116
117
118                        // Calling the function with user show ID
119                        UserAction(showIDTr, showTitle, showEpTitle)
120                    }
121
122                    console.log("showIDsPathMediaStreamTrackEvent")
123                    console.log(showIDsPath)
124
125                    //You can call whatever you want after the function of API show Details & show Images are retrieved. 
126                    // After this stage the synchronous dependency of show images & text is already done.
127                    // Display show Text
128                    displayshowDetails()
129
130                }
131
132            };
133
134            request.send();
135
136        }
137
138        function UserAction(showIDT, mTitle, mEpTitle) {
139
140            // Variables 
141            var urlTMDB = "https://api.themoviedb.org/3/tv/"
142            var showID = showIDT;
143            var apiKeyTMDB = "?api_key=eab66c078f08232f3a3dec068c6a14d3";
144            var langTMDB = "&language=en-US";
145            var fullUrlTMDB =
146                "https://api.themoviedb.org/3/tv/60573?api_key=eab66c078f08232f3a3dec068c6a14d3&language=en-US";
147            var showTitle = mTitle;
148            var showEpTitle = mEpTitle;
149
150            console.log(showTitle)
151            console.log(showEpTitle)
152
153            var concatTmdbshowURL = urlTMDB + showID + apiKeyTMDB + langTMDB
154            console.log("concatTmdbshowURL urlTMDB + showID + apiKeyTMDB + langTMDB")
155            console.log(concatTmdbshowURL)
156            console.log("showIDT")
157            console.log(showIDT)
158
159            // Last FM API Integration Testing
160            fetch(concatTmdbshowURL)
161                .then(function (response) {
162                    return response.json();
163                })
164                .then(function (jsonResponse) {
165
166                    console.log(jsonResponse)
167                    console.log("type of jsonresponse")
168                    console.log(typeof (jsonResponse))
169
170
171                    var poster = jsonResponse.poster_path
172                    console.log("printing jsonResponse.poster_path")
173                    console.log(jsonResponse.poster_path)
174                    var imageTMDB = "https://image.tmdb.org/t/p/w342/"
175                    var fullImageTMDB = imageTMDB + poster
176                    console.log("fullImageTMDB imageTMDB + poster")
177                    console.log(fullImageTMDB)
178
179                    //Adding image paths to the array
180                    showImgsPath.push(fullImageTMDB)
181                    console.log("printing in fetch method")
182                    console.log(showTitle)
183                    console.log(showEpTitle)
184                    //Calling individual function image paths urls from TMDB
185                    singleImageDisplay(fullImageTMDB)
186
187
188
189                })
190
191        }
192
193
194        function singleImageDisplay(imgPath) {
195            var outputStr = "output"
196
197            // Displaying 8 last watch shows images
198            console.log("imageDisplay2(imgPath")
199            console.log(imgPath)
200
201            console.log(outputStr)
202            outputStr = outputStr + outputStrNo;
203
204            console.log("outputStr = outputStr + outputStrNo;")
205            console.log(outputStr)
206
207            // Incrementing the html tag ID string value
208            outputStrNo = (outputStrNo + 1)
209            console.log("outputStrNo = (outputStrNo + 1)")
210            console.log(outputStrNo)
211
212            document.getElementById(outputStr).src = imgPath;
213
214        }
215
216
217
218

219        function displayshowDetails() {
220            for (i = 0; i < 8; i++) {
221
222                var showTitleStr = "showTitle"
223                var showEpTitleStr = "showEpTitle"
224
225                showTitleStr = showTitleStr + showTitleStrNo
226                showEpTitleStr = showEpTitleStr + showEpTitleStrNo
227
228                console.log("showTitleStr")
229                console.log(showTitleStr)
230                console.log("showEpTitleStr")
231                console.log(showEpTitleStr)
232
233                console.log("showTitleArr[i]")
234                console.log(showTitleArr[i])
235                console.log("showEpTitleArr[i]")
236                console.log(showEpTitleArr[i])
237
238                console.log(typeof (showTitleArr[i]))
239                console.log(typeof (showEpTitleArr[i]))
240                console.log(typeof (String(showEpTitleArr[i])))
241
242                console.log(typeof (showTitleStr))
243                console.log(typeof (showEpTitleStr))
244
245                //Actual show Details
246                document.getElementById(showEpTitleStr).innerHTML = showEpTitleArr[i];
247                document.getElementById(showTitleStr).innerHTML = showTitleArr[i];
248
249                // Incrementing the html tag ID string value
250                console.log("// Incrementing the html tag ID string value")
251                showTitleStrNo = (showTitleStrNo + 1)
252                showEpTitleStrNo = (showEpTitleStrNo + 1)
253
254            }
255
256
257
258        }
259    </script>

259
260</body>
261
262</html>