Hugging Face's logo

Spaces:
playingapi
/
cobalt
Paused

App Files Community
cobalt
File size: 3,291 Bytes 
43a06dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<script lang="ts">
    import { onMount } from "svelte";

    import CobaltSticker from "$components/icons/CobaltSticker.svelte";

    // please add a source link (https://github.com/imputnet/cobalt) if you use this implementation
    // i spent 4 hours switching between simulators and devices to get the best way to do this

    $: safeAreaTop = 0;
    $: safeAreaBottom = 0;
    $: state = "hidden"; // "notch", "island", "notch x"

    const islandValues = [
        53, // 16 pro max: larger text
        59, // regular & plus: default
        48, // regular: larger text
        49, // 16: larger text
        51, // plus only: larger text
        62, // 16: regular
    ];

    const xNotch = [44];

    const getSafeAreaTop = () => {
        const root = document.documentElement;
        return getComputedStyle(root)
            .getPropertyValue("--safe-area-inset-top")
            .trim();
    };

    const getSafeAreaBottom = () => {
        const root = document.documentElement;
        return getComputedStyle(root)
            .getPropertyValue("--safe-area-inset-bottom")
            .trim();
    };

    onMount(() => {
        safeAreaTop = Number(getSafeAreaTop().replace("px", ""));
        safeAreaBottom = Number(getSafeAreaBottom().replace("px", ""));
    });

    $: if (safeAreaTop > 20) {
        state = "notch";
        if (islandValues.includes(safeAreaTop)) {
            state = "island";
        }
        if (xNotch.includes(safeAreaTop)) {
            state = "notch x";
        }
        // exception for XR and 11 at regular screen zoom
        if (safeAreaTop === 48 && safeAreaBottom === 34) {
            state = "notch";
        }

        // exception for iPhone 16 Pro Max
        if (safeAreaTop === 53 && safeAreaBottom === 29) {
            state = "notch sixteen-pro-max";
        }
    }
</script>

{#if state !== "hidden"}
    <div id="cobalt-notch-sticker" aria-hidden="true" class={state}>
        <CobaltSticker />
    </div>
{/if}

<style>
    #cobalt-notch-sticker {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    #cobalt-notch-sticker.island {
        padding-top: 15px;
    }

    #cobalt-notch-sticker.notch {
        padding-top: 2px;
    }

    #cobalt-notch-sticker.sixteen-pro-max {
        padding-top: 12px;
    }

    #cobalt-notch-sticker.notch.x :global(svg) {
        height: 28px;
    }

    #cobalt-notch-sticker :global(svg) {
        width: 100px;
        height: 30px;
    }

    /* regular iphone size, larger text display mode */
    @media screen and (max-width: 350px) {
        #cobalt-notch-sticker.notch :global(svg) {
            height: 24px;
        }

        #cobalt-notch-sticker.island {
            padding-top: 9px;
        }
    }

    /* regular & plus iphone size, dynamic island, larger text display mode */
    @media screen and (max-width: 375px) {
        #cobalt-notch-sticker.island :global(svg) {
            height: 26px;
        }

        #cobalt-notch-sticker.island {
            padding-top: 11px;
        }
    }

    @media screen and (orientation: landscape) {
        #cobalt-notch-sticker {
            display: none;
        }
    }
</style>