@livepeer-frameworks/player-svelte 0.0.3

package/src/assets/logomark.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 15806 15806" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(5.55556,0,0,5.55556,0,0)">
+        <g transform="matrix(8.31462,0,0,8.31462,8.22267e-14,-6.49389e-14)">
+            <g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M488.82,596.09C489.36,595.2 489.89,594.31 490.41,593.41C490.5,593.25 490.59,593.09 490.68,592.93C499.43,577.56 504.8,560.03 505.8,541.33C505.82,541.05 505.83,540.77 505.85,540.49C505.88,539.79 505.91,539.09 505.93,538.38C505.96,537.46 505.97,536.54 505.98,535.61C505.98,535.41 505.99,535.2 505.99,535L505.99,534.72C505.99,469.43 453.06,416.51 387.78,416.51C322.5,416.51 269.57,469.44 269.57,534.72C269.57,582.95 298.45,624.43 339.86,642.81C342.17,641.83 344.82,641.6 347.6,642.5C347.71,642.48 348.06,642.58 348.8,642.93C349.87,642.59 351.08,642.46 352.17,642.22C354.63,641.68 357.12,641.33 359.58,640.81C365.15,639.64 370.59,637.89 376.16,636.73C382.32,635.45 388.69,638.46 390.44,644.84C391.16,647.46 390.81,650.38 389.65,652.91C430.42,652.28 466.17,631.01 486.93,599.09C487.1,598.83 487.27,598.57 487.44,598.31C487.91,597.57 488.37,596.83 488.83,596.09L488.82,596.09Z" style="fill:rgb(26,26,26);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M398.87,484.2L399.88,505.89L410.28,509.55L395.52,509.55L394.43,479.48L415.2,479.48L398.87,484.2Z" style="fill:rgb(77,77,77);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M407.52,632.43L407.52,632.37L405.83,567.81L405.91,560.75L420.81,555.3L399.31,556L402.95,630.22C404.49,630.89 406.02,631.62 407.53,632.42L407.52,632.43Z" style="fill:rgb(77,77,77);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M315.75,435.86L315.75,445.19C315.75,445.19 343.09,444.1 343.09,467.32L343.09,491.12L366.17,476.2L467.27,476.2C473.14,476.2 478.98,477.27 484.41,479.5C489.4,481.55 494.15,484.61 494.15,488.82L494.15,442.41L406.24,442.41L406.24,435.92L315.75,435.86Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M384.52,549.53C383,549.84 374.5,554.81 372.41,555.99C361.06,562.39 350.66,570.29 340.56,578.47L343.55,511.3C357.29,499.76 372.89,489.71 389.69,483.46L391.34,511.85L380.41,515.68L465.05,515.68L465.05,549.54L384.51,549.54L384.52,549.53Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M384.62,620.15C386.3,618.47 388.78,617.44 391.15,617.44C392.32,617.44 393.42,617.66 394.43,618.05L391.53,561.24C376.44,568.54 361.62,576.78 348.45,587.23C346.53,588.75 339.44,594.3 338.53,595.88C338.16,596.53 338.08,596.77 337.99,597.52C336.15,611.29 341.68,626.24 327.48,635.06C325.4,636.35 322.28,637.18 320.41,638.36C319.72,638.79 319.26,638.87 319.46,639.87L357.68,640.77L357.68,621.03C357.68,620.82 358.79,618.46 359.07,618.05C362,613.76 368.64,613.05 372.45,616.63C373.18,617.32 375.15,620.84 375.15,621.57L375.15,626.68C376.32,626.01 377.56,625.46 378.87,625.04C380.03,624.43 381.23,623.94 382.45,623.58C382.94,622.27 383.71,621.04 384.62,620.14L384.62,620.15Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <rect x="336.59" y="428.82" width="55.13" height="8.66" style="fill:rgb(242,242,242);"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M370.43,405.41L381.28,405.41L381.28,428.82L347.02,428.82C347.02,415.9 357.51,405.41 370.43,405.41Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M375.15,621.59L375.15,646.4L399.31,643.32L393.82,606.12" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M434.95,641.77C427.45,636.79 420.54,630.98 414.13,624.68C378.86,650.1 331.68,660.51 289.92,645.24C276.7,656.38 260.2,663.03 243.21,666.13C245.28,668.42 247.17,670.85 249,673.36C259.11,673.75 269.41,673.79 279.47,672.94C316.6,669.77 351.78,651.88 389.38,653.26C420.31,654.4 448.46,670.95 479.26,673.24C493.74,674.31 510.78,671.04 524.28,665.72C524.6,665.6 525.17,665.63 525.1,665.2C493.55,667.12 461.22,659.22 434.94,641.78L434.95,641.77Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M431.64,681.28C431.71,681.82 430.99,681.55 430.67,681.5C428.7,681.19 426.49,680.36 424.48,679.92C400.81,674.72 375.35,672.69 351.2,675.65C341.11,676.89 331.28,679.62 321.24,681.22C300.45,684.53 278.62,685.74 257.83,682.01C273.85,682.14 289.66,680.16 305.21,676.54C319.99,673.09 334.95,667.38 350.01,665.52C377.55,662.11 406.29,671.7 431.64,681.28Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M376.31,636.41L367.67,639.94C342.05,648.2 314.13,646.84 288.76,638.37C280.1,644.46 271.14,650.64 260.82,653.56L267.06,649.22C276.19,642.22 285.08,634.65 291.47,624.98C294.79,626.43 297.92,628.31 301.23,629.78C323.76,639.82 352.12,642.31 376.31,636.41Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M496.44,679.79L493.62,680.99C455.11,696.09 422.32,666.01 385.12,661.7L374.61,660.13C397.05,658.33 419.03,663.62 440.24,670.18C445.86,671.92 451.4,674.13 457.03,675.77C469.67,679.46 483.33,681.19 496.45,679.8L496.44,679.79Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M502.72,658.04L499.89,658.33C480.42,655.87 461.58,649.56 444.59,639.91C442.86,638.93 440.96,637.83 439.42,636.58C447.9,638.94 456.77,635.92 464.33,632.12C472.21,646.13 487.36,654.62 502.73,658.03L502.72,658.04Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                    <path d="M440,690.82C440.07,691.36 439.35,691.09 439.03,691.04C435.69,690.51 432.35,689.64 429.02,689.11C398.16,684.21 366.77,684.02 335.64,686.06C335.32,686.08 334.23,686.27 334.29,685.75C369.06,676.79 406.04,680.41 440,690.82Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M313.56,572.87L313.69,572.14L313.94,572.49L313.56,572.87Z" style="fill:rgb(2,38,43);fill-opacity:0.6;fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M539.06,620.51C542.62,613.83 545.72,606.95 548.35,599.91C560.45,567.54 562.63,531.85 554.01,497.83C553.56,496.03 551.73,494.94 549.93,495.4C548.14,495.85 547.05,497.68 547.5,499.47C555.79,532.17 553.69,566.46 542.08,597.56C539.98,603.18 537.56,608.71 534.84,614.1C532.63,618.48 530.21,622.77 527.59,626.96C527.3,627.44 527,627.91 526.69,628.38C525.42,630.39 524.1,632.37 522.71,634.32C522.05,635.28 521.36,636.24 520.66,637.19C519.76,638.42 518.84,639.63 517.89,640.84C512.56,647.71 506.62,654.2 500.09,660.26C498.25,661.96 496.36,663.64 494.43,665.27C490.48,668.61 486.33,671.8 482,674.81C478.57,677.19 474.88,679.59 471.13,681.77C467.82,683.69 464.47,685.45 461.2,686.92C461.06,686.99 460.92,687.06 460.79,687.14L460.76,687.16L460.74,687.16L460.58,687.29L460.43,687.41L460.37,687.45L460.3,687.51L460.11,687.7L460.07,687.75L460.05,687.77L460.03,687.8L460,687.83C459.77,688.11 459.57,688.43 459.44,688.79C459.3,689.15 459.23,689.53 459.22,689.9L459.22,690.26L459.25,690.42L459.29,690.67L459.35,690.9C459.39,691.06 459.45,691.21 459.51,691.36C459.58,691.5 459.65,691.64 459.73,691.77L459.75,691.79L459.77,691.82L459.88,691.98L460,692.13L460.04,692.19L460.34,692.49L460.36,692.49L460.42,692.56C460.7,692.79 461.02,692.98 461.38,693.12L483.09,701.39L504.75,709.65C504.94,709.72 505.13,709.78 505.34,709.82C506.31,710.21 507.44,710.1 508.32,709.48C508.49,709.37 508.64,709.23 508.79,709.08L556.35,659.8C557.38,658.73 557.5,657.12 556.75,655.92L539.06,620.51Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M427.7,697.67C395,705.96 360.71,703.86 329.62,692.24C313.96,686.39 299.11,678.13 285.67,667.54C283.67,665.98 281.69,664.35 279.75,662.67C272.21,656.14 265.17,648.83 258.77,640.77C257.46,639.14 256.18,637.46 254.94,635.76C254.57,635.27 254.21,634.78 253.85,634.28C253.35,633.58 252.85,632.88 252.36,632.17C249.98,628.73 247.59,625.05 245.4,621.29C243.51,618.05 241.78,614.76 240.33,611.54C240.3,611.48 240.28,611.43 240.25,611.37C240.25,611.35 240.23,611.32 240.22,611.3C240.16,611.18 240.1,611.07 240.03,610.96L240.01,610.93L240.01,610.9L239.89,610.74L239.77,610.6L239.72,610.54L239.66,610.47L239.56,610.36L239.47,610.28L239.43,610.24L239.4,610.22L239.38,610.19L239.34,610.17C239.29,610.13 239.24,610.09 239.19,610.05C238.95,609.87 238.68,609.72 238.39,609.61C238.02,609.47 237.65,609.4 237.28,609.39L236.91,609.39L236.75,609.42L236.51,609.46L236.27,609.52C236.12,609.56 235.97,609.62 235.81,609.68C235.67,609.75 235.54,609.82 235.41,609.9L235.35,609.94L235.19,610.05L234.99,610.21L234.92,610.27L234.73,610.46L234.69,610.51L234.61,610.59C234.38,610.87 234.19,611.19 234.05,611.55L225.78,633.25L217.53,654.92C217.45,655.11 217.39,655.3 217.35,655.51C216.96,656.48 217.08,657.61 217.69,658.49C217.8,658.66 217.94,658.81 218.09,658.96L267.38,706.52C268.44,707.55 270.05,707.67 271.25,706.92L306.67,689.23C313.34,692.79 320.22,695.89 327.26,698.52C359.63,710.62 395.32,712.8 429.34,704.18C431.14,703.72 432.23,701.9 431.78,700.1C431.32,698.31 429.5,697.22 427.7,697.67Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M222.39,582.08C222.84,583.87 224.67,584.96 226.46,584.51C228.26,584.05 229.35,582.23 228.89,580.43C220.61,547.74 222.7,513.44 234.32,482.35C240.43,466.01 249.16,450.55 260.42,436.66C266.85,428.7 274.11,421.26 282.17,414.47C286.06,411.19 290.14,408.06 294.4,405.1C297.83,402.71 301.52,400.32 305.27,398.13C308.57,396.21 311.92,394.45 315.2,392.98C315.34,392.92 315.48,392.84 315.61,392.76L315.63,392.74L315.66,392.74L315.82,392.62L315.97,392.5L316.03,392.45L316.09,392.39L316.2,392.29L316.28,392.2L316.33,392.16L316.35,392.13L316.37,392.11L316.4,392.07C316.63,391.79 316.82,391.48 316.96,391.12C317.1,390.75 317.17,390.38 317.18,390.01L317.18,389.78L317.17,389.64L317.15,389.48L317.11,389.24L317.05,389C317.01,388.85 316.95,388.7 316.88,388.55C316.82,388.4 316.74,388.27 316.66,388.14L316.64,388.11L316.64,388.08L316.52,387.92L316.4,387.77L316.35,387.72L316.29,387.65L316.06,387.42L316.03,387.4L316.01,387.37L315.97,387.35C315.69,387.11 315.37,386.92 315.02,386.79L293.31,378.51L271.65,370.26C271.46,370.18 271.26,370.12 271.06,370.08C270.08,369.7 268.96,369.81 268.08,370.42C267.91,370.54 267.75,370.67 267.61,370.82L220.05,420.11C219.02,421.18 218.89,422.78 219.65,423.98L237.33,459.4C233.77,466.07 230.67,472.95 228.04,480C215.95,512.36 213.77,548.05 222.39,582.08Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+                <g transform="matrix(1,0,0,1,-217.125,-368.902)">
+                    <path d="M519.68,441.65C520.78,443.12 521.85,444.61 522.91,446.13C525.3,449.56 527.69,453.25 529.88,457C531.8,460.3 533.56,463.65 535.03,466.93C535.09,467.07 535.17,467.21 535.25,467.34L535.27,467.36L535.27,467.39L535.39,467.55L535.51,467.7L535.56,467.76L535.62,467.82L535.72,467.93L535.81,468.01L535.85,468.05L535.88,468.07L535.9,468.1L535.94,468.13C536.22,468.36 536.54,468.55 536.89,468.69C537.26,468.83 537.63,468.89 538,468.9L538.37,468.9L538.53,468.88L538.77,468.84L539.01,468.78C539.16,468.73 539.31,468.68 539.46,468.61C539.61,468.54 539.74,468.47 539.87,468.39L539.9,468.37L539.93,468.37L540.09,468.25L540.24,468.13L540.29,468.08L540.36,468.02L540.59,467.79L540.61,467.76L540.64,467.74L540.66,467.7C540.9,467.42 541.09,467.1 541.22,466.74L549.5,445.04L557.75,423.38C557.83,423.19 557.89,422.99 557.93,422.79C558.32,421.81 558.2,420.69 557.59,419.81C557.47,419.64 557.34,419.48 557.19,419.33L507.9,371.78C506.84,370.75 505.23,370.62 504.03,371.38L468.61,389.06C461.94,385.5 455.06,382.4 448.01,379.77C415.65,367.68 379.96,365.5 345.93,374.12C344.14,374.57 343.05,376.4 343.5,378.19C343.96,379.98 345.78,381.08 347.58,380.62C380.27,372.34 414.57,374.43 445.66,386.05C461.19,391.85 475.94,400.04 489.29,410.5C500.52,419.29 510.77,429.7 519.68,441.65Z" style="fill:rgb(242,242,242);fill-rule:nonzero;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/VolumeIcons.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  let {
+    size = 16,
+    color = 'currentColor',
+    className = '',
+    isMuted = false,
+    volume = 1 // 0-1 range
+  }: {
+    size?: number;
+    color?: string;
+    className?: string;
+    isMuted?: boolean;
+    volume?: number;
+  } = $props();
+</script>
+
+{#if isMuted || volume === 0}
+  <!-- Muted icon -->
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    aria-hidden="true"
+  >
+    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+  </svg>
+{:else if volume < 0.5}
+  <!-- Low volume icon -->
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    aria-hidden="true"
+  >
+    <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
+  </svg>
+{:else}
+  <!-- High volume icon -->
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class={className}
+    aria-hidden="true"
+  >
+    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+  </svg>
+{/if}

package/src/global.d.ts

@@ -0,0 +1,15 @@
+// Asset module declarations
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}

package/src/icons/FullscreenExitIcon.svelte

@@ -0,0 +1,33 @@
+<!--
+  FullscreenExitIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <path
+    d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/icons/FullscreenIcon.svelte

@@ -0,0 +1,33 @@
+<!--
+  FullscreenIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <path
+    d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/icons/PauseIcon.svelte

@@ -0,0 +1,28 @@
+<!--
+  PauseIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <rect x="6" y="4" width="4" height="16" fill={color} />
+  <rect x="14" y="4" width="4" height="16" fill={color} />
+</svg>

package/src/icons/PictureInPictureIcon.svelte

@@ -0,0 +1,28 @@
+<!--
+  PictureInPictureIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke={color} stroke-width="2" fill="none" />
+  <rect x="8" y="10" width="10" height="6" rx="1" ry="1" fill={color} />
+</svg>

package/src/icons/PlayIcon.svelte

@@ -0,0 +1,27 @@
+<!--
+  PlayIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <path d="M8 5v14l11-7z" fill={color} />
+</svg>

package/src/icons/SeekToLiveIcon.svelte

@@ -0,0 +1,30 @@
+<!--
+  SeekToLiveIcon.svelte - Play triangle + end bar for seeking to live
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <!-- Play triangle -->
+  <path d="M5 5v14l11-7z" fill={color} />
+  <!-- End bar -->
+  <rect x="17" y="5" width="3" height="14" fill={color} />
+</svg>

package/src/icons/SettingsIcon.svelte

@@ -0,0 +1,40 @@
+<!--
+  SettingsIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <path
+    d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/icons/SkipBackIcon.svelte

@@ -0,0 +1,32 @@
+<!--
+  SkipBackIcon.svelte - Circular rewind arrow with "10"
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <!-- Circular rewind arrow -->
+  <path
+    d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+    fill={color}
+  />
+  <text x="12" y="15" font-size="7" font-weight="bold" fill={color} text-anchor="middle">10</text>
+</svg>

package/src/icons/SkipForwardIcon.svelte

@@ -0,0 +1,32 @@
+<!--
+  SkipForwardIcon.svelte - Circular forward arrow with "10"
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <!-- Circular forward arrow -->
+  <path
+    d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
+    fill={color}
+  />
+  <text x="12" y="15" font-size="7" font-weight="bold" fill={color} text-anchor="middle">10</text>
+</svg>

package/src/icons/StatsIcon.svelte

@@ -0,0 +1,29 @@
+<!--
+  StatsIcon.svelte - Bar chart style for "stats for nerds"
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <rect x="4" y="13" width="4" height="7" fill={color} />
+  <rect x="10" y="9" width="4" height="11" fill={color} />
+  <rect x="16" y="4" width="4" height="16" fill={color} />
+</svg>

package/src/icons/VolumeOffIcon.svelte

@@ -0,0 +1,29 @@
+<!--
+  VolumeOffIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill={color} />
+  <line x1="23" y1="9" x2="17" y2="15" stroke={color} stroke-width="2" stroke-linecap="round" />
+  <line x1="17" y1="9" x2="23" y2="15" stroke={color} stroke-width="2" stroke-linecap="round" />
+</svg>

package/src/icons/VolumeUpIcon.svelte

@@ -0,0 +1,34 @@
+<!--
+  VolumeUpIcon.svelte
+-->
+<script lang="ts">
+  interface Props {
+    size?: number;
+    color?: string;
+    class?: string;
+  }
+
+  let {
+    size = 16,
+    color = 'currentColor',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class={className}
+  aria-hidden="true"
+>
+  <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill={color} />
+  <path
+    d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/src/icons/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Svelte icon components
+ *
+ * Port of src/components/Icons.tsx
+ */
+
+export { default as PlayIcon } from './PlayIcon.svelte';
+export { default as PauseIcon } from './PauseIcon.svelte';
+export { default as SkipBackIcon } from './SkipBackIcon.svelte';
+export { default as SkipForwardIcon } from './SkipForwardIcon.svelte';
+export { default as VolumeUpIcon } from './VolumeUpIcon.svelte';
+export { default as VolumeOffIcon } from './VolumeOffIcon.svelte';
+export { default as FullscreenIcon } from './FullscreenIcon.svelte';
+export { default as FullscreenExitIcon } from './FullscreenExitIcon.svelte';
+export { default as SettingsIcon } from './SettingsIcon.svelte';
+export { default as StatsIcon } from './StatsIcon.svelte';
+export { default as PictureInPictureIcon } from './PictureInPictureIcon.svelte';
+export { default as SeekToLiveIcon } from './SeekToLiveIcon.svelte';

package/src/index.ts

@@ -0,0 +1,84 @@
+/**
+ * Svelte exports for SvelteKit/Svelte 5 environments.
+ *
+ * Full-featured player with React parity including:
+ * - Gateway URL integration with GraphQL endpoint resolution
+ * - MistServer WebSocket/HTTP stream state polling
+ * - Quality monitoring and stats panel
+ * - DevMode panel for player/source testing
+ * - InteractionController for modern gestures
+ * - MistReporter for stats reporting
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Player } from '@livepeer-frameworks/player/svelte';
+ * </script>
+ *
+ * <Player
+ *   contentId="my-stream"
+ *   contentType="live"
+ *   options={{ gatewayUrl: "https://gateway.example.com/graphql", devMode: true }}
+ *   autoplay
+ *   muted
+ * />
+ * ```
+ */
+
+// UI primitives
+export { default as Button } from './ui/Button.svelte';
+export { default as Badge } from './ui/Badge.svelte';
+export { default as Slider } from './ui/Slider.svelte';
+
+// Main components
+export { default as Player } from './Player.svelte';
+export { default as PlayerControls } from './PlayerControls.svelte';
+export { default as SeekBar } from './SeekBar.svelte';
+
+// Overlay components
+export { default as SpeedIndicator } from './SpeedIndicator.svelte';
+export { default as SkipIndicator } from './SkipIndicator.svelte';
+export { default as IdleScreen } from './IdleScreen.svelte';
+export { default as LoadingScreen } from './LoadingScreen.svelte';
+export { default as StreamStateOverlay } from './StreamStateOverlay.svelte';
+export { default as SubtitleRenderer } from './SubtitleRenderer.svelte';
+export { default as DvdLogo } from './DvdLogo.svelte';
+export { default as TitleOverlay } from './TitleOverlay.svelte';
+export { default as ThumbnailOverlay } from './ThumbnailOverlay.svelte';
+export { default as StatsPanel } from './StatsPanel.svelte';
+export { default as DevModePanel } from './DevModePanel.svelte';
+
+// Icon components
+export * from './icons';
+
+// Stores
+export * from './stores';
+
+// Context menu components
+export * from './ui/context-menu';
+
+// Svelte-specific types
+export type { SkipDirection } from './types';
+
+// Re-export core types and classes for Svelte users
+export { PlayerController, PlayerManager, globalPlayerManager } from '@livepeer-frameworks/player-core';
+export type { PlayerControllerConfig, PlayerControllerEvents } from '@livepeer-frameworks/player-core';
+export type {
+  PlayerState,
+  PlayerStateContext,
+  StreamState,
+  StreamStatus,
+  ContentMetadata,
+  ContentEndpoints,
+  EndpointInfo,
+  PlaybackMode,
+  PlaybackQuality,
+  MistStreamInfo,
+  PlayerOptions,
+  PlayerMetadata,
+  // Player selection types
+  PlayerSelection,
+  PlayerCombination,
+  PlayerManagerOptions,
+  PlayerManagerEvents,
+} from '@livepeer-frameworks/player-core';

package/src/player.css

@@ -0,0 +1,2 @@
+/* Re-export core player CSS - apps import from wrapper, not core */
+@import "@livepeer-frameworks/player-core/player.css";