Unable to unmute in iOS

[c-mella]

I am using usePlyr to create a custom plyr instance but on mobile the audio controls don't work. The icon shows as unmuted and doesn't unmute the audio when tapped. Has anyone else had this issue?

I had previously reported this here but couldn't find a solution. This has been brought back up by active users of my app as a bug they'd like to see fixed so I'm re-surfacing it.

    const CustomPlyr = React.forwardRef<APITypes, PlyrProps>((props, ref) => {
    const { playerStyle, size } = useContext(CoreContext);
    const plyrRef = ref as MutableRefObject<APITypes>;

    const { track } = useGTM();

    const { source, options = null } = props;

    const raptorRef = usePlyr(plyrRef, { options, source });

    const { poster } = source || {};
    const { active } = options?.loop || {};
    const { autoplay } = options || {};

    const { gradient, ui, full } = playerStyle as PlayerStyle;

    const [current, setCurrent] = useState(0);
    const [, setDuration] = useState(0);
    const [progress, setProgress] = useState(0);
    const [playing, setPlaying] = useState(autoplay);
    const [muted, setMuted] = useState(true);
    const [showLoopScreen, setShowLoop] = useState(false);
    const [counter, setCounter] = useState<number>(0);

    React.useEffect(() => {
        if (plyrRef.current?.plyr.source === null) return;

        setDuration(plyrRef.current?.plyr.duration);

        setMuted(plyrRef.current?.plyr.volume === 0);

        const canPlay = () => {
            if (autoplay && !playing) {
                plyrRef.current?.plyr.play();
            }
        };

        const onPlay = () => {
            setShowLoop(false);
            setPlaying(true);
        };

        const onPause = () => {
            setPlaying(false);
        };

        const onEnded = () => {
            setShowLoop(!active);
            setCounter(0);
            track({
                category: "adops",
                adOpsAction: "video",
                adOpsLabel: `video-completed`,
                event: "coreDataPush",
            });
        };

        plyrRef.current?.plyr.on("canplay", canPlay);
        plyrRef.current?.plyr.on("playing", onPlay);
        plyrRef.current?.plyr.on("pause", onPause);
        plyrRef.current?.plyr.on("ended", onEnded);

        const offFuncs = () => {
            plyrRef.current?.plyr.off("canplay", canPlay);
            plyrRef.current?.plyr.off("playing", onPlay);
            plyrRef.current?.plyr.off("pause", onPause);
            plyrRef.current?.plyr.off("ended", onEnded);
        };

        if (plyrRef?.current?.plyr?.source) {
            return offFuncs;
        }
    }, [plyrRef, autoplay, playing, active, track, current, progress, counter]);

    if (!source || !plyrRef) {
        return null;
    }

    return (
        <div
            data-size={size}
            data-full={full}
            className={styles.playercontainer}
        >
            {showLoopScreen || (!autoplay && current < 1 && !playing) ? (
                <div
                    className={styles.loopscreen}
                    style={{
                        backgroundImage: `url(${poster})`,
                    }}
                >
                    {!autoplay && current < 1 && !playing ? (
                        <svg
                            viewBox="0 0 503 612"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                fill={ui?.color}
                                d="M0 608.7l503.2-302.6L0 3.5z"
                            />
                        </svg>
                    ) : (
                        <svg viewBox="0 0 425.47 402.84">
                            <g>
                                <path
                                    className="st0"
                                    fill="white"
                                    d="M138.18 396.9c-10.19-7.86-20.46-15.61-30.56-23.6-16.19-12.81-32.27-25.76-48.38-38.66-7.39-5.92-7.53-12.7-.3-18.51 24.41-19.58 48.87-39.09 73.26-58.69 4.09-3.28 8.27-5.07 13.27-2.24 3.92 2.22 5.33 5.76 5.31 10.13-.06 12.89-.02 25.78-.02 39.35h4.97c46.14 0 92.29.11 138.43-.04 41.76-.13 74.9-27.79 82.55-68.79 2.98-15.96.89-31.48-5.42-46.39-2.3-5.42-3.1-10.8-1.14-16.44 2.78-8.01 10.02-13.41 18.62-13.9 8.19-.47 16.06 4.3 19.68 12.32 7.4 16.4 10.93 33.63 10.72 51.64-.77 67.34-53.92 121.52-121.27 122.55-46.94.71-93.9.18-140.85.2h-6.3v22.05c0 4.84-.33 9.71.08 14.51.56 6.71-1.71 11.56-7.82 14.51h-4.83zM274.71 98.24c-2.04-.09-3.61-.23-5.18-.23-45.98-.01-91.96-.09-137.95.02-42 .1-75.29 27.77-82.89 68.98-2.94 15.95-.82 31.48 5.54 46.38 2.31 5.42 3 10.82.98 16.44-2.88 8.02-10.17 13.36-18.73 13.73-8.26.36-15.93-4.44-19.56-12.51-7.38-16.42-10.87-33.65-10.64-51.66.87-67.32 54.04-121.34 121.46-122.34 46.94-.7 93.9-.17 140.85-.19h6.12V25.92c0-2.42.11-4.85-.02-7.26-.27-5.08 1.12-9.31 5.98-11.67 4.95-2.4 8.95-.32 12.83 2.8 13.05 10.53 26.19 20.97 39.29 31.44 10.83 8.66 21.67 17.31 32.5 25.98 8.82 7.06 8.8 13.35-.03 20.4-23.56 18.83-47.11 37.68-70.66 56.52-1.01.81-2.02 1.6-3.05 2.38-3.54 2.68-7.34 3.23-11.31 1.1-3.75-2.01-5.52-5.26-5.52-9.51 0-11.45 0-22.91-.01-34.36v-5.5z"
                                />
                            </g>
                        </svg>
                    )}
                </div>
            ) : (
                <div
                    style={{
                        backgroundColor:
                            hexToRgb(gradient?.color, 0.75) ||
                            "rgba(0,0,0, .75)",
                    }}
                    className={styles.overlay}
                >
                    <div
                        style={{
                            backgroundColor:
                                size === "one" ? ui?.color : undefined,
                        }}
                        className={styles.circle}
                    >
                        {current < 60 && (
                            <span
                                style={{
                                    color:
                                        size === "one"
                                            ? gradient?.color
                                            : ui?.color,
                                }}
                            >
                                {current}
                            </span>
                        )}
                        <svg fill="rgba(0,0,0,0)" className={styles.progress}>
                            <circle
                                cx="25"
                                cy="25"
                                r="22"
                                style={{
                                    backgroundColor: "none",
                                    stroke:
                                        hexToRgb(`${ui?.color}`, 0.4) ||
                                        "white",
                                }}
                                className={styles.track}
                            />
                            <circle
                                cx="25"
                                cy="25"
                                r="22"
                                className={styles.pct}
                                style={{
                                    backgroundColor: "none",
                                    stroke: ui?.color,
                                    strokeDashoffset: `${
                                        (1 - progress / 200) *
                                        (2 * (22 / 7) * 40)
                                    }`,
                                }}
                            />
                        </svg>
                    </div>
                    <button
                        onClick={() => {
                            plyrRef.current?.plyr.togglePlay();
                        }}
                        className={styles.action}
                    >
                        {playing ? (
                            <svg
                                viewBox="0 0 503 594"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    fill={ui?.color}
                                    d="M2.2 2.2h174.2V594H2.2zM328.8 2.2H503V594H328.8z"
                                />
                            </svg>
                        ) : (
                            <svg
                                viewBox="0 0 503 612"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    fill={ui?.color}
                                    d="M0 608.7l503.2-302.6L0 3.5z"
                                />
                            </svg>
                        )}
                    </button>
                    <button
                        onClick={() => {
                            if (muted) {
                                plyrRef.current?.plyr.increaseVolume(1);
                            } else {
                                plyrRef.current?.plyr.decreaseVolume(1);
                            }
                        }}
                        className={styles.volume}
                    >
                        {muted ? (
                            <svg viewBox="0 0 510.75 511.76">
                                <path
                                    fill={ui?.color}
                                    d="M474.37 511.76h-1c-1.15-1.37-2.2-2.85-3.46-4.11-15.75-15.76-31.56-31.47-47.27-47.27-2.1-2.11-3.75-4.65-5.65-7.03-31.84 25.6-66.21 42.9-104.69 51.7-.32-.67-.59-.96-.59-1.25-.05-18.13-.14-36.25.05-54.37.01-1.32 1.92-3.19 3.38-3.83 9.26-4.07 18.98-7.21 27.89-11.92 11.17-5.91 21.7-13.02 32.04-19.33L254.62 293.9v188.32c-.42.19-.83.37-1.25.56-1.15-1.43-2.18-2.97-3.47-4.26-44.54-44.59-89.13-89.13-133.63-133.76-2.41-2.42-4.79-3.48-8.25-3.47-33.26.13-66.52.08-99.78.06-2.99 0-5.97-.16-8.96-.25V171.43c1.99-.09 3.97-.25 5.96-.25 40.56-.01 81.13-.01 121.69-.01h6.19c-1.83-2.01-2.78-3.12-3.81-4.15C87.13 124.8 44.93 82.6 2.71 40.43 1.68 39.41.44 38.6-.69 37.69v-1C11.03 24.46 22.75 12.24 34.3.19c159.26 159.26 317.32 317.32 476.51 476.5-12.04 11.58-24.24 23.32-36.44 35.07zM311.62 7.81c162.83 35.77 247.51 220.81 169.16 366.17-13.68-13.73-27.33-27.31-40.74-41.12-1.02-1.05-.8-3.88-.34-5.68 3.86-15.42 8.84-30.62 11.7-46.21 4.68-25.57 2-51.06-4.76-76.02-12.4-45.82-38.19-82.54-76.6-110.33-16.25-11.76-33.98-20.82-53.16-26.78-4.35-1.35-5.45-3.36-5.37-7.69.28-15.63.11-31.26.11-46.89V7.81z"
                                />
                                <path
                                    fill={ui?.color}
                                    d="M380.93 274.35c-6.71-6.8-12.73-12.96-18.82-19.06-15.84-15.88-31.74-31.7-47.51-47.65-1.38-1.39-2.83-3.53-2.85-5.33-.2-19.76-.13-39.53-.13-59.39 41.15 17.18 78.7 71.35 69.31 131.43zM196.95 88c18.71-18.67 38.08-37.99 57.47-57.33v114.81c-18.81-18.81-38.11-38.12-57.47-57.48z"
                                />
                            </svg>
                        ) : (
                            <svg viewBox="0 0 510.75 511.76">
                                <path
                                    fill={ui?.color}
                                    d="M0 170.93c2.98-.09 5.97-.25 8.95-.25 33.25-.02 66.51-.06 99.76.06 3.45.01 5.84-1.04 8.25-3.46 44.49-44.62 89.07-89.16 133.61-133.73 1.29-1.29 2.34-2.82 4.47-3.71v452.25c-1.55-1.43-2.87-2.57-4.1-3.8-44.57-44.55-89.15-89.08-133.63-133.71-2.67-2.67-5.3-3.83-9.1-3.82-34.08.14-68.17.09-102.25.07-1.99 0-3.98-.16-5.97-.25C0 284.04 0 227.48 0 170.93zM312.32 504.13v-35.44c0-5.99.24-11.99-.09-17.96-.2-3.65 1.11-5.22 4.53-6.29 21.61-6.77 41.38-17.18 59.28-31.04 39-30.19 64.03-69.36 73.94-117.68 17.18-83.77-20.14-167.68-94.04-211.03-12.36-7.25-26.17-12.05-39.45-17.67-3.04-1.29-4.31-2.52-4.27-6 .21-17.78.1-35.56.1-53.4 90.78 17.36 187.77 102.27 197.57 226.6 11.55 146.59-94.73 249.1-197.57 269.91z"
                                />
                                <path
                                    fill={ui?.color}
                                    d="M312.63 142.19c36.6 16.84 71.16 59.71 70.6 114.87-.57 55.95-36.91 97.18-70.6 112.3V142.19z"
                                />
                            </svg>
                        )}
                    </button>
                </div>
            )}
            <video
                ref={raptorRef as React.MutableRefObject<HTMLVideoElement>}
                className="plyr-react plyr"
            />
        </div>
    );
});

CustomPlyr.displayName = "CustomPlyr";

export default CustomPlyr;
`

[c-mella]

@chintan9 Just bumping this so you can take a look