diff --git a/src/App.js b/src/App.blits similarity index 73% rename from src/App.js rename to src/App.blits index 8980e8b..dd4a2aa 100644 --- a/src/App.js +++ b/src/App.blits @@ -15,48 +15,58 @@ * SPDX-License-Identifier: Apache-2.0 */ + + + diff --git a/src/components/Accent.blits b/src/components/Accent.blits new file mode 100644 index 0000000..90f9abe --- /dev/null +++ b/src/components/Accent.blits @@ -0,0 +1,47 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/AccentList.blits b/src/components/AccentList.blits new file mode 100644 index 0000000..aa1ac0a --- /dev/null +++ b/src/components/AccentList.blits @@ -0,0 +1,89 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/AnnouncerItem.blits b/src/components/AnnouncerItem.blits new file mode 100644 index 0000000..5cb543f --- /dev/null +++ b/src/components/AnnouncerItem.blits @@ -0,0 +1,57 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/AnnouncerRow.blits b/src/components/AnnouncerRow.blits new file mode 100644 index 0000000..3b09eb7 --- /dev/null +++ b/src/components/AnnouncerRow.blits @@ -0,0 +1,68 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/Background.js b/src/components/Background.blits similarity index 63% rename from src/components/Background.js rename to src/components/Background.blits index 1fdb095..9a875b8 100644 --- a/src/components/Background.js +++ b/src/components/Background.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,31 +13,33 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Ball.js b/src/components/Ball.blits similarity index 85% rename from src/components/Ball.js rename to src/components/Ball.blits index 5517e05..8e4f75a 100644 --- a/src/components/Ball.js +++ b/src/components/Ball.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,14 +13,17 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Bar.js b/src/components/Bar.blits similarity index 74% rename from src/components/Bar.js rename to src/components/Bar.blits index 7876903..58d1958 100644 --- a/src/components/Bar.js +++ b/src/components/Bar.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,28 +13,30 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/Box.js b/src/components/Box.blits similarity index 61% rename from src/components/Box.js rename to src/components/Box.blits index e11df58..cdfc890 100644 --- a/src/components/Box.js +++ b/src/components/Box.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,16 +13,26 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Button.js b/src/components/Button.blits similarity index 81% rename from src/components/Button.js rename to src/components/Button.blits index d7d172a..e877320 100644 --- a/src/components/Button.js +++ b/src/components/Button.blits @@ -1,5 +1,6 @@ + /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,23 +14,26 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Card.js b/src/components/Card.blits similarity index 76% rename from src/components/Card.js rename to src/components/Card.blits index 21ddce3..a92133f 100644 --- a/src/components/Card.js +++ b/src/components/Card.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,21 +13,23 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/pages/Exponential.js b/src/components/ExponentialItem.blits similarity index 52% rename from src/pages/Exponential.js rename to src/components/ExponentialItem.blits index 32d5a93..7da76a4 100644 --- a/src/pages/Exponential.js +++ b/src/components/ExponentialItem.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,24 +13,27 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Flags.js b/src/components/Flags.blits similarity index 70% rename from src/components/Flags.js rename to src/components/Flags.blits index 50e8fa9..c3de3ee 100644 --- a/src/components/Flags.js +++ b/src/components/Flags.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,25 +13,28 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/ForLoopAdvanced/LegendItem.blits b/src/components/ForLoopAdvanced/LegendItem.blits new file mode 100644 index 0000000..fd78d8d --- /dev/null +++ b/src/components/ForLoopAdvanced/LegendItem.blits @@ -0,0 +1,33 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/ForLoopAdvanced/Row.blits b/src/components/ForLoopAdvanced/Row.blits new file mode 100644 index 0000000..58ca326 --- /dev/null +++ b/src/components/ForLoopAdvanced/Row.blits @@ -0,0 +1,32 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/ForLoopAdvanced/Rows.blits b/src/components/ForLoopAdvanced/Rows.blits new file mode 100644 index 0000000..215a025 --- /dev/null +++ b/src/components/ForLoopAdvanced/Rows.blits @@ -0,0 +1,42 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/Hero.js b/src/components/Hero.blits similarity index 51% rename from src/components/Hero.js rename to src/components/Hero.blits index 8686099..4046a95 100644 --- a/src/components/Hero.js +++ b/src/components/Hero.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,38 +13,40 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/Letter.js b/src/components/Letter.blits similarity index 66% rename from src/components/Letter.js rename to src/components/Letter.blits index 6075404..60ffdcc 100644 --- a/src/components/Letter.js +++ b/src/components/Letter.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,32 +13,34 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/MemoryCard.js b/src/components/MemoryCard.blits similarity index 75% rename from src/components/MemoryCard.js rename to src/components/MemoryCard.blits index cbdab63..51c5d69 100644 --- a/src/components/MemoryCard.js +++ b/src/components/MemoryCard.blits @@ -1,5 +1,5 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC + + + + + diff --git a/src/components/Menu.js b/src/components/Menu.blits similarity index 71% rename from src/components/Menu.js rename to src/components/Menu.blits index 7d1d902..b4431da 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.blits @@ -1,5 +1,5 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC + + + + + diff --git a/src/pages/Sprites/menu.js b/src/components/MenuSprite.blits similarity index 66% rename from src/pages/Sprites/menu.js rename to src/components/MenuSprite.blits index 1510a86..6d14fa4 100644 --- a/src/pages/Sprites/menu.js +++ b/src/components/MenuSprite.blits @@ -1,5 +1,5 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC + + + + + diff --git a/src/components/NamedSlotCard.js b/src/components/NamedSlotCard.blits similarity index 50% rename from src/components/NamedSlotCard.js rename to src/components/NamedSlotCard.blits index b30d769..d6e18d4 100644 --- a/src/components/NamedSlotCard.js +++ b/src/components/NamedSlotCard.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,25 +13,34 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/PortalItem.js b/src/components/PortalItem.blits similarity index 72% rename from src/components/PortalItem.js rename to src/components/PortalItem.blits index 0138f6c..857658b 100644 --- a/src/components/PortalItem.js +++ b/src/components/PortalItem.blits @@ -13,18 +13,21 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/PortalRow.js b/src/components/PortalRow.blits similarity index 70% rename from src/components/PortalRow.js rename to src/components/PortalRow.blits index b950676..ff38ec5 100644 --- a/src/components/PortalRow.js +++ b/src/components/PortalRow.blits @@ -13,37 +13,40 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/Poster.js b/src/components/Poster.blits similarity index 77% rename from src/components/Poster.js rename to src/components/Poster.blits index 3522092..abee48b 100644 --- a/src/components/Poster.js +++ b/src/components/Poster.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,21 +13,24 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/components/PosterTitle.js b/src/components/PosterTitle.blits similarity index 69% rename from src/components/PosterTitle.js rename to src/components/PosterTitle.blits index 39dbb2b..6833326 100644 --- a/src/components/PosterTitle.js +++ b/src/components/PosterTitle.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,29 +13,32 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ -import Blits from '@lightningjs/blits' - -export default Blits.Component('PosterTitle', { - template: ` + + + diff --git a/src/components/SlotCard.js b/src/components/SlotCard.blits similarity index 67% rename from src/components/SlotCard.js rename to src/components/SlotCard.blits index cd89638..6e62de9 100644 --- a/src/components/SlotCard.js +++ b/src/components/SlotCard.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,18 +13,21 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/SourceInfo.blits b/src/components/SourceInfo.blits new file mode 100644 index 0000000..38576cb --- /dev/null +++ b/src/components/SourceInfo.blits @@ -0,0 +1,53 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/components/Square.js b/src/components/Square.blits similarity index 82% rename from src/components/Square.js rename to src/components/Square.blits index 1a0b4dd..4db7456 100644 --- a/src/components/Square.js +++ b/src/components/Square.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,14 +13,16 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/TmdbRow.js b/src/components/TmdbRow.blits similarity index 73% rename from src/components/TmdbRow.js rename to src/components/TmdbRow.blits index ed7c132..e7cefe0 100644 --- a/src/components/TmdbRow.js +++ b/src/components/TmdbRow.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,13 +13,29 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + -import Blits from '@lightningjs/blits' + diff --git a/src/components/Toggle.js b/src/components/Toggle.blits similarity index 73% rename from src/components/Toggle.js rename to src/components/Toggle.blits index 2c40a19..8d3f1fd 100644 --- a/src/components/Toggle.js +++ b/src/components/Toggle.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,15 +13,18 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/components/Toggles.js b/src/components/Toggles.blits similarity index 62% rename from src/components/Toggles.js rename to src/components/Toggles.blits index 55fa9c5..ad8ec58 100644 --- a/src/components/Toggles.js +++ b/src/components/Toggles.blits @@ -13,31 +13,34 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/index.js b/src/index.js index cc007aa..1f3b601 100644 --- a/src/index.js +++ b/src/index.js @@ -20,7 +20,7 @@ import { theme } from '@lightningjs/blits/plugins' import { language } from '@lightningjs/blits/plugins' import keymapping from './keymapping.js' -import App from './App.js' +import App from './App.blits' import colors from './themes/colors.js' import sizes from './themes/sizes.js' diff --git a/src/pages/Alpha.blits b/src/pages/Alpha.blits new file mode 100644 index 0000000..cd6c7c4 --- /dev/null +++ b/src/pages/Alpha.blits @@ -0,0 +1,88 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Alpha.js b/src/pages/Alpha.js deleted file mode 100644 index a6ad9e9..0000000 --- a/src/pages/Alpha.js +++ /dev/null @@ -1,84 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Alpha', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - Text with alpha applied directly - - - Text with alpha applied on parent element - - - `, - state() { - return { - alpha: 0.5, - direction: 'up', - image: 'assets/lightningbolt.png', - } - }, - hooks: { - ready() { - // backstopjs - if (process.env.NODE_ENV === 'testing') { - return console.log('backstopjs:ready') - } - this.$setInterval(() => { - const alpha = this.direction === 'up' ? this.alpha + 0.2 : this.alpha - 0.2 - this.alpha = Math.max(Math.min(alpha, 1), 0.1) - if (this.alpha === 1) { - this.direction = 'down' - } - if (this.alpha === 0.1) { - this.direction = 'up' - } - }, 1400) - }, - }, -}) diff --git a/src/pages/Announcer.blits b/src/pages/Announcer.blits new file mode 100644 index 0000000..8bdd842 --- /dev/null +++ b/src/pages/Announcer.blits @@ -0,0 +1,72 @@ +/* + * Copyright 2025 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/Announcer.js b/src/pages/Announcer.js deleted file mode 100644 index 99c5981..0000000 --- a/src/pages/Announcer.js +++ /dev/null @@ -1,130 +0,0 @@ -/* - * Copyright 2025 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -const Item = Blits.Component('Item', { - template: ` - - - - `, - props: ['name'], - state() { - return { - message: null, - } - }, - hooks: { - focus() { - this.message = this.$announcer.speak(this.name) - }, - unfocus() { - if (this.message) { - this.message.stop() - this.message.cancel() - } - }, - }, -}) - -const Row = Blits.Component('Row', { - components: { - Item, - }, - template: ` - - - - - `, - props: ['title', 'items'], - state() { - return { - focusIndex: -1, - message: null, - } - }, - hooks: { - focus() { - this.message = this.$announcer.speak('Row with different ' + this.title) - this.focusIndex = 0 - this.$trigger('focusIndex') - }, - unfocus() { - if (this.message) { - this.message.stop() - this.message.cancel() - } - }, - }, - watch: { - focusIndex(v) { - this.$select('item' + v).$focus() - }, - }, - input: { - right() { - this.focusIndex = Math.min(this.focusIndex + 1, this.items.length - 1) - }, - left() { - this.focusIndex = Math.max(this.focusIndex - 1, 0) - }, - }, -}) - -export default Blits.Component('Announcer', { - components: { - Row, - }, - template: ` - - Food - - - - `, - state() { - return { - focusIndex: 1, - } - }, - watch: { - focusIndex(v) { - this.$select('row' + v).$focus() - }, - }, - hooks: { - focus() { - this.$announcer.speak('The topic is Food') - this.$trigger('focusIndex') - }, - }, - input: { - up() { - this.focusIndex = Math.max(this.focusIndex - 1, 1) - }, - down() { - this.focusIndex = Math.min(this.focusIndex + 1, 2) - }, - }, -}) diff --git a/src/pages/Colors.blits b/src/pages/Colors.blits new file mode 100644 index 0000000..9e5e6f5 --- /dev/null +++ b/src/pages/Colors.blits @@ -0,0 +1,124 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Colors.js b/src/pages/Colors.js deleted file mode 100644 index 49b0e1e..0000000 --- a/src/pages/Colors.js +++ /dev/null @@ -1,121 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Colors', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - bg: '#fff', - color1: '#22d3ee', - color2: '#dc2626', - color3: 'rgba(251, 191, 36)', - color4: '#bfdbfe', - } - }, - input: { - enter() { - this.color1 = this.color1 === '#0891b2' ? '#22d3ee' : '#0891b2' - this.color2 = this.color2 === '#dc2626' ? '#0f0' : '#dc2626' - this.color3 = - this.color3 === 'rgba(251, 191, 36)' ? 'rgba(30, 64, 175, 0.5)' : 'rgba(251, 191, 36)' - this.color4 = this.color4 === '#1e3a8a' ? '#bfdbfe' : '#1e3a8a' - }, - }, - hooks: { - ready() { - //backstopjs - if (process.env.NODE_ENV === 'testing') { - return console.log('backstopjs:ready') - } - - let i = 0 - const bgColors = ['#fff', '#333', '#c0ff33', '#546aaa', '#000', 'tomato'] - this.$setInterval(() => { - i = i + 1 - if (i === bgColors.length - 1) i = 0 - this.bg = bgColors[i] - }, 2000) - }, - }, -}) diff --git a/src/pages/Components.js b/src/pages/Components.blits similarity index 52% rename from src/pages/Components.js rename to src/pages/Components.blits index d1909f5..f8bbd34 100644 --- a/src/pages/Components.js +++ b/src/pages/Components.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,37 +13,39 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/pages/Effects.js b/src/pages/Effects.js deleted file mode 100644 index 851e91e..0000000 --- a/src/pages/Effects.js +++ /dev/null @@ -1,99 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Effects', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - - state() { - return { - direction: 'up', - radius: 0, - effects: [ - { type: 'borderTop', props: { width: 20, color: '#be123c' } }, - { type: 'borderBottom', props: { width: 20, color: '#f43f5e' } }, - ], - } - }, - hooks: { - ready() { - this.$setInterval(() => { - const radius = this.direction === 'up' ? this.radius + 10 : this.radius - 10 - this.radius = Math.max(Math.min(radius, 80), 0) - if (this.radius === 80) { - this.direction = 'down' - } - if (this.radius === 0) { - this.direction = 'up' - } - }, 500) - - let count = 0 - this.$setInterval(() => { - count++ - if (count % 2) { - this.effects = [ - { type: 'borderTop', props: { width: 50, color: '#f43f5e' } }, - { type: 'borderBottom', props: { width: 50, color: '#be123c' } }, - ] - } else { - this.effects = [ - { type: 'borderTop', props: { width: 20, color: '#be123c' } }, - { type: 'borderBottom', props: { width: 20, color: '#f43f5e' } }, - ] - } - }, 2000) - }, - }, -}) diff --git a/src/pages/Events.js b/src/pages/Events.blits similarity index 74% rename from src/pages/Events.js rename to src/pages/Events.blits index 5a3e191..98c170e 100644 --- a/src/pages/Events.js +++ b/src/pages/Events.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,21 +13,23 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/pages/Exponential.blits b/src/pages/Exponential.blits new file mode 100644 index 0000000..029e2f6 --- /dev/null +++ b/src/pages/Exponential.blits @@ -0,0 +1,52 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt.js b/src/pages/Firebolt.js deleted file mode 100644 index 96c3e82..0000000 --- a/src/pages/Firebolt.js +++ /dev/null @@ -1,346 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -import { Account, Device, Localization } from '@firebolt-js/sdk' -import fireBoltModules from '../api/fireBoltModules' - -const Module = Blits.Component('Module', { - template: ` - - - - `, - state() { - return { - w: 300, - h: 250, - bColor: "{ top: '#93C5FD', bottom: '#3B82F6' }", - fColor: '#fff', - } - }, - props: ['name'], - hooks: { - focus() { - this.bColor = "{ top: '#6366F1', bottom: '#4F46E5' }" - }, - unfocus() { - this.bColor = "{ top: '#93C5FD', bottom: '#3B82F6' }" - }, - }, - input: { - enter() { - this.$router.to(`/examples/firebolt/${this.name}`) - }, - }, -}) - -const Method = Blits.Component('Methods', { - template: ` - - - - - - - - - `, - state() { - return { - w: 600, - h: 75, - nameBgColor: "{ top: '#93C5FD', bottom: '#3B82F6' }", - } - }, - props: ['name', 'about'], - hooks: { - focus() { - this.nameBgColor = "{ top: '#6366F1', bottom: '#4F46E5' }" - this.$emit('execute', this.name) - }, - unfocus() { - this.nameBgColor = "{ top: '#93C5FD', bottom: '#3B82F6' }" - }, - }, -}) - -const List = Blits.Component('List', { - components: { - Method, - Module, - }, - template: ` - - - - - - - - - `, - state() { - return { - x: 400, - y: 100, - activeIndex: 0, - } - }, - props: ['data', 'type'], - computed: { - methods() { - return !this.isModule ? this.data : [] - }, - modules() { - return this.isModule ? this.data : [] - }, - isModule() { - return this.type === 'module' - }, - }, - watch: { - activeIndex(v) { - const el = this.$select(`${this.type}${v}`) - el && el.$focus && el.$focus() - }, - }, - hooks: { - focus() { - this.$trigger('activeIndex') - }, - }, - input: { - right() { - if (this.isModule && this.activeIndex < this.data.length - 1) this.move(1) - }, - left() { - if (this.isModule && this.activeIndex > 0) this.move(-1) - }, - down() { - if (!this.isModule && this.activeIndex < this.data.length - 1) this.move(1) - }, - up() { - if (!this.isModule && this.activeIndex > 0) this.move(-1) - }, - }, - methods: { - move(dir) { - const next = this.activeIndex + dir - if (this.type == 'method') { - this.y = next > 5 ? -(next - 5) * 160 - 100 : 100 - } else if (this.type == 'module') { - this.x = next > 3 ? -(next - 3) * 400 - 400 : 400 - } - this.activeIndex = next - }, - }, -}) - -const FireBolt = Blits.Component('FireBolt', { - components: { - List, - }, - template: ` - - - - - `, - computed: { - moduleNames() { - return Object.keys(fireBoltModules).map((m) => { - return { id: m, name: m.charAt(0).toUpperCase() + m.slice(1) } - }) - }, - }, - hooks: { - focus() { - const cmp = this.$select('modules') - cmp && cmp.$focus && cmp.$focus() - }, - }, -}) - -const DeviceModule = Blits.Component('DeviceModule', { - components: { List }, - template: ` - - - - - - - - - - - `, - state() { - return { - device: fireBoltModules.device, - response: '', - networkRes: {}, - isNetworkRes: false, - } - }, - hooks: { - ready() { - this.$listen('execute', async (api) => { - this.$log.info(`Execute Device ${api} API`) - this.isNetworkRes = false - switch (api) { - case 'make': - this.response = await Device.make() - break - case 'model': - this.response = await Device.model() - break - case 'name': - this.response = await Device.name() - break - case 'network': - Object.assign(this.networkRes, await Device.network()) - this.isNetworkRes = true - break - case 'platform': - this.response = await Device.platform() - break - } - }) - }, - focus() { - const comp = this.$select('methods') - comp && comp.$focus && comp.$focus() - }, - }, -}) - -const AccountModule = Blits.Component('AccountModule', { - components: { List }, - template: ` - - - - - - - `, - state() { - return { - account: fireBoltModules.account, - response: '', - size: 100, - } - }, - hooks: { - ready() { - this.$listen('execute', async (api) => { - this.$log.info(`Execute Account ${api} API`) - switch (api) { - case 'id': - this.size = 100 - this.response = await Account.id() - break - case 'uid': - this.size = 40 - this.response = await Device.uid() - break - } - }) - }, - focus() { - const comp = this.$select('methods') - comp && comp.$focus && comp.$focus() - }, - }, -}) - -const LocalizationModule = Blits.Component('LocalizationModule', { - components: { List }, - template: ` - - - - - - - `, - state() { - return { - localization: fireBoltModules.localization, - response: '', - size: 100, - } - }, - hooks: { - ready() { - this.$listen('execute', async (api) => { - this.$log.info(`Execute Keyboard ${api} API`) - this.response = 'null' - switch (api) { - case 'countryCode': - this.response = await Localization.countryCode() - break - case 'language': - this.response = await Localization.language() - break - case 'latlon': - this.response = (await Localization.latlon()).toString() - break - case 'locality': - this.response = await Localization.locality() - break - case 'postalCode': - this.response = await Localization.postalCode() - break - } - }) - }, - focus() { - const comp = this.$select('methods') - comp && comp.$focus && comp.$focus() - }, - }, -}) - -export const FireBoltRoutes = [ - { - path: '/examples/firebolt', - component: FireBolt, - }, - { - path: '/examples/firebolt/device', - component: DeviceModule, - }, - { - path: '/examples/firebolt/account', - component: AccountModule, - }, - { - path: '/examples/firebolt/localization', - component: LocalizationModule, - }, -] diff --git a/src/pages/Firebolt/AccountModule.blits b/src/pages/Firebolt/AccountModule.blits new file mode 100644 index 0000000..a5151cc --- /dev/null +++ b/src/pages/Firebolt/AccountModule.blits @@ -0,0 +1,65 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/DeviceModule.blits b/src/pages/Firebolt/DeviceModule.blits new file mode 100644 index 0000000..ec4a30c --- /dev/null +++ b/src/pages/Firebolt/DeviceModule.blits @@ -0,0 +1,79 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/Firebolt.blits b/src/pages/Firebolt/Firebolt.blits new file mode 100644 index 0000000..430e55b --- /dev/null +++ b/src/pages/Firebolt/Firebolt.blits @@ -0,0 +1,49 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/List.blits b/src/pages/Firebolt/List.blits new file mode 100644 index 0000000..028d73f --- /dev/null +++ b/src/pages/Firebolt/List.blits @@ -0,0 +1,103 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/LocalizationModule.blits b/src/pages/Firebolt/LocalizationModule.blits new file mode 100644 index 0000000..bce9879 --- /dev/null +++ b/src/pages/Firebolt/LocalizationModule.blits @@ -0,0 +1,75 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/Method.blits b/src/pages/Firebolt/Method.blits new file mode 100644 index 0000000..0c8ffe6 --- /dev/null +++ b/src/pages/Firebolt/Method.blits @@ -0,0 +1,52 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/Module.blits b/src/pages/Firebolt/Module.blits new file mode 100644 index 0000000..34aebb9 --- /dev/null +++ b/src/pages/Firebolt/Module.blits @@ -0,0 +1,52 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Firebolt/index.js b/src/pages/Firebolt/index.js new file mode 100644 index 0000000..e61ac3e --- /dev/null +++ b/src/pages/Firebolt/index.js @@ -0,0 +1,25 @@ +import FireBolt from './Firebolt.blits' +import DeviceModule from './DeviceModule.blits' +import AccountModule from './AccountModule.blits' +import LocalizationModule from './LocalizationModule.blits' + +const FireBoltRoutes = [ + { + path: '/examples/firebolt', + component: FireBolt, + }, + { + path: '/examples/firebolt/device', + component: DeviceModule, + }, + { + path: '/examples/firebolt/account', + component: AccountModule, + }, + { + path: '/examples/firebolt/localization', + component: LocalizationModule, + }, +] + +export default FireBoltRoutes diff --git a/src/pages/Focus.js b/src/pages/Focus.js deleted file mode 100644 index f2c670b..0000000 --- a/src/pages/Focus.js +++ /dev/null @@ -1,148 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -const Outside = Blits.Component('Block', { - template: ` - `, - state() { - return { - color: 'purple', - } - }, - hooks: { - focus() { - console.log('focus on outside', this.componentId) - this.color = 'green' - }, - unfocus() { - this.color = 'purple' - }, - }, -}) - -const Block = Blits.Component('Block', { - template: ` - `, - state() { - return { - color: 'white', - } - }, - hooks: { - focus() { - console.log('focus on block', this.componentId) - this.color = 'yellow' - }, - unfocus() { - this.color = 'white' - }, - }, -}) - -const Tile = Blits.Component('Tile', { - components: { - Block, - }, - template: ` - - - - - `, - props: ['index'], - state() { - return { - color: 'white', - color2: 'blue', - } - }, - hooks: { - focus() { - console.log('focus on tile', this.componentId) - this.color = 'red' - this.$select('block').$focus() - }, - unfocus() { - this.color = 'blue' - }, - }, -}) - -export default Blits.Component('Focus', { - components: { - Tile, - Outside, - }, - template: ` - - - - - - - - - - - - - - `, - state() { - return { - index: 1, - color: 'white', - } - }, - hooks: { - ready() { - this.$trigger('index') - this.$setInterval(() => { - this.$select('outside2').$focus() - }, 2000) - }, - focus() { - console.log('focus', 'Focus page') - this.color = 'white' - }, - unfocus() { - console.log('unfocus', 'Focus page') - this.color = 'blue' - }, - }, - watch: { - index(v) { - const selected = this.$select('tile' + v) - if (selected) selected.$focus() - else console.log('no tile found for ' + v) - }, - }, - input: { - left() { - this.index = Math.max(1, this.index - 1) - }, - right(e) { - this.index = Math.min(3, this.index + 1) - this.parent.$focus(e) - }, - enter() { - this.$select('outside1').$focus() - }, - }, -}) diff --git a/src/pages/FocusHandling.js b/src/pages/FocusHandling.blits similarity index 56% rename from src/pages/FocusHandling.js rename to src/pages/FocusHandling.blits index 3a9a237..22c6173 100644 --- a/src/pages/FocusHandling.js +++ b/src/pages/FocusHandling.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,33 +13,36 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/ForLoop.blits b/src/pages/ForLoop.blits new file mode 100644 index 0000000..f36401a --- /dev/null +++ b/src/pages/ForLoop.blits @@ -0,0 +1,177 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + diff --git a/src/pages/ForLoop.js b/src/pages/ForLoop.js deleted file mode 100644 index 3259429..0000000 --- a/src/pages/ForLoop.js +++ /dev/null @@ -1,175 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' -import Square from '../components/Square' - -const colors = ['#bbf7d0', '#86efac', '#4ade80', '#22c55e', '#16a34a', '#15803d'] - -export default Blits.Component('ForLoop', { - components: { - Square, - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - collection1: [0, 100, 200, 300, 400, 500], - collection2: [ - { - id: 'block1', - x: 0, - color: colors[0], - }, - { - id: 'block2', - x: 100, - color: colors[1], - }, - { - id: 'block3', - x: 200, - color: colors[2], - }, - { - id: 'block4', - x: 300, - color: colors[3], - }, - { - id: 'block5', - x: 400, - color: colors[4], - }, - { - id: 'block6', - x: 500, - color: colors[5], - }, - ], - collection3: [], - collection4: [ - { x: 0, id: 'one' }, - { x: 200, id: 'two' }, - { x: 400, id: 'three' }, - ], - alpha: 0.5, - } - }, - hooks: { - ready() { - this.$setTimeout(() => { - this.collection2[0].color = colors[5] - this.collection2[1].color = colors[4] - this.collection2[2].color = colors[3] - this.collection2[3].color = colors[2] - this.collection2[4].color = colors[1] - this.collection2[5].color = colors[0] - }, 4000) - - let count = 0 - const interval = this.$setInterval(() => { - this.collection3.push({ - x: count * 100, - color: colors[count], - }) - count++ - if (count === colors.length) clearInterval(interval) - }, 1000) - - this.$setInterval(() => { - this.alpha = this.alpha === 0.5 ? 1 : 0.5 - }, 800) - - this.$setTimeout(() => { - this.collection4 = [ - { x: 100, id: 4 }, - { x: 500, id: 5 }, - ] - }, 2000) - }, - }, -}) diff --git a/src/pages/ForLoopAdvanced.js b/src/pages/ForLoopAdvanced.blits similarity index 55% rename from src/pages/ForLoopAdvanced.js rename to src/pages/ForLoopAdvanced.blits index 79277e9..2e23f9c 100644 --- a/src/pages/ForLoopAdvanced.js +++ b/src/pages/ForLoopAdvanced.blits @@ -1,22 +1,79 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * - * Unless required by applicable laew or agreed to in writing, software + * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/pages/Gradients.js b/src/pages/Gradients.blits similarity index 54% rename from src/pages/Gradients.js rename to src/pages/Gradients.blits index 51c0203..9b1d45f 100644 --- a/src/pages/Gradients.js +++ b/src/pages/Gradients.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,17 +13,21 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + diff --git a/src/pages/Images.js b/src/pages/Images.blits similarity index 58% rename from src/pages/Images.js rename to src/pages/Images.blits index 0f42f09..fed6b48 100644 --- a/src/pages/Images.js +++ b/src/pages/Images.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,7 +13,39 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/Intro.blits b/src/pages/Intro.blits new file mode 100644 index 0000000..60a0cc9 --- /dev/null +++ b/src/pages/Intro.blits @@ -0,0 +1,42 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Intro.js b/src/pages/Intro.js deleted file mode 100644 index d60b296..0000000 --- a/src/pages/Intro.js +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' -import Letter from '../components/Letter.js' - -export default Blits.Component('Intro', { - components: { - Letter, - }, - template: ` - - - - - - - - - - - - `, -}) diff --git a/src/pages/KeyCodes.blits b/src/pages/KeyCodes.blits new file mode 100644 index 0000000..e3a39de --- /dev/null +++ b/src/pages/KeyCodes.blits @@ -0,0 +1,98 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/KeyCodes.js b/src/pages/KeyCodes.js deleted file mode 100644 index c0352be..0000000 --- a/src/pages/KeyCodes.js +++ /dev/null @@ -1,59 +0,0 @@ -import Blits from '@lightningjs/blits' -import Box from '../components/Box.js' - -export default Blits.Application({ - components: { - Box, - }, - template: ` - - - - - - - - - - - - - `, - state() { - return { - backPressed: false, - key: '...', - code: '...', - keyCode: '...', - } - }, - computed: { - backLabel() { - return this.backPressed ? 'Press back key again to navigate back' : '' - }, - }, - methods: { - updateLabels(e) { - this.key = e.key - this.code = e.code - this.keyCode = e.keyCode + '' - }, - }, - input: { - any(e) { - this.backPressed = false - this.updateLabels(e) - }, - back(e) { - if (this.backPressed === true) { - this.$router.back() - } else { - this.updateLabels(e) - } - - return () => { - this.backPressed = true - } - }, - }, -}) diff --git a/src/pages/KeyInput.js b/src/pages/KeyInput.blits similarity index 55% rename from src/pages/KeyInput.js rename to src/pages/KeyInput.blits index ac0d7f2..17a4467 100644 --- a/src/pages/KeyInput.js +++ b/src/pages/KeyInput.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,36 +13,38 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ -import Blits from '@lightningjs/blits' + - - - - - - `, + diff --git a/src/pages/LanguagePlugin.js b/src/pages/LanguagePlugin.blits similarity index 76% rename from src/pages/LanguagePlugin.js rename to src/pages/LanguagePlugin.blits index 5cfd499..79dc55e 100644 --- a/src/pages/LanguagePlugin.js +++ b/src/pages/LanguagePlugin.blits @@ -13,37 +13,40 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/Layout.blits b/src/pages/Layout.blits new file mode 100644 index 0000000..b34c094 --- /dev/null +++ b/src/pages/Layout.blits @@ -0,0 +1,191 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Layout.js b/src/pages/Layout.js deleted file mode 100644 index 81aaf0c..0000000 --- a/src/pages/Layout.js +++ /dev/null @@ -1,187 +0,0 @@ -/* - * Copyright 2024 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' -import Ball from '../components/Ball' - -export default Blits.Component('Layout', { - components: { - Ball, - }, - template: ` - - - Static horizontal Layout - - - - - - - - - - Static vertical Layout - - - - - - - - - - Nested Layouts - - - - - - - - - - - - - - - - - - - Layout with Text - - - Hello - - - - - - - Dynamic dimensions Layout - - - - - - - - - - For loop Layout - - - - - - Layout with transitions - - - - - - - - - - - - - Layout with padding - - - - - - - - - - - - - - - - - - - - - - - - Layout with a Component - - - - - - - - - `, - state() { - return { - w: 50, - colors: ['green', 'red', 'blue', 'yellow'], - w3: 150, - w2: 20, - } - }, - hooks: { - ready() { - this.$setInterval(() => { - this.w = this.w === 100 ? 50 : 100 - this.w2 = this.w2 === 20 ? 40 : 20 - this.w3 = this.w3 === 150 ? 250 : 150 - }, 2000) - - this.$setTimeout(() => { - this.colors.push('purple') - }, 4000) - }, - }, - methods: { - dynamicLayoutUpdated(dimensions) { - this.$log.info('Dynamic layout updated', dimensions.w, dimensions.h) - }, - }, -}) diff --git a/src/pages/Loading.js b/src/pages/Loading.blits similarity index 66% rename from src/pages/Loading.js rename to src/pages/Loading.blits index c33cd68..b73b860 100644 --- a/src/pages/Loading.js +++ b/src/pages/Loading.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,25 +13,23 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ -import Blits from '@lightningjs/blits' + + + diff --git a/src/pages/MemoryGame.js b/src/pages/MemoryGame.blits similarity index 72% rename from src/pages/MemoryGame.js rename to src/pages/MemoryGame.blits index 797dc01..aca52aa 100644 --- a/src/pages/MemoryGame.js +++ b/src/pages/MemoryGame.blits @@ -1,5 +1,5 @@ /* - * Copyright 2023 Comcast Cable Communications Management, LLC + * Copyright 2024 Comcast Cable Communications Management, LLC * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -13,70 +13,67 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/Player.js b/src/pages/Player.blits old mode 100755 new mode 100644 similarity index 71% rename from src/pages/Player.js rename to src/pages/Player.blits index 361c51b..82f2f6a --- a/src/pages/Player.js +++ b/src/pages/Player.blits @@ -13,39 +13,42 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/Portal.js b/src/pages/Portal.blits similarity index 85% rename from src/pages/Portal.js rename to src/pages/Portal.blits index 3df64df..9a90bba 100644 --- a/src/pages/Portal.js +++ b/src/pages/Portal.blits @@ -13,11 +13,53 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + + diff --git a/src/pages/Positioning.blits b/src/pages/Positioning.blits new file mode 100644 index 0000000..059f10a --- /dev/null +++ b/src/pages/Positioning.blits @@ -0,0 +1,148 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Positioning.js b/src/pages/Positioning.js deleted file mode 100644 index e9ddf12..0000000 --- a/src/pages/Positioning.js +++ /dev/null @@ -1,145 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Positioning', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - x1: 20, - x2: 140, - x3: 20 + 140 + 100, - x4: 380, - y: 140, - xA: 20, - xB: 140, - xC: 260, - xD: 380, - yNested: 0, - xNested: 0, - bar2: { - direction: 'up', - v: '10%', - }, - bar3: '10%', - } - }, - hooks: { - ready() { - if (process.env.NODE_ENV === 'testing') { - return console.log('backstopjs:ready') - } - this.$setTimeout(() => { - this.xD = this.xD + 200 - this.xC = this.xC + 100 - this.xB = this.xB + 50 - this.xA = this.xA + 25 - }, 4000) - - this.$setInterval(() => { - this.yNested = this.yNested === 0 ? 50 : 0 - }, 2000) - - this.$setInterval(() => { - this.xNested = this.xNested === 0 ? 150 : 0 - }, 1000) - - this.$setInterval(() => { - const v = parseFloat(this.bar2.v) - const newV = this.bar2.direction === 'up' ? v + 10 : v - 10 - this.bar2.v = newV + '%' - if (newV >= 90) { - this.bar2.direction = 'down' - } - if (newV <= 10) { - this.bar2.direction = 'up' - } - }, 400) - - this.$setInterval(() => { - this.bar3 = Math.ceil(Math.random() * 96) + '%' - }, 2000) - }, - }, -}) diff --git a/src/pages/Resize.blits b/src/pages/Resize.blits new file mode 100644 index 0000000..59abec3 --- /dev/null +++ b/src/pages/Resize.blits @@ -0,0 +1,118 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/Resize.js b/src/pages/Resize.js deleted file mode 100644 index 5e50754..0000000 --- a/src/pages/Resize.js +++ /dev/null @@ -1,97 +0,0 @@ -import Blits from '@lightningjs/blits' - -export default Blits.Component('Resize', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - activePage: 1, - pages: { - x1: 0, - x2: 1920, - x3: 1920 * 2, - }, - w: 500, - img: 'assets/testscreen.png', - img1: 'assets/testscreen_rotated.png', - titles: { - t1: 'Texture width > height - fit cover maximum width of node and position Y - 0, 0.5, 1', - t2: 'Texture width > height - fit:cover maximum width of node and position X - 0, 0.5, 1', - t3: 'Texture width < height - fit cover maximum width of node and positionY - 0, 0.5, 1', - t4: 'Texture width < height - fit cover maximum width of node and position X - 0, 0.25, 0.5, 0.75, 1', - t5: 'Texture width > height - fit contain maximum height of node', - t6: 'Texture width > height - fit contain maximum width of node', - }, - } - }, - computed: { - totalPages() { - return Object.keys(this.pages).length - }, - }, - input: { - right() { - if (this.activePage < this.totalPages) { - for (let i = 1; i <= this.totalPages; i++) { - this.pages[`x${i}`] = this.pages[`x${i}`] - 1920 - } - this.activePage += 1 - } - }, - left() { - if (this.activePage > 1) { - for (let i = this.totalPages; i >= 1; i--) { - this.pages[`x${i}`] = this.pages[`x${i}`] + 1920 - } - this.activePage -= 1 - } - }, - }, -}) diff --git a/src/pages/Rotation.blits b/src/pages/Rotation.blits new file mode 100644 index 0000000..cc9129e --- /dev/null +++ b/src/pages/Rotation.blits @@ -0,0 +1,120 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/Rotation.js b/src/pages/Rotation.js deleted file mode 100644 index eb200f1..0000000 --- a/src/pages/Rotation.js +++ /dev/null @@ -1,117 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Rotation', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - rotation1: 38, - rotation2: 0, - rotation3: 0, - } - }, - hooks: { - ready() { - let interval1 = 800 - let interval2 = 2000 - - if (process.env.NODE_ENV === 'testing') { - interval1 = interval2 = 4000 - } - - this.$setInterval(() => { - const rotation = this.rotation2 + 10 - this.rotation2 = rotation <= 360 ? rotation : 0 - }, interval1) - - this.$setInterval(() => { - this.rotation3 = Math.max(10, Math.min(720, this.rotation3 * 2)) - if (this.rotation3 === 720) { - this.rotation3 = 0 - } - }, interval2) - }, - }, -}) diff --git a/src/pages/RouterHooks.js b/src/pages/RouterHooks.js deleted file mode 100644 index ccd9f57..0000000 --- a/src/pages/RouterHooks.js +++ /dev/null @@ -1,318 +0,0 @@ -import Blits from '@lightningjs/blits' - -const hookPageTemplate = { - template: ` - - - - - - - - - - - - - - - - - - - - `, - props: { - 'page': undefined - }, - computed: { - pageTitle() { - //compute page title from page data, if there's no page data use default title - return (this.page && this.page.title) || this.title - }, - }, - state() { - //default state template to indicate which directions will be available if they are defined when "extending" - return { - title: 'Start', - up: 'up', - right: 'right', - down: 'down', - left: 'left', - } - }, -} - -//landing page of the router hook example, contains 2 flow examples -export const RouterHookPage = Blits.Component('RouterHookPage', { - ...hookPageTemplate, - state() { - return { - title: 'Start', - down: 'episode flow', - right: 'movie flow', - left: false, - up: false, - } - }, - input: { - right() { - //trigger router to navigate to movie flow - this.$router.to('/examples/router-hooks/movie') - }, - down() { - //trigger router to navigate to episode flow - this.$router.to('/examples/router-hooks/episode/1') - }, - }, -}) - -//movie flow page, with 2 directions left: back, right: rating -const Movie = Blits.Component('RouterHookMovie', { - ...hookPageTemplate, - state() { - return { - title: 'Movie', - left: 'Back', - right: 'Rating', - up: false, - down: false, - } - }, - input: { - left() { - //trigger router back navigation. Leads back to: /examples/router-hooks - this.$router.back() - }, - right() { - //trigger router to navigate to rating page - this.$router.to('/examples/router-hooks/rating') - }, - }, -}) - -//movie flow page, with 2 directions left: back, right: Router example page landing -const Rating = Blits.Component('RouterHookRating', { - ...hookPageTemplate, - state() { - return { - title: 'Rating', - left: 'Back', - right: 'TO START', - up: false, - down: false, - } - }, - input: { - left() { - //trigger router back navigation. Leads back to: /examples/router-hooks/movie - this.$router.back() - }, - right() { - //trigger router to navigate to router hook example page landing - this.$router.to('/examples/router-hooks/') - }, - }, -}) - -//movie flow page, with 2 directions left: back, right: next episode -const Episode = Blits.Component('RouterHookEpisode', { - ...hookPageTemplate, - state() { - return { - title: 'Episode', - left: 'Back', - right: 'NEXT EPISODE', - up: false, - bottom: false, - } - }, - input: { - left() { - //trigger router back navigation. Leads back to: /examples/router-hooks. Even when episode id > 1 - this.$router.back() - }, - right() { - //trigger router to navigate to the next episode, and NOT save current episode page in navigation history - this.$router.to(`/examples/router-hooks/episode/${this.page.id + 1}`, undefined, { - inHistory: false, - }) - }, - }, -}) - -// Episodes overview page -const Episodes = Blits.Component('RouterHookEpisode', { - ...hookPageTemplate, - state() { - return { - title: 'Episodes \n overview', - right: 'FIRST EPISODE', - up: false, - down: false, - left: false, - } - }, - input: { - left() { - //trigger router back navigation. Leads back to: /examples/router-hooks. Even when episode id > 1 - this.$router.back() - }, - right() { - //trigger router to navigate to the next episode, and NOT save current episode page in navigation history - this.$router.to('/examples/router-hooks/episode/1', undefined, { - inHistory: false, - }) - }, - }, -}) - -//custom page transitions for when the router navigates to router example pages -const PageTransitions = { - slideInOutLeft: { - before: { - prop: 'x', - value: '100%', - }, - in: { - prop: 'x', - value: 0, - duration: 400, - }, - out: { - prop: 'x', - value: '-100%', - duration: 400, - }, - }, - slideInOutRight: { - before: { - prop: 'x', - value: '-100%', - }, - in: { - prop: 'x', - value: 0, - duration: 400, - }, - out: { - prop: 'x', - value: '100%', - duration: 400, - }, - }, - slideInOutUp: { - before: { - prop: 'y', - value: '100%', - }, - in: { - prop: 'y', - value: 0, - duration: 400, - }, - out: { - prop: 'y', - value: '-100%', - duration: 400, - }, - }, - slideInOutDown: { - before: { - prop: 'y', - value: '-100%', - }, - in: { - prop: 'y', - value: 0, - duration: 400, - }, - out: { - prop: 'y', - value: '100%', - duration: 400, - }, - }, -} - -export const RouterHookRoutes = [ - { - path: '/examples/router-hooks', - component: RouterHookPage, - hooks: { - async before(to, from) { - //change transition based on 'from' route - if (from && from.path === 'examples/router-hooks/movie') { - to.transition = PageTransitions.slideInOutRight - } - if (from && from.path === 'examples/router-hooks/rating') { - to.transition = PageTransitions.slideInOutLeft - } - if (from && from.path.indexOf('episode') > -1) { - to.transition = PageTransitions.slideInOutDown - } - return to - }, - }, - }, - { - path: '/examples/router-hooks/episode/:id', - component: Episode, - hooks: { - before(to, from) { - //change transition based on 'from' route - if (from && from.path.indexOf('episode') > -1) { - to.transition = PageTransitions.slideInOutLeft - } - const { id } = to.params - //if id > 5 lead route back to router example page landing - if (id > 5) { - return '/examples/router-hooks/' - } - //set page data based on episode ID - to.data.page = { - id: parseInt(id), - title: `Episode ${id}`, - } - return to - }, - }, - transition: PageTransitions.slideInOutUp, - options: { backtrack: true }, - }, - { - path: '/examples/router-hooks/episode', - component: Episodes, - transition: PageTransitions.slideInOutUp, - options: { - backtrack: true, - }, - }, - { - path: '/examples/router-hooks/movie', - component: Movie, - hooks: { - before(to, from) { - //change transition based on 'from' route - if (from && from.path === 'examples/router-hooks') { - to.transition = PageTransitions.slideInOutLeft - } - if (from && from.path === 'examples/router-hooks/rating') { - to.transition = PageTransitions.slideInOutRight - } - return to - }, - }, - }, - { - path: '/examples/router-hooks/rating', - component: Rating, - transition: PageTransitions.slideInOutLeft, - }, -] diff --git a/src/pages/RouterHooks/Episode.blits b/src/pages/RouterHooks/Episode.blits new file mode 100644 index 0000000..53aaea4 --- /dev/null +++ b/src/pages/RouterHooks/Episode.blits @@ -0,0 +1,66 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/Episodes.blits b/src/pages/RouterHooks/Episodes.blits new file mode 100644 index 0000000..cea8640 --- /dev/null +++ b/src/pages/RouterHooks/Episodes.blits @@ -0,0 +1,63 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/Movie.blits b/src/pages/RouterHooks/Movie.blits new file mode 100644 index 0000000..27d07ae --- /dev/null +++ b/src/pages/RouterHooks/Movie.blits @@ -0,0 +1,63 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + diff --git a/src/pages/RouterHooks/Rating.blits b/src/pages/RouterHooks/Rating.blits new file mode 100644 index 0000000..61e304f --- /dev/null +++ b/src/pages/RouterHooks/Rating.blits @@ -0,0 +1,64 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/RouterHookPage.blits b/src/pages/RouterHooks/RouterHookPage.blits new file mode 100644 index 0000000..d2542dd --- /dev/null +++ b/src/pages/RouterHooks/RouterHookPage.blits @@ -0,0 +1,64 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/RouterHookPageBase.blits b/src/pages/RouterHooks/RouterHookPageBase.blits new file mode 100644 index 0000000..fb36330 --- /dev/null +++ b/src/pages/RouterHooks/RouterHookPageBase.blits @@ -0,0 +1,76 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/components/ArrowDown.blits b/src/pages/RouterHooks/components/ArrowDown.blits new file mode 100644 index 0000000..8f29133 --- /dev/null +++ b/src/pages/RouterHooks/components/ArrowDown.blits @@ -0,0 +1,31 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/components/ArrowLeft.blits b/src/pages/RouterHooks/components/ArrowLeft.blits new file mode 100644 index 0000000..1f7c54b --- /dev/null +++ b/src/pages/RouterHooks/components/ArrowLeft.blits @@ -0,0 +1,30 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + diff --git a/src/pages/RouterHooks/components/ArrowRight.blits b/src/pages/RouterHooks/components/ArrowRight.blits new file mode 100644 index 0000000..292675c --- /dev/null +++ b/src/pages/RouterHooks/components/ArrowRight.blits @@ -0,0 +1,31 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/components/ArrowUp.blits b/src/pages/RouterHooks/components/ArrowUp.blits new file mode 100644 index 0000000..905d667 --- /dev/null +++ b/src/pages/RouterHooks/components/ArrowUp.blits @@ -0,0 +1,31 @@ +/* + * Copyright 2024 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/RouterHooks/index.js b/src/pages/RouterHooks/index.js new file mode 100644 index 0000000..70f6257 --- /dev/null +++ b/src/pages/RouterHooks/index.js @@ -0,0 +1,169 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import RouterHookPage from './RouterHookPage.blits' +import Movie from './Movie.blits' +import Rating from './Rating.blits' +import Episode from './Episode.blits' +import Episodes from './Episodes.blits' + +//custom page transitions for when the router navigates to router example pages +const PageTransitions = { + slideInOutLeft: { + before: { + prop: 'x', + value: '100%', + }, + in: { + prop: 'x', + value: 0, + duration: 400, + }, + out: { + prop: 'x', + value: '-100%', + duration: 400, + }, + }, + slideInOutRight: { + before: { + prop: 'x', + value: '-100%', + }, + in: { + prop: 'x', + value: 0, + duration: 400, + }, + out: { + prop: 'x', + value: '100%', + duration: 400, + }, + }, + slideInOutUp: { + before: { + prop: 'y', + value: '100%', + }, + in: { + prop: 'y', + value: 0, + duration: 400, + }, + out: { + prop: 'y', + value: '-100%', + duration: 400, + }, + }, + slideInOutDown: { + before: { + prop: 'y', + value: '-100%', + }, + in: { + prop: 'y', + value: 0, + duration: 400, + }, + out: { + prop: 'y', + value: '100%', + duration: 400, + }, + }, +} + +export const RouterHookRoutes = [ + { + path: '/examples/router-hooks', + component: RouterHookPage, + hooks: { + async before(to, from) { + //change transition based on 'from' route + if (from && from.path === 'examples/router-hooks/movie') { + to.transition = PageTransitions.slideInOutRight + } + if (from && from.path === 'examples/router-hooks/rating') { + to.transition = PageTransitions.slideInOutLeft + } + if (from && from.path.indexOf('episode') > -1) { + to.transition = PageTransitions.slideInOutDown + } + return to + }, + }, + }, + { + path: '/examples/router-hooks/episode/:id', + component: Episode, + hooks: { + before(to, from) { + //change transition based on 'from' route + if (from && from.path.indexOf('episode') > -1) { + to.transition = PageTransitions.slideInOutLeft + } + const { id } = to.params + //if id > 5 lead route back to router example page landing + if (id > 5) { + return '/examples/router-hooks/' + } + //set page data based on episode ID + to.data.page = { + id: parseInt(id), + title: `Episode ${id}`, + } + return to + }, + }, + transition: PageTransitions.slideInOutUp, + options: { backtrack: true }, + }, + { + path: '/examples/router-hooks/episode', + component: Episodes, + transition: PageTransitions.slideInOutUp, + options: { + backtrack: true, + }, + }, + { + path: '/examples/router-hooks/movie', + component: Movie, + hooks: { + before(to, from) { + //change transition based on 'from' route + if (from && from.path === 'examples/router-hooks') { + to.transition = PageTransitions.slideInOutLeft + } + if (from && from.path === 'examples/router-hooks/rating') { + to.transition = PageTransitions.slideInOutRight + } + return to + }, + }, + }, + { + path: '/examples/router-hooks/rating', + component: Rating, + transition: PageTransitions.slideInOutLeft, + }, +] + +// Export the main component as well for backwards compatibility +export { RouterHookPage } diff --git a/src/pages/Scaling.js b/src/pages/Scaling.blits similarity index 59% rename from src/pages/Scaling.js rename to src/pages/Scaling.blits index ab1be2a..bfd8fa4 100644 --- a/src/pages/Scaling.js +++ b/src/pages/Scaling.blits @@ -15,33 +15,35 @@ * SPDX-License-Identifier: Apache-2.0 */ + + + diff --git a/src/pages/Shaders.js b/src/pages/Shaders.blits similarity index 51% rename from src/pages/Shaders.js rename to src/pages/Shaders.blits index c19e615..ed83822 100644 --- a/src/pages/Shaders.js +++ b/src/pages/Shaders.blits @@ -15,46 +15,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -import Blits from '@lightningjs/blits' - -export default Blits.Component('ShaderAttributes', { - template: ` - - - + + + diff --git a/src/pages/ShadersCustom.blits b/src/pages/ShadersCustom.blits new file mode 100644 index 0000000..2dbad42 --- /dev/null +++ b/src/pages/ShadersCustom.blits @@ -0,0 +1,78 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/ShadersCustom.js b/src/pages/ShadersCustom.js deleted file mode 100644 index cecb979..0000000 --- a/src/pages/ShadersCustom.js +++ /dev/null @@ -1,79 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -const images = [ - 'https://images.unsplash.com/photo-1690360994204-3d10cc73a08d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80', - 'https://images.unsplash.com/photo-1582971103098-bfc707d2ad92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80', -] - -export default Blits.Component('ShadersCustom', { - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - image1: images[0], - image2: images[1], - shType: 'colorBurn', - } - }, - hooks: { - ready() { - this.$setInterval(() => { - if (this.shType === 'colorBurn') { - this.shType = 'blur' - } else { - this.shType = 'colorBurn' - // this.shader = { - // type: 'colorBurn', - // color: 'yellow', - // } - } - }, 5000) - }, - }, -}) diff --git a/src/pages/ShowIf.blits b/src/pages/ShowIf.blits new file mode 100644 index 0000000..c5890b6 --- /dev/null +++ b/src/pages/ShowIf.blits @@ -0,0 +1,115 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/ShowIf.js b/src/pages/ShowIf.js deleted file mode 100644 index 3b98e46..0000000 --- a/src/pages/ShowIf.js +++ /dev/null @@ -1,112 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' -import Square from './../components/Square.js' - -export default Blits.Component('ShowIf', { - components: { - Square, - }, - template: ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - showNr: 1, - hideNr: 0, - showBool: true, - hideBool: false, - showHideToggle: true, - } - }, - hooks: { - ready() { - this.$setInterval(() => { - // backstopjs - console.log('backstopjs:ready') - this.showHideToggle = !!!this.showHideToggle - }, 2000) - - this.$setTimeout(() => { - // this should not make a difference since no reactive bound is made - this.showNr = 0 - this.hideNr = 1 - this.showBool = false - this.hideBool = true - }, 4000) - }, - }, -}) diff --git a/src/pages/Slots.js b/src/pages/Slots.blits similarity index 52% rename from src/pages/Slots.js rename to src/pages/Slots.blits index 5e07412..7fd6464 100644 --- a/src/pages/Slots.js +++ b/src/pages/Slots.blits @@ -15,48 +15,50 @@ * SPDX-License-Identifier: Apache-2.0 */ + + + diff --git a/src/pages/SpecialCharacters.blits b/src/pages/SpecialCharacters.blits new file mode 100644 index 0000000..ff35f72 --- /dev/null +++ b/src/pages/SpecialCharacters.blits @@ -0,0 +1,75 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/SpecialCharacters.js b/src/pages/SpecialCharacters.js deleted file mode 100644 index 5e2810e..0000000 --- a/src/pages/SpecialCharacters.js +++ /dev/null @@ -1,137 +0,0 @@ -import Blits from '@lightningjs/blits' - -const Accent = Blits.Component('Accent', { - template: ` - - - - `, - state() { - return { - /** - * background color of accent tile - */ - bColor: "{ top: '#93C5FD', bottom: '#3B82F6' }", - } - }, - props: ['lang'], - hooks: { - focus() { - this.bColor = "{ top: '#6366F1', bottom: '#4F46E5' }" - }, - unfocus() { - this.bColor = "{ top: '#93C5FD', bottom: '#3B82F6' }" - }, - }, -}) - -const Accents = Blits.Component('Accents', { - components: { - Accent, - }, - template: ` - - - - - - - `, - props: ['data'], - state() { - return { - /** - * Position of accents list - */ - x: 160, - /** - * Current active index of tile - */ - activeIndex: 0, - /** - * Current active accent characters - */ - activeAccent: '', - } - }, - watch: { - activeIndex(v) { - const el = this.$select(`accent${v}`) - if (el && el.$focus) { - el.$focus() - this.activeAccent = this.data[v].chars - } - }, - }, - hooks: { - focus() { - this.$trigger('activeIndex') - }, - }, - input: { - right() { - if (this.activeIndex < this.data.length - 1) this.move(1) - }, - left() { - if (this.activeIndex > 0) this.move(-1) - }, - }, - methods: { - move(dir) { - const next = this.activeIndex + dir - this.x = next > 3 ? -(next - 3) * 400 - 160 : 160 - this.activeIndex = next - }, - }, -}) -export default Blits.Component('Characters', { - components: { - Accents, - }, - template: ` - - - - - - - - - - `, - state() { - return { - alphabets: 'abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ', - accents: [ - { - lang: 'Dutch', - chars: 'éèëïüáóijIJ', - }, - { - lang: 'French', - chars: 'éèêëàâîïôùûç', - }, - { - lang: 'Spanish', - chars: 'áéíóúñü', - }, - { - lang: 'Turkish', - chars: 'ÇçĞğİiÖöÜüŞş', - }, - ], - } - }, - hooks: { - focus() { - const comp = this.$select('accents') - if (comp && comp.$focus) comp.$focus() - }, - }, -}) diff --git a/src/pages/Sprites.js b/src/pages/Sprites.blits similarity index 88% rename from src/pages/Sprites.js rename to src/pages/Sprites.blits index c95179d..d70283d 100644 --- a/src/pages/Sprites.js +++ b/src/pages/Sprites.blits @@ -15,8 +15,14 @@ * SPDX-License-Identifier: Apache-2.0 */ + + + diff --git a/src/pages/Texts.js b/src/pages/Texts.blits similarity index 59% rename from src/pages/Texts.js rename to src/pages/Texts.blits index beb8d57..a1d0f81 100644 --- a/src/pages/Texts.js +++ b/src/pages/Texts.blits @@ -15,6 +15,54 @@ * SPDX-License-Identifier: Apache-2.0 */ + + + diff --git a/src/pages/Theming.blits b/src/pages/Theming.blits new file mode 100644 index 0000000..60a7fbb --- /dev/null +++ b/src/pages/Theming.blits @@ -0,0 +1,166 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 +*/ + + + + diff --git a/src/pages/Theming.js b/src/pages/Theming.js deleted file mode 100644 index 34f6fd5..0000000 --- a/src/pages/Theming.js +++ /dev/null @@ -1,163 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -import Toggle from '../components/Toggle.js' -import Bar from '../components/Bar.js' - -export default Blits.Component('Theming', { - components: { - Bar, - Toggle, - }, - template: ` - - Use "up", "down", "left" and "right" to change the appearance - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `, - state() { - return { - mode: 'dark', - sizes: 'small', - radius: 20, - } - }, - watch: { - mode(val) { - this.$colors.set(val) - }, - sizes(val) { - this.$sizes.set(val) - }, - }, - computed: { - text() { - return this.mode === 'dark' ? 'Dark mode' : 'Light mode' - }, - }, - input: { - right() { - this.toggleX = 0 - this.$setTimeout(() => { - this.mode = 'light' - }, 150) - }, - left() { - this.toggleX = 48 - this.$setTimeout(() => { - this.mode = 'dark' - }, 150) - }, - up() { - this.sizes = 'large' - }, - down() { - this.sizes = 'small' - }, - }, -}) diff --git a/src/pages/Tmdb.js b/src/pages/Tmdb.blits similarity index 73% rename from src/pages/Tmdb.js rename to src/pages/Tmdb.blits index c7b7086..235d877 100644 --- a/src/pages/Tmdb.js +++ b/src/pages/Tmdb.blits @@ -15,53 +15,55 @@ * SPDX-License-Identifier: Apache-2.0 */ -import Blits from '@lightningjs/blits' + + diff --git a/src/pages/Transitions.blits b/src/pages/Transitions.blits new file mode 100644 index 0000000..5825a4c --- /dev/null +++ b/src/pages/Transitions.blits @@ -0,0 +1,110 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + + + + diff --git a/src/pages/Transitions.js b/src/pages/Transitions.js deleted file mode 100644 index bc8066e..0000000 --- a/src/pages/Transitions.js +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright 2023 Comcast Cable Communications Management, LLC - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - * SPDX-License-Identifier: Apache-2.0 - */ - -import Blits from '@lightningjs/blits' - -export default Blits.Component('Transitions', { - template: ` - - - - - - - - - - - - - - - - - `, - state() { - return { - y: 50, - } - }, - hooks: { - init() { - this.$setInterval(() => { - this.go() - }, 12000) - this.go() - }, - }, - methods: { - doneTransition3() { - this.$log.info('Transition 3 is done!') - }, - start(el, prop, val) { - this.$log.info('Start transition', el.nodeId, prop, val) - }, - finished(el, prop, val) { - this.$log.info('Finished transition', el.nodeId, prop, val) - }, - go() { - this.y = 50 - this.$setTimeout(() => { - this.y = 1080 - 50 - 200 - }, 1000) - - this.$setTimeout(() => { - this.y = 50 - this.$setTimeout(() => { - this.y = 200 - }, 1000) - }, 6000) - }, - }, -}) diff --git a/src/pages/Viewport.js b/src/pages/Viewport.blits similarity index 76% rename from src/pages/Viewport.js rename to src/pages/Viewport.blits index 1104929..acda698 100644 --- a/src/pages/Viewport.js +++ b/src/pages/Viewport.blits @@ -13,10 +13,25 @@ * limitations under the License. * * SPDX-License-Identifier: Apache-2.0 - */ +*/ + + + +