{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-1"}],"updated":0,"link":null,"locked":false,"id":"shape-0","type":"rectangle","seed":41,"x":586,"y":31.999999999999986,"width":192,"height":199.8,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-1","type":"text","seed":114,"x":606,"y":49.999999999999986,"width":152,"height":163.8,"fontSize":18,"fontFamily":1,"text":"UI Layer\n\n- Controls\n- Progress\n- Quality\nselector\n- Subtitles","originalText":"UI Layer\n\n- Controls\n- Progress\n- Quality\nselector\n- Subtitles","textAlign":"center","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-3"},{"type":"arrow","id":"shape-9"}],"updated":0,"link":null,"locked":false,"id":"shape-2","type":"rectangle","seed":187,"x":36,"y":32,"width":192,"height":223.20000000000002,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-3","type":"text","seed":260,"x":56,"y":50,"width":152,"height":187.20000000000002,"fontSize":18,"fontFamily":1,"text":"Buffer Manager\n\n- Prefetch next\n2-3 segments\n- Buffer health\nmonitoring\n- Evict old\nsegments","originalText":"Buffer Manager\n\n- Prefetch next\n2-3 segments\n- Buffer health\nmonitoring\n- Evict old\nsegments","textAlign":"center","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-5"},{"type":"arrow","id":"shape-8"}],"updated":0,"link":null,"locked":false,"id":"shape-4","type":"rectangle","seed":333,"x":282,"y":32,"width":192,"height":223.20000000000002,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-5","type":"text","seed":406,"x":302,"y":50,"width":152,"height":187.20000000000002,"fontSize":18,"fontFamily":1,"text":"ABR Controller\n\n- Bandwidth\nestimation\n- Quality\nselection\n- Startup\nstrategy","originalText":"ABR Controller\n\n- Bandwidth\nestimation\n- Quality\nselection\n- Startup\nstrategy","textAlign":"center","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#7c899d","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.4,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-9","type":"arrow","seed":698,"x":132,"y":255.2,"width":42.91914893617022,"height":82,"points":[[0,0],[0,41],[42.91914893617022,82]],"lastCommittedPoint":null,"startBinding":{"elementId":"shape-2","focus":0,"gap":1},"endBinding":{"elementId":"shape-6","focus":0,"gap":1},"startArrowhead":null,"endArrowhead":"arrow","elbowed":false,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#7c899d","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.4,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-8","type":"arrow","seed":625,"x":378,"y":255.2,"width":42.919148936170245,"height":82,"points":[[0,0],[0,41],[-42.919148936170245,82]],"lastCommittedPoint":null,"startBinding":{"elementId":"shape-4","focus":0,"gap":1},"endBinding":{"elementId":"shape-6","focus":0,"gap":1},"startArrowhead":null,"endArrowhead":"arrow","elbowed":false,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#9180ac","backgroundColor":"#f4effb","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-7"},{"type":"arrow","id":"shape-8"},{"type":"arrow","id":"shape-9"}],"updated":0,"link":null,"locked":false,"id":"shape-6","type":"rectangle","seed":479,"x":67.05784000000003,"y":337.2,"width":375.88431999999995,"height":153,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-7","type":"text","seed":552,"x":87.05784000000003,"y":355.2,"width":335.88431999999995,"height":117,"fontSize":18,"fontFamily":1,"text":"Media Source Extensions\n(MSE API)\n\nFeeds decoded segments to <video>\nelement for rendering","originalText":"Media Source Extensions\n(MSE API)\n\nFeeds decoded segments to <video>\nelement for rendering","textAlign":"center","verticalAlign":"middle","containerId":"shape-6","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-11"}],"updated":0,"link":null,"locked":false,"id":"shape-10","type":"rectangle","seed":771,"x":36,"y":530.2,"width":544.77624,"height":301.2,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-11","type":"text","seed":844,"x":56,"y":548.2,"width":504.77624000000003,"height":265.2,"fontSize":17,"fontFamily":1,"text":"Client-Side Video Player\n\nBuffer strategy:\n- Maintain 30s of forward buffer\n- Start playback after 2-3 segments buffered (~6-18s)\n- Prefetch: always have next 2-3 segments downloading\n- On seek: flush buffer, start fetching from new position\n\nStartup optimization:\n- Start at lowest quality for first 2 segments\n- Switch to estimated best quality for segment 3+\n- This gives sub-2-second startup time","originalText":"Client-Side Video Player\n\nBuffer strategy:\n- Maintain 30s of forward buffer\n- Start playback after 2-3 segments buffered (~6-18s)\n- Prefetch: always have next 2-3 segments downloading\n- On seek: flush buffer, start fetching from new position\n\nStartup optimization:\n- Start at lowest quality for first 2 segments\n- Switch to estimated best quality for segment 3+\n- This gives sub-2-second startup time","textAlign":"left","verticalAlign":"middle","containerId":"shape-10","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-13"}],"updated":0,"link":null,"locked":false,"id":"shape-12","type":"rectangle","seed":917,"x":36,"y":855.4000000000001,"width":420,"height":124.4,"customData":{"revealStep":6}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-13","type":"text","seed":990,"x":56,"y":873.4000000000001,"width":380,"height":88.4,"fontSize":17,"fontFamily":1,"text":"Video Player\n\n<video> element\n(hardware decode)","originalText":"Video Player\n\n<video> element\n(hardware decode)","textAlign":"left","verticalAlign":"middle","containerId":"shape-12","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":6}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}