1<!DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" href="/assets/application-e97e71ef3f1ff14cabe12a9e61a7ea477ab07ab3a0ef3f0888461a169af03075.css" media="all" /> 5
5<script src="/assets/application-26d9bc7deae833b909a448f27fc33c7543c9992aa1c1be01d00e77ee5c3aef0f.js" data-turbo-track="reload" defer="defer"></script>
5 6 <meta name="csrf-param" content="authenticity_token" /> 7<meta name="csrf-token" content="Nb06i9iCKUczJOeAFcuHyRbSPVm61_oMXQiEI_OgyaeQlAnGVY15-M2keSZY-UuHMDW_A06bTRlk098uTk4sJw" /> 8 9 <title>Smash Notes | Podcast Shorts</title> 10<meta content='Smash Notes | Podcast Shorts' property='og:title'> 11<meta content='Smash Notes | Podcast Shorts' name='twitter:title'> 12<meta property="og:type" content="website"> 13<meta property="og:site_name" content="Smash Notes"> 14<link rel="preconnect" href="https://smashnotes.s3.us-east-2.amazonaws.com"> 15<link rel="preconnect" href="https://s3.us-east-2.amazonaws.com/public.smashnotes.com"> 16<link rel="preconnect" href="https://smashnotes.imgix.net"> 17<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 18<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 19<meta http-equiv="cleartype" content="on" /> 20<meta name="application-name" content="Smash Notes" /> 21<meta name="twitter:card" content="summary_large_image" /> 22<meta name="twitter:site" content="@smashnotes" /> 23<meta name="twitter:domain" content="smashnotes.com" /> 24<meta name="twitter:creator" content="@smashnotes" /> 25<meta name="language" content="en-US"> 26<meta property="og:locale" content="en_US"> 27<meta name="apple-itunes-app" content="app-id=id1462107914, affiliate-data=1001l32CT"> 28<link href='https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/smash-notes-com-logo-may-17-2020.jpg' rel='apple-touch-icon-precomposed' type='image/png' /> 29<meta content='Smash Notes is podcast summaries you can learn from. Can coffee kill you? What's the meaning of life? Does a billion dollar make you happy? ... Smash Notes has the answers to these and thousands of other questions, curated from the best podcasts, every day.' property='og:description' /> 30<meta name='description' content='Smash Notes is podcast summaries you can learn from. Can coffee kill you? What's the meaning of life? Does a billion dollar make you happy? ... Smash Notes has the answers to these and thousands of other questions, curated from the best podcasts, every day.' /> 31<meta property="og:logo" content='https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/smash-notes-com-logo-may-17-2020.jpg' /> 32<meta property="og:image" content="https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/newsletter/smash-notes-newsletter-one-summary-white-may-17-2020.jpg 33" /> 34<meta property="twitter:image" content="https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/newsletter/smash-notes-newsletter-one-summary-white-may-17-2020.jpg 35" /> 36<link rel="icon" type="image/png" href="https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/smash-notes-com-logo-may-17-2020.jpg"> 37<meta name="msvalidate.01" content="69A9390812B55F7469D90DA433EA1686" /> 38<meta http-equiv="content-language" content="en-us"> 39 40<link rel="alternate" type="application/rss+xml" title="Smash Notes Podcast" href="https://anchor.fm/s/c7eb5ec/podcast/rss" /> 41<link rel="alternate" type="application/rss+xml" title="RSS" href="https://smashnotes.com/rss.rss" /> 42<meta name="theme-color" content="#56a4bc" media="(prefers-color-scheme: light)"> 43<meta name="theme-color" content="rgb(14, 27, 46)" media="(prefers-color-scheme: dark)"> 44 45
46<script type="application/ld+json"> 47 { 48 "@context": "http://schema.org", 49 "@type": "Organization", 50 "url": "https://smashnotes.com", 51 "name": "Smash Notes", 52 "logo": "https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/smash-notes-com-logo-may-17-2020.jpg", 53 "founder": { 54 "@type": "Person", 55 "name": "Kirill Zubovsky", 56 "jobTitle": "Founder", 57 "url": "https://kirillzubovsky.com" 58 } 59 } 60</script>
60 61
62<script async src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4" crossorigin="anonymous"></script>
62 63 </head> 64 65 <body class="feedPage"> 66 67 <div class='application-container' id='application-container'> 68 <main class="application-body"> 69 <div class="application-body-header"> 70 <div class="notification-bar"><div onClick='dismissNotifications()' title='Click to dismiss' class="notification-message "> </div></div> 71 72 73<div class='landing-logo-container'> 74 <div style='float:left'> 75 <img src='https://s3.us-east-2.amazonaws.com/public.smashnotes.com/website/smash-notes-com-logo-may-17-2020.jpg' class='front-page-logo' width='100px' height='100px' /> 76 </div> 77 78 <div class='front-page-logo-title'> 79 <h1>Discover your new favorite podcast</h1> 80 <h2 class='hidden-mobile'>Podcast shorts curated by listeners.</h2> 81 </div> 82 <div class='clear'></div> 83</div> 84 85<div class='autoplayer-container'> 86 <div 87 data-controller="simple-player" 88 data-simple-player-audio-url-value="https://chtbl.com/track/524GE/traffic.megaphone.fm/VMP9674854646.mp3" 89 data-simple-player-title-value="" 90 data-simple-player-image-url-value="https://smashnotes.s3.us-east-2.amazonaws.com/img/Melinda_Gates_%28live_%29_on_stopping_climate_change__ending_malaria__and_the_problems_money_can%E2%80%99t_solve2019_08_14_17_19_59_UTC.jpeg" 91 data-simple-player-start-time-value="0" 92 data-simple-player-default-playback-rate-value="1.1" 93 data-simple-player-is-fixed-value="false" 94 data-simple-player-share-link-value="https://smashnotes.com/p/the-ezra-klein-show/e/melinda-gates-live-on-stopping-climate-change-ending-malaria-and-the-problems-money-can-t-solve/s/what-does-warren-buffet-think-of-climate-change?playtime=1930.237638&shared=true" 95 data-simple-player-segment-ids-value="[260,2843,1254,1235,543,2980,2323,1984,2995,1771,1234,1395,3408,253,1777,131,776,1822,2978,1104,661,46,3406,2815,1041]" 96 data-simple-player-show-content-value="false" 97></div> 98 99 <div class='currently-playing-title' style='padding: 12px 16px; text-align: center;'></div> 100 101 <div id="SmashNotesSegments" style=" 102 display: flex; 103 justify-content: flex-start; 104 flex-direction: column; 105 vertical-align: top; 106 position: relative; 107 max-width: 100%; 108 border-radius: inherit; 109 margin: 0 auto; 110 overflow: scroll; 111 background: transparent; 112 padding: 16px; 113 "> 114 <div class="playable-segments-container" style=" 115 display: flex; 116 justify-content: flex-start; 117 flex-direction: row; 118 vertical-align: top; 119 position: relative; 120 max-width: 100%; 121 border-radius: inherit; 122 min-height: 150px; 123 margin: 0 auto; 124 "> 125 <turbo-frame class="playable-turbo" data-identifier="260" loading="lazy" id="single_autoplayable_segment_260" src="/s/autoplay/260?show_content=false" target="_top"> 126 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 127</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2843" loading="lazy" id="single_autoplayable_segment_2843" src="/s/autoplay/2843?show_content=false" target="_top"> 128 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 129</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1254" loading="lazy" id="single_autoplayable_segment_1254" src="/s/autoplay/1254?show_content=false" target="_top"> 130 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 131</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1235" loading="lazy" id="single_autoplayable_segment_1235" src="/s/autoplay/1235?show_content=false" target="_top"> 132 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 133</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="543" loading="lazy" id="single_autoplayable_segment_543" src="/s/autoplay/543?show_content=false" target="_top"> 134 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 135</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2980" loading="lazy" id="single_autoplayable_segment_2980" src="/s/autoplay/2980?show_content=false" target="_top"> 136 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 137</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2323" loading="lazy" id="single_autoplayable_segment_2323" src="/s/autoplay/2323?show_content=false" target="_top"> 138 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 139</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1984" loading="lazy" id="single_autoplayable_segment_1984" src="/s/autoplay/1984?show_content=false" target="_top"> 140 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 141</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2995" loading="lazy" id="single_autoplayable_segment_2995" src="/s/autoplay/2995?show_content=false" target="_top"> 142 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 143</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1771" loading="lazy" id="single_autoplayable_segment_1771" src="/s/autoplay/1771?show_content=false" target="_top"> 144 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 145</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1234" loading="lazy" id="single_autoplayable_segment_1234" src="/s/autoplay/1234?show_content=false" target="_top"> 146 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 147</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1395" loading="lazy" id="single_autoplayable_segment_1395" src="/s/autoplay/1395?show_content=false" target="_top"> 148 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 149</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="3408" loading="lazy" id="single_autoplayable_segment_3408" src="/s/autoplay/3408?show_content=false" target="_top"> 150 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 151</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="253" loading="lazy" id="single_autoplayable_segment_253" src="/s/autoplay/253?show_content=false" target="_top"> 152 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 153</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1777" loading="lazy" id="single_autoplayable_segment_1777" src="/s/autoplay/1777?show_content=false" target="_top"> 154 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 155</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="131" loading="lazy" id="single_autoplayable_segment_131" src="/s/autoplay/131?show_content=false" target="_top"> 156 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 157</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="776" loading="lazy" id="single_autoplayable_segment_776" src="/s/autoplay/776?show_content=false" target="_top"> 158 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 159</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1822" loading="lazy" id="single_autoplayable_segment_1822" src="/s/autoplay/1822?show_content=false" target="_top"> 160 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 161</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2978" loading="lazy" id="single_autoplayable_segment_2978" src="/s/autoplay/2978?show_content=false" target="_top"> 162 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 163</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1104" loading="lazy" id="single_autoplayable_segment_1104" src="/s/autoplay/1104?show_content=false" target="_top"> 164 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 165</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="661" loading="lazy" id="single_autoplayable_segment_661" src="/s/autoplay/661?show_content=false" target="_top"> 166 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 167</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="46" loading="lazy" id="single_autoplayable_segment_46" src="/s/autoplay/46?show_content=false" target="_top"> 168 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 169</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="3406" loading="lazy" id="single_autoplayable_segment_3406" src="/s/autoplay/3406?show_content=false" target="_top"> 170 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 171</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="2815" loading="lazy" id="single_autoplayable_segment_2815" src="/s/autoplay/2815?show_content=false" target="_top"> 172 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 173</turbo-frame> <turbo-frame class="playable-turbo" data-identifier="1041" loading="lazy" id="single_autoplayable_segment_1041" src="/s/autoplay/1041?show_content=false" target="_top"> 174 <div class='loading' style="padding: 20px; text-align: center; color: #999;">Loading...</div> 175</turbo-frame> </div> 176 </div> 177 178
178<script> 179 var playableSegmentsArrayOfIds = [260,2843,1254,1235,543,2980,2323,1984,2995,1771,1234,1395,3408,253,1777,131,776,1822,2978,1104,661,46,3406,2815,1041]; 180 var currentlyPlayingSegmentId = null; 181 var currentlyPlayingIndexOfAudioArray = 0; 182 var autoplayState = null; 183 var autoplayID = null; 184 const SEGMENT_DURATION = 60000; 185 var showSegmentContent = false; 186 187 // Define autoplaySegment function globally with error handling 188 window.autoplaySegment = function(segmentId) { 189 try { 190 console.log('Playing segment:', segmentId); 191 192 // Find the segment element 193 const segmentElement = document.querySelector(`[data-identifier="${segmentId}"]`); 194 if (!segmentElement) { 195 console.error('Segment element not found:', segmentId); 196 return false; 197 } 198 199 // Get the play button data 200 const playButton = segmentElement.querySelector('.js-single-segment-play-button'); 201 if (!playButton) { 202 console.error('Play button not found for segment:', segmentId); 203 return false; 204 } 205 206 // Validate audio source 207 const audioSource = playButton.dataset.audioSource || ''; 208 if (!audioSource) { 209 console.error('No audio source found for segment:', segmentId); 210 return false; 211 } 212 213 // Extract data from the play button 214 const audioData = { 215 audioUrl: audioSource, 216 title: `${playButton.dataset.audioPodcastTitle || 'Unknown'} - ${playButton.dataset.audioEpisodeTitle || 'Unknown'}`, 217 imageUrl: playButton.dataset.imageSource || '', 218 startTime: parseInt(playButton.dataset.playtime) || 0, 219 shareLink: playButton.dataset.sharingString || '' 220 }; 221 222 console.log('Audio data:', audioData); 223 224 // Update active segment styling 225 document.querySelectorAll('.playable-turbo').forEach(el => el.classList.remove('active')); 226 segmentElement.classList.add('active'); 227 228 // Update current playing segment 229 currentlyPlayingSegmentId = segmentId; 230 currentlyPlayingIndexOfAudioArray = playableSegmentsArrayOfIds.indexOf(segmentId); 231 232 // Dispatch custom event for the player to handle 233 const event = new CustomEvent('playSegment', { 234 detail: audioData 235 }); 236 document.dispatchEvent(event); 237 238 // Update the currently playing title 239 const titleElement = document.querySelector('.currently-playing-title'); 240 if (titleElement) { 241 titleElement.innerHTML = `<small>Now playing: ${audioData.title}</small>`; 242 } 243 244 return true; 245 } catch (error) { 246 console.error('Error in autoplaySegment:', error); 247 return false; 248 } 249 }; 250 251 // Auto-play first segment on load if available 252 document.addEventListener('DOMContentLoaded', () => { 253 // Check if Turbo is available 254 const turboAvailable = typeof Turbo !== 'undefined'; 255 console.log('Turbo available in production:', turboAvailable); 256 257 // If Turbo is not available, use manual fetch as fallback 258 if (!turboAvailable) { 259 setTimeout(() => { 260 const loadingFrames = document.querySelectorAll('.loading'); 261 loadingFrames.forEach(frame => { 262 if (frame.textContent.includes('Loading...')) { 263 const turboFrame = frame.closest('turbo-frame'); 264 if (turboFrame && turboFrame.id) { 265 const segmentId = turboFrame.id.replace('single_autoplayable_segment_', ''); 266 console.log('Manual fetch for segment:', segmentId); 267 268 fetch(`/s/autoplay/${segmentId}?show_content=${showSegmentContent}`) 269 .then(response => response.text()) 270 .then(html => { 271 turboFrame.innerHTML = html; 272 }) 273 .catch(error => { 274 console.error(`Failed to load segment ${segmentId}:`, error); 275 frame.innerHTML = '<div style="color: #ef4444;">Failed to load segment</div>'; 276 }); 277 } 278 } 279 }); 280 }, 1000); 281 } 282 283 // Auto-play after segments load 284 if (playableSegmentsArrayOfIds.length > 0) { 285 setTimeout(() => { 286 const firstSegment = document.querySelector(`[data-identifier="${playableSegmentsArrayOfIds[0]}"]`); 287 if (firstSegment && firstSegment.querySelector('.js-single-segment-play-button')) { 288 console.log('Auto-playing first segment'); 289 autoplaySegment(playableSegmentsArrayOfIds[0]); 290 } 291 }, 3000); // Wait for segments to load 292 } 293 }); 294 </script>
294 295 296<style> 297 .autoplay-state.active { 298 background-color: #22c55e !important; 299 } 300 301 .playable-turbo { 302 transition: all 0.3s ease-in-out; 303 } 304 305 .playable-turbo.active { 306 z-index: 1; 307 } 308 309 .playable-turbo.active > .single-segment { 310 position: relative; 311 border-color: var(--color-primary-500) !important; 312 box-shadow: 0 0 12px rgba(14, 165, 233, 0.3) !important; 313 background-color: rgba(14, 165, 233, 0.08) !important; 314 transform: translateY(-2px); 315 transition: all 0.3s ease; 316 } 317 318 .playable-turbo.active > .single-segment::before { 319 content: ''; 320 position: absolute; 321 left: -8px; 322 top: 50%; 323 transform: translateY(-50%); 324 width: 4px; 325 height: 80%; 326 background-color: var(--color-primary-500); 327 border-radius: 2px; 328 } 329 330 .single-segment-title-divider { 331 height: 1px; 332 background-color: rgba(14, 165, 233, 0.2); 333 margin: 8px 0; 334 } 335 336 @keyframes pulse { 337 0% { opacity: 0.6; } 338 50% { opacity: 1; } 339 100% { opacity: 0.6; } 340 } 341 342 .segment-now-playing { 343 display: inline-flex; 344 align-items: center; 345 animation: pulse 2s infinite; 346 font-weight: bold; 347 color: var(--color-primary-600) !important; 348 padding-left: 4px; 349 margin-right: 4px; 350 } 351 352 #smash-toast { 353 position: fixed; 354 bottom: 80px; 355 left: 50%; 356 transform: translateX(-50%); 357 padding: 8px 16px; 358 background-color: rgba(0, 0, 0, 0.8); 359 color: white; 360 border-radius: 4px; 361 font-size: 14px; 362 z-index: 9999; 363 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 364 opacity: 1; 365 transition: opacity 0.3s ease; 366 } 367 368 #smash-toast.fade-out { 369 opacity: 0; 370 } 371 372 :root { 373 --color-primary-100: #e0f2fe; 374 --color-primary-200: #bae6fd; 375 --color-primary-400: #38bdf8; 376 --color-primary-500: #0ea5e9; 377 --color-primary-600: #0284c7; 378 --color-primary-800: #075985; 379 --color-primary-900: #0c4a6e; 380 } 381 382 .bg-primary-100 { background-color: var(--color-primary-100); } 383 .bg-primary-500 { background-color: var(--color-primary-500); } 384 .bg-primary-600 { background-color: var(--color-primary-600); } 385 .bg-primary-900 { background-color: var(--color-primary-900); } 386 387 .border-primary-500 { border-color: var(--color-primary-500); } 388 389 .text-primary-500 { color: var(--color-primary-500); } 390 391 .fill-primary-400 { fill: var(--color-primary-400); } 392 .fill-primary-600 { fill: var(--color-primary-600); } 393 394 .hover\:bg-primary-200:hover { background-color: var(--color-primary-200); } 395 .hover\:bg-primary-600:hover { background-color: var(--color-primary-600); } 396 .hover\:bg-primary-800:hover { background-color: var(--color-primary-800); } 397 398 .focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); } 399</style> 400</div> 401 402 403<div style="margin: 5rem 0;"> 404 405 <h3 style="margin: 0; font-size: 1.1rem; opacity: 0.9;">Sponsored by <a href='https://www.discoseo.com?utm_source=smashnotes&utm_medium=referral&utm_term=discoseo&utm_campaign=sponsored' title='Disco SEO' target="_blank"><u>DiscoSEO.com</u></a> - Grow your business with AI SEO</h3> 406 407 408 <div id="shorts-container" class="shorts-row" style="display: none;"></div> 409 410 <style> 411 .shorts-row { 412 display: flex; 413 flex-wrap: wrap; 414 justify-content: center; 415 gap: 15px; 416 margin: 20px 0; 417 } 418 419 .short-item { 420 flex: 0 0 auto; 421 } 422 423 .short-item iframe { 424 width: 280px; 425 height: 498px; 426 } 427 428 @media (max-width: 1200px) { 429 .short-item iframe { 430 width: 200px; 431 height: 444px; 432 } 433 } 434 435 @media (max-width: 992px) { 436 .shorts-row { 437 justify-content: center; 438 } 439 } 440 </style> 441 442
442<script> 443 const API_KEY = 'AIzaSyCqGPWRU97aWpnApseC-wASzIMZAPAd7k4'; 444 const CHANNEL_ID = 'UCMkcbUwXtZJPWkR5JvUCAtA'; 445 446 async function fetchLatestShorts() { 447 try { 448 // Create shorts-specific playlist ID by replacing UC with UUSH 449 const shortsPlaylistId = 'PLBG7gnlCInaiQLEoFe_NjvUyHxILPRiEt' 450 // const shortsPlaylistId = 'UUSH' + CHANNEL_ID.substring(2); //backup 451 452 // Fetch shorts directly from the shorts playlist 453 const playlistUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=4&playlistId=${shortsPlaylistId}&key=${API_KEY}`; 454 const playlistResponse = await fetch(playlistUrl); 455 const playlistData = await playlistResponse.json(); 456 457 if (playlistData.error) { 458 // Fallback to original method if playlist approach fails 459 fallbackToOriginalMethod(); 460 return; 461 } 462 463 // Display Shorts 464 const container = document.getElementById('shorts-container'); 465 if (!container) return; 466 467 container.innerHTML = ''; // Clear any existing content 468 469 if (!playlistData.items || !Array.isArray(playlistData.items)) { 470 console.error('No items returned from playlist API'); 471 container.innerHTML = '<p>No YouTube shorts available at this time.</p>'; 472 return; 473 } 474 475 playlistData.items.forEach(item => { 476 if (item && item.snippet && item.snippet.resourceId && item.snippet.resourceId.videoId) { 477 const videoId = item.snippet.resourceId.videoId; 478 const shortDiv = document.createElement('div'); 479 shortDiv.className = 'short-item'; 480 shortDiv.innerHTML = `<iframe width="315" height="560" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`; 481 482 container.appendChild(shortDiv); 483 } 484 }); 485 } catch (error) { 486 console.error('Error fetching shorts:', error); 487 // Fallback to original method if the new approach fails 488 fallbackToOriginalMethod(); 489 } 490 } 491 492 // Fallback method using the original approach (filtering by duration) 493 async function fallbackToOriginalMethod() { 494 try { 495 // Fetch recent videos 496 const searchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&maxResults=10&order=date&type=video&key=${API_KEY}`; 497 const searchResponse = await fetch(searchUrl); 498 const searchData = await searchResponse.json(); 499 500 // Get video IDs - with null check 501 if (!searchData || !searchData.items || !Array.isArray(searchData.items)) { 502 console.error('No videos found or API error'); 503 const container = document.getElementById('shorts-container'); 504 if (container) { 505 container.innerHTML = '<p>No YouTube shorts available at this time.</p>'; 506 } 507 return; 508 } 509 510 const videoIds = searchData.items.map(item => item.id && item.id.videoId).filter(Boolean).join(','); 511 512 if (!videoIds) { 513 console.error('No valid video IDs found'); 514 return; 515 } 516 517 // Fetch video details 518 const detailsUrl = `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=${videoIds}&key=${API_KEY}`; 519 const detailsResponse = await fetch(detailsUrl); 520 const detailsData = await detailsResponse.json(); 521 522 if (!detailsData || !detailsData.items || !Array.isArray(detailsData.items)) { 523 console.error('No video details found'); 524 return; 525 } 526 527 // Filter for Shorts (duration < 60s) 528 const shorts = detailsData.items 529 .filter(item => { 530 if (!item || !item.contentDetails || !item.contentDetails.duration) return false; 531 const duration = item.contentDetails.duration; // e.g., "PT45S" 532 const seconds = parseDuration(duration); 533 return seconds < 60; 534 }) 535 .slice(0, 4); // Take the latest 4 536 537 // Display Shorts 538 const container = document.getElementById('shorts-container'); 539 if (!container) return; 540 541 container.innerHTML = ''; // Clear any existing content 542 543 if (shorts.length === 0) { 544 container.innerHTML = '<p>No YouTube shorts available at this time.</p>'; 545 return; 546 } 547
548 shorts.forEach(short => { 549 if (short && short.id) { 550 const videoId = short.id; 551 const shortDiv = document.createElement('div'); 552 shortDiv.className = 'short-item'; 553 shortDiv.innerHTML = `<iframe width="315" height="560" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>`; 554 555 container.appendChild(shortDiv); 556 } 557 }); 558 } catch (error) { 559 console.error('Error in fallback method:', error); 560 // Show error message in the container 561 const container = document.getElementById('shorts-container'); 562 if (container) { 563 container.innerHTML = '<p>Unable to load YouTube shorts.</p>'; 564 } 565 } 566 } 567 568 // Parse ISO 8601 duration (e.g., "PT45S" -> 45 seconds) 569 function parseDuration(duration) { 570 if (!duration) return 0; 571 const match = duration.match(/PT(\d+)S/); 572 return match ? parseInt(match[1]) : 0; 573 } 574 575 // Call the function but handle any potential errors 576 try { 577 fetchLatestShorts(); 578 } catch (error) { 579 console.error('Failed to initialize shorts fetching:', error); 580 const container = document.getElementById('shorts-container'); 581 if (container) { 582 container.innerHTML = '<p>Unable to load YouTube shorts.</p>'; 583 } 584 } 585 </script>
585 586 587</div> 588 589<div style=" 590 display: none; 591 margin: 3rem 0; 592 /* display: flex; */ 593 flex-direction: row; 594 position: relative; 595 flex-wrap: wrap; 596 flex: 1 1; 597 justify-content: var(--justify-content); 598 gap: 3%; 599 "> 600 <h3> Suggested For Podcasters </h3> 601 <div class='break'></div> 602 <div style=" 603 display: flex; 604 flex-basis: 47%; 605 flex-grow: 0; 606 margin-right: calc(2*var(--page-margin)); 607 margin-bottom: calc(4*var(--page-margin)); 608 padding: calc(2*var(--page-padding)); 609 border-radius: var(--border-radius); 610 background: transparent; 611 color: var(--color-text-normal); 612 flex-direction: column; 613 "> 614 <div> 615 <img style="border-radius:7px; max-width: 100%;" src="/images/blog/five-reasons.jpg" /> 616 </div> 617 <div class='break'></div> 618 <div> 619 <h4>5 Reasons to Start a Podcast</h4> 620 <p>Podcasting can be an invaluable tool to promote a cause, to learn, and to make friends. 621 <br><a class='inline' href='http://smashnotes.com/updates/5-reasons-to-start-a-podcast'>Read More</a> 622 </p> 623 </div> 624 </div> 625 626 <div style=" 627 display: flex; 628 flex-basis: 47%; 629 flex-grow: 0; 630 margin-right: calc(2*var(--page-margin)); 631 margin-bottom: calc(4*var(--page-margin)); 632 padding: calc(2*var(--page-padding)); 633 border-radius: var(--border-radius); 634 background: transparent; 635 color: var(--color-text-normal); 636 flex-direction: column; 637 "> 638 <div> 639 <img style="border-radius:7px; max-width: 100%;" src="/images/blog/podcast-fast.jpg" /> 640 </div> 641 <div class='break'></div> 642 <div> 643 <h4>How to Edit a Podcast Fast</h4> 644 <p>Growing in popularity, podcasting is the most underestimated social media channel, giving you the most growth opportunity in the near future. 645 <br><a class='inline' href='http://smashnotes.com/updates/how-to-edit-a-podcast-fast'>Read More</a> 646 </p> 647 </div> 648 </div> 649 650</div> 651 652 653 </div> 654 <div class="application-body-left"></div> 655 <div class="application-body-middle"> 656 657 658 659 660 661 662 663 664
665<script type="text/javascript"> 666 var triggerAdvertising = function(clickTag) { 667 window.open(clickTag, '_blank'); 668 }; 669</script>
669 670 671 </div> 672 <!-- <div class="application-body-right"> 673 674 </div> --> 675 </main> 676 <div id='search-underlay'></div> 677 </div> 678 679 <div id='application-footer'> 680 <div class='inner-app-footer'> 681 <div class='footer-content'> 682 683 <div class='footer-content-section'> 684 <a class="smashnotesTitle" title="Smash Notes - Podcast summaries and notes every day." tabindex="1" href="/"> 685 <svg width="139px" height="29px" viewBox="0 0 309 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" title='Smash Notes'> 686 <title>Smash Notes</title> 687 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.849049388" font-family="Inter-ExtraBold, Inter" font-size="40" font-weight="900" letter-spacing="0.2"> 688 <text id="SMASH-NOTES" fill="#090808"> 689 <tspan x="5.48806818" y="39">SMASH NOTES</tspan> 690 </text> 691 </g> 692 </svg> 693</a> <div class='clear'></div> 694 </div> 695 696 <div class='footer-content-section'> 697 <h4>About us</h4> 698 <ul> 699 <li><a href="/about">Our story</a></li> 700 <li><a href="https://www.dropbox.com/sh/73qyn02w1dpuhyy/AAA7DleiReammlUl8ggpwUFaa?dl=0">Press Kit</a></li> 701 </ul> 702 703 <h4>Weekly Updates</h4> 704 <ul> 705 <li><a href="/updates/how-to-record-high-quality-webcam-video-on-a-budget">How to record high quality webcam video on a budget</a></li> 706 <li><a href="/updates/how-to-add-rel-nofollow-to-all-links-in-a-ruby-on-rails-app">How to add rel=nofollow to all links in a Ruby on Rails app</a></li> 707 <li><a href="/updates/5-reasons-to-start-a-podcast">5 Reasons to Start a Podcast </a></li> 708 </ul> 709 710 </div> 711 712 <div class='footer-content-section'> 713 714 <h4>Discover</h4> 715 <ul> 716 <li><a href="/podcast-suggestions">Daily podcast suggestions</a></li> 717 </ul> 718 719 <h4>Subscribe</h4> 720 <ul> 721 <li><a href="/newsletter">Email newsletter</a></li> 722 <li><a href="/updates">Blog</a></li> 723 <li><a href="https://plnk.to/smashnotes?to=page">Podcast</a></li> 724 <li><a target="_blank" href="https://twitter.com/smashnotes">Twitter</a></li> 725 <li><a target="_blank" href="https://www.linkedin.com/company/smashnotes">Linked In</a></li> 726 <li><a target="_blank" href="https://www.facebook.com/smashnotes">Facebook</a></li> 727 <li><a href="/rss">RSS</a></li> 728 </ul> 729 730 </div> 731 732 <div class='footer-content-section'> 733 734 <h4>Account</h4> 735 <ul> 736 <li><form class="button_to" method="post" action="https://smashnotes.com/auth/auth0"><button data-turbo="false" type="submit">Sign up</button><input type="hidden" name="authenticity_token" value="NnHcv6zrz9hEYSKc-vE0zq8pZazjuG94W_l1lRWFL5DmsX5908_ObNj88tz7xvIms2wD7h108dKIgeoxJwOKSg" autocomplete="off" /></form></li> 737 <li><form class="button_to" method="post" action="https://smashnotes.com/auth/auth0"><button data-turbo="false" type="submit">Member login</button><input type="hidden" name="authenticity_token" value="4R3qKkmW7ciSMCmUDOFaGiTPbCDtf4qenPOGy3aP6h8x3UjoNrLsfA6t-dQN1pzyOIoKYhOzFDRPixlvRAlPxQ" autocomplete="off" /></form></li> 738 </ul> 739 740 <h4>Support</h4> 741 <ul> 742 <li><a href="mailto:[email protected]">E: [email protected]</a></li> 743 </ul> 744 745 <h4>Promoted</h4> 746 <ul> 747 <li><a href="https://breckworks.com/?utm_source=smashnotes&utm_medium=referral&utm_term=coworking_breckenridge&utm_campaign=smashnotes_promoted_footer" target="_blank" rel="sponsored" title='Breckworks Coworking in Breckenridge Colorado'>
747Breckworks Coworking</a></li> 748 <li><a href="https://www.discoseo.com/?utm_source=smashnotes&utm_medium=referral&utm_term=brand_name_generator&utm_campaign=smashnotes_promoted_footer" target="_blank" rel="sponsored" title='Supercharge your SEO with Actionable Insights'>DiscoSEO.com</a></li> 749 <li><a href="https://www.deleteoldposts.com/?utm_source=smashnotes&utm_medium=referral&utm_term=deleteoldposts&utm_campaign=smashnotes_promoted_footer" target="_blank" rel="sponsored" title='Delete Old Tweets'>DeleteOldPosts.com</a></li> 750 </ul> 751 752 </div> 753 754 </div> 755 756 <div class='footer-content-5'> 757 758 <div class="mt-12 border-t border-gray-200 pt-8 flex flex-col md:flex-row items-center justify-between"> 759 <div class="flex flex-col md:flex-row items-center"> 760 <div class="mt-2 md:mt-0 md:ml-2 flex items-center"> 761 © 2025 Kirill Zubovsky. All Right Reserved 762 <span class="text-gray-400 text-sm px-2">|</span> 763 Made with <svg class="h-4 w-4 mx-1 text-red-400 inline-block" fill="currentColor" viewBox="0 0 20 20" style="max-width: 16px; max-height: 14px;"> 764 <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /> 765 </svg> by <a href="https://kirillzubovsky.com/?utm_source=smashnotes&utm_medium=referral&utm_term=kirillzubovsky&utm_campaign=smashnotes_promoted_footer" target="_blank" style="margin-left: 12px;">Kirill Zubovsky</a> 766 <span class="text-gray-400 text-sm px-2">|</span> 767 Transcription powered by 768 <span class="text-gray-400 text-sm px-1"></span> 769 <a href="http://transcriptking.com" target="_blank" class="text-gray-400 hover:text-blue-500 text-sm flex items-center"> 770 TranscriptKing 771 </a> 772 </div> 773 </div> 774 </div> 775 776 </div> 777 </div> 778 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 66 bytes, lines 778-779
778 779 <script async src="https://www.googletagmanager.com/gtag/js?id=
779G-F5WVS33VWG
vendor: 14 bytes, lines 779-780
779"></script> 780
780<script> 781
vendor: 154 bytes, lines 781-788
781window.dataLayer = window.dataLayer || []; 782 783 function gtag() { 784 dataLayer.push(arguments); 785 } 786 gtag('js', new Date()); 787 788 gtag('config', '
788G-F5WVS33VWG
vendor: 6 bytes, lines 788-789
788'); 789
789</script>
789 790 791 792
792<script> 793 // Not currently lazy-loading images as it does not provide as much 794 // speed upgrade as loading them via Stimulus 795 796 var lazyConfig = { 797 rootMargin: '0px 0px 50px 0px', 798 threshold: 0 799 }; 800 801 var observer = new IntersectionObserver(function(entries, self) { 802 entries.forEach(entry => { 803 if (entry.isIntersecting) { 804 lazyLoadOneImage(entry.target); 805 self.unobserve(entry.target); 806 } 807 }); 808 }, lazyConfig); 809 810 lazyLoadOneImage = function(lazyImage) { 811 lazyImage.style.backgroundImage = "url(" + lazyImage.dataset.src + ")"; 812 lazyImage.style.backgroundSize = 'cover'; 813 lazyImage.style.backgroundPosition = 'center'; 814 lazyImage.style.backgroundRepeat = 'no-repeat'; 815 lazyImage.style.borderRadius = '2px'; 816 if (lazyImage.style.height == "") { 817 lazyImage.style.height = '100%' 818 } 819 } 820 821 lazyLoadPodcastImages = function() { 822 targetArray = document.getElementsByClassName("lazy-load-podcast-img"); 823 if (targetArray.length > 0) { 824 if ('IntersectionObserver' in window) {
825 Array.from(targetArray).forEach(img => { 826 observer.observe(img); 827 }); 828 } else { 829 Array.from(targetArray).forEach(img => { 830 lazyLoadOneImage(img); 831 }); 832 } 833 } 834 }; 835 836 document.addEventListener('readystatechange', event => { 837 if (event.target.readyState === 'interactive') { 838 lazyLoadPodcastImages(); 839 } 840 }); 841 document.addEventListener('turbolinks:load', lazyLoadPodcastImages()) 842 </script>
842 843 844 845 <!-- Sometimes I need ramdom scripts --> 846
846<script> 847 var copyToClipboard = function(str) { 848 const el = document.createElement('textarea'); 849 el.value = str; 850 el.setAttribute('readonly', ''); 851 el.style.position = 'absolute'; 852 el.style.left = '-9999px'; 853 document.body.appendChild(el); 854 const selected = 855 document.getSelection().rangeCount > 0 ? 856 document.getSelection().getRangeAt(0) : 857 false; 858 el.select(); 859 document.execCommand('copy'); 860 document.body.removeChild(el); 861 if (selected) { 862 document.getSelection().removeAllRanges(); 863 document.getSelection().addRange(selected); 864 } 865 }; 866 var activateCopyLinkOnSegments = function() { 867 if (document.getElementsByClassName('segment-path-link').length > 0) { 868 Array.from(document.getElementsByClassName('segment-path-link')).forEach(function(element) { 869 element.addEventListener('click', function(e) { 870 e.preventDefault(); 871 copyToClipboard(this.getAttribute('data-link')); 872 this.innerHTML = "link copied â"; 873 return; 874 }); 875 }); 876 } 877 }(); 878 </script>
878 879 880 <!-- Start newsletter Pop on exit --> 881 <!--
881<script> 882 var activateExitPop = function(){ 883 if (document.cookie.indexOf("dismissExplainer=") < 0){ 884 if (window.innerWidth >= 1024){ 885 document.addEventListener('mouseout', (e) => { 886 if (e.toElement === null && e.relatedTarget === null){ 887 showEmailSubscribeModal(); 888 } 889 }) 890 }else{ 891 setTimeout(function(){showEmailSubscribeModal();},12000) 892 } 893 } 894 }; 895</script>
895 --> 896 897 <!--
897<script> 898 var trackSubscriptionOnAllForms = function(){ 899 document.querySelector("#mc-embedded-subscribe").addEventListener("click", function(){ 900 document.cookie = "dismissExplainer=true"; 901 }); 902 } 903 trackSubscriptionOnAllForms(); 904</script>
904 --> 905 906
906<script> 907 function dismissNotifications() { 908 document.getElementsByClassName("notification-message")[0].classList.remove("visible"); 909 document.getElementsByClassName("notification-message")[0].classList.innerHTML = ""; 910 return; 911 } 912 913 bodyScrollTarget = document.body; 914 keyPointsTarget = document.getElementsByClassName("feed-podcast-container --inside-episode"); 915 916 //Player resizing 917 audioPlayerAnchorElement = document.getElementsByClassName("podcast-player-achor-element")[0]; 918 919 //Sticky sidebar repositioning 920 stickySidebarAnchorElement = document.getElementsByClassName("sticky-sidebar-achor-element")[0]; 921 stickySidebarElement = document.getElementsByClassName("sticky-sidebar-element")[0]; 922 923 var isInViewport = function(elem) { 924 var bounding = elem.getBoundingClientRect(); 925 return ( 926 bounding.top >= (-bounding.height - 120) && 927 bounding.left >= 0 && 928 bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 929 bounding.right <= (window.innerWidth || document.documentElement.clientWidth) 930 ); 931 932 }; 933 934 // window.onscroll = function(e) { 935 // //"false" if direction is down and "true" if up 936 // if(this.oldScroll > this.scrollY){ 937 // //going up 938 // bodyScrollTarget.classList.remove("header-scroll-down"); 939 // if ((window.scrollY < 620) && !(keyPointsTarget[0] == undefined)){ 940 // if (keyPointsTarget[0].classList.contains("floating") == true){ 941 // keyPointsTarget[0].classList.remove('floating'); 942 // } 943 // } 944 // }else{ 945 // //going down 946 // if ((window.scrollY > 20) && (bodyScrollTarget.classList.contains("header-scroll-down") == false)){ 947 // bodyScrollTarget.classList.add("header-scroll-down"); 948 // } 949 // if ((window.scrollY > 600) && !(keyPointsTarget[0] == undefined)){ 950 // if (keyPointsTarget[0].classList.contains("floating") == false){ 951 // keyPointsTarget[0].classList.add('floating'); 952 // } 953 // } 954 // } 955 // // if (!(audioPlayerAnchorElement == undefined)){ 956 // // if (isInViewport(audioPlayerAnchorElement)==true){ 957 // // if (player.parentElement.classList.contains('fixedPlayer')==true){ 958 // // player.parentElement.classList.remove('fixedPlayer'); 959 // // } 960 // // } else { 961 // // if (player.parentElement.classList.contains('fixedPlayer')==false){ 962 // // player.parentElement.classList.add('fixedPlayer'); 963 // // } 964 // // } 965 // // } 966 967 // this.oldScroll = this.scrollY; 968 // } 969 970 // Clear all elements that should not be visible after escape 971 document.onkeydown = function(evt) { 972 evt = evt || window.event; 973 var isEscape = false;
974 if ("key" in evt) { 975 isEscape = (evt.key === "Escape" || evt.key === "Esc"); 976 } else { 977 isEscape = (evt.keyCode === 27); 978 } 979 if (isEscape) { 980 //var shareButton = document.getElementById('js-share-highlight-button'); 981 var clickedHighlight = document.querySelectorAll('.transcript-paragraph-content > p > span.flash')[0]; 982 // if (!(shareButton == undefined) && shareButton.classList.contains('visible')){ 983 // shareButton.classList.remove('visible'); 984 // shareButton.innerHTML = "share this"; 985 // } 986 if (!(clickedHighlight == undefined) && clickedHighlight.classList.contains('flash')) { 987 clickedHighlight.classList.remove('flash'); 988 } 989 toggleSidebar('off'); 990 } 991 }; 992 993 dismissAnnouncementBar = function(announcementId) { 994 document.cookie = `_dismissAnnouncement=${announcementId}`; 995 document.getElementById("poptart").remove() 996 } 997 998 toggleSidebar = function(state) { 999 var documentBody = document.body; 1000 const alreadySidebar = documentBody.classList.contains('display-nav-sidebar'); 1001 if (alreadySidebar || ((state != undefined) && (state === "off"))) { 1002 documentBody.classList.remove('display-nav-sidebar'); 1003 } else { 1004 documentBody.classList.add('display-nav-sidebar'); 1005 } 1006 } 1007 </script>
1007 1008 1009 </body> 1010 1011</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.